Link is not exposed in vocs/components

[0xpolarzero]

Description

vocs/app/components/Link.js is not exported from vocs/components, which makes it difficult to use links in custom tsx components, if we want them to be styled the same as in mdx.

It is also the case for a few other components.

Fix

I tried patching Vocs to export it from vocs/components, but it's generating an error:

On the page:

Unexpected Application Error!
Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'virtual:'

In the console:

Uncaught (in promise) SyntaxError: import not found: Link

I'm not sure what I'm doing wrong here, since I could not really relate to the instances of this error I could find online.

Edit

Found out it's pretty easy to replicate, so I'm not sure if it should be exported (also apologies if it's intentional actually).

const Link = ({ href, children }: { href: string; children: ReactNode }) => (
  <a
    href={href}
    target="_blank"
    rel="noopener noreferrer"
    className="vocs_Link_accent_underlined"
  >
    {children}
  </a>
);

[unnoq]

I face the same error when I import any component from vocs/components

Error: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'virtual:'
@dinui/web:dev:     at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:239:11)
@dinui/web:dev:     at defaultLoad (node:internal/modules/esm/load:130:3)
@dinui/web:dev:     at ModuleLoader.load (node:internal/modules/esm/loader:409:13)
@dinui/web:dev:     at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:56)
@dinui/web:dev:     at new ModuleJob (node:internal/modules/esm/module_job:65:26)
@dinui/web:dev:     at #createModuleJob (node:internal/modules/esm/loader:303:17)
@dinui/web:dev:     at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:260:34)
@dinui/web:dev:     at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:241:17)
@dinui/web:dev:     at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:21)

[unnoq]

Description

vocs/app/components/Link.js is not exported from vocs/components, which makes it difficult to use links in custom tsx components, if we want them to be styled the same as in mdx.

It is also the case for a few other components.

Fix

I tried patching Vocs to export it from vocs/components, but it's generating an error:

On the page:

Unexpected Application Error!
Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'virtual:'

In the console:

Uncaught (in promise) SyntaxError: import not found: Link

I'm not sure what I'm doing wrong here, since I could not really relate to the instances of this error I could find online.

Edit

Found out it's pretty easy to replicate, so I'm not sure if it should be exported (also apologies if it's intentional actually).

const Link = ({ href, children }: { href: string; children: ReactNode }) => (
  <a
    href={href}
    target="_blank"
    rel="noopener noreferrer"
    className="vocs_Link_accent_underlined"
  >
    {children}
  </a>
);

If you want to use <Link> component you can import it from react-router-dom