Unknown file extension ".css"

[dillionverma]

Trying to migrate from contentlayer to velite

PR is here https://github.com/magicuidesign/magicui/pull/189

Ran existing code base through velite but get this error

react-tweet is a dependency included in a code snippet which gets rendered as a component using mdx

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /Users/dillionverma/src/magicui/node_modules/.pnpm/react-tweet@3.2.1_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/react-tweet/dist/twitter-theme/tweet-actions.module.css
    at new NodeError (node:internal/errors:406:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:99:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:142:36)
    at defaultLoad (node:internal/modules/esm/load:120:20)
    at ModuleLoader.load (node:internal/modules/esm/loader:396:13)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:278:56)
    at new ModuleJob (node:internal/modules/esm/module_job:65:26)
    at #createModuleJob (node:internal/modules/esm/loader:290:17)
    at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:248:34)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:229:17) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Node.js v20.9.0
 ELIFECYCLE  Command failed with exit code 1.
 ```

[dillionverma]

I added a commit which triggers this issue here

https://github.com/magicuidesign/magicui/pull/189/commits/0b127bb9b06c1f62abe1fce5086c186a39444fda

[zce]

Based on your description, it seems that this has nothing to do with Velite.

Anyway, I will try to reproduce the problem you mentioned first.

[zce]

I think I know what the problem is.

I need some time to see if there is a better solution.

[dillionverma]

a similar issue also occurred with another component in the registry which I completely removed called "wavy-dot-pattern" and these issues didn't occur with contentlayer which led me to believe it was something to do with the way velite is bundling / rendering the markdown

[zce]

Yes, the reason is that I stopped bundling third-party libraries in the velite.config.ts in a previous version, which is different from contentlayer

https://github.com/zce/velite/pull/62

Please wait for me for a moment

[zce]

A brief explanation of the cause of the problem: In the reference files of velite.config.ts, some modules not intended for the Node.js runtime were imported using dynamic import, and these imports are unrelated to the operation of Velite.

However, the esbuild used internally by Velite tries to bundle and execute these modules, which are not for the Node.js runtime, leading to the issue.

Although Velite can ignore the bundling of these modules by specifying esbuild's external configuration option, like this: external: ["@/registry"], I believe this is not a common scenario, so I don't plan to support custom external. For detailed reasons, refer to #62.

I personally think there are two solutions to this problem:

1. Remove the dynamic import from the relevant files: https://github.com/magicuidesign/magicui/pull/190
2. Prepare a separate configuration module for the rehype plugin, but this requires keeping the files in sync, so it's not recommended.

Since the original codebase seems to be missing some files, the PR is not yet complete. If you agree with my view, I can try to improve it when I have time.

[dillionverma]

thanks for prompt responses!

i took a quick look at the PR and think it should theoretically work

I also prefer option 1 instead of having to maintain the two separate files

tried to test locally but noticed specific pages weren't running

im not too familiar with the lower level details lazy components yet - any idea what might be going on here?

[zce]

Note my usage in PR:

const Component = lazy(() => import(`@/registry/components/examples/${component}`))

You cannot extract this path into a variable, as this will prevent the compiler from finding it properly.