[Bug report] Some files are incorrectly passed to node esm loader

Mister-Hope commented 1 year ago

Description

See some issues report like:

Here is the output code:

// vuepress-shared/client/index.ts
/* some code */;import"./styles/message.scss";// xxxxx more code

I am expecting the bundler should handle scss file with sass (vite) or sass-loader (webpack) correctly, instead of passing the file to node esm loader:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".scss" for node_modules/.pnpm/vuepress-shared@2.0.0-beta.94/node_modules/vuepress-shared/lib/client/styles/message.scss
    at new NodeError (node:internal/errors:387:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:76:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:118:38)
    at defaultLoad (node:internal/modules/esm/load:81:20)
    at nextLoad (node:internal/modules/esm/loader:165:28)
    at ESMLoader.load (node:internal/modules/esm/loader:608:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:464:22)
    at new ModuleJob (node:internal/modules/esm/module_job:63:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:483:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:441:34)
 ELIFECYCLE  Command failed with exit code 1.

No code changes from none ESM version to currect version. The output code is always esm, and always being imported on client side.

I think this is something related to bunder. As this is happening only during build stage (dev server is working fine)

Reproduction

https://github.com/MoonLord-LM/MyPages Comming from a issue

Used Package Manager

npm

System Info

not related I guess, starting from beta.50

MoonLord-LM commented 1 year ago

mark

Mister-Hope commented 1 year ago

Also, here are some new issues:

github-actions[bot] commented 1 year ago

Hello @Mister-Hope. Please provide a minimal reproduction using a GitHub repository or v2.vuepress.vuejs.org/new. Issues marked with need reproduction will be closed if they have no activity within 7 days.

meteorlxy commented 1 year ago

Could not reproduce it, as there is no lockfile in the repo your provided.

MoonLord-LM commented 1 year ago

@meteorlxy

You can see the [ Run cat 'package-lock.json' ] part:

https://github.com/MoonLord-LM/MyPages/runs/8105848221?check_suite_focus=true

And this is the build script:

https://github.com/MoonLord-LM/MyPages/blob/master/.github/workflows/node.js.yml

MoonLord-LM commented 1 year ago

It seems fixed now.

"vuepress-plugin-md-enhance": "^2.0.0-beta.97"

its2easy commented 1 year ago

@meteorlxy , I get an error when I'm trying to import my theme from node_modules

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for D:\my_project_path\node_modules\@its2easy\vuepress2-theme\theme\index.ts
    at new NodeError (node:internal/errors:372:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:76:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:118:38)
    at defaultLoad (node:internal/modules/esm/load:21:20)
    at ESMLoader.load (node:internal/modules/esm/loader:407:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:326:22)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:345:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:304:34)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:82:21)

Could it be related to this issue? Seems like it started from beta.50. I know it's better to compile ts but it worked before and it's working now if I copy the theme folder from node_modules to project folder.

Mister-Hope commented 1 year ago

Nope, esm loader does not support ts. Basically, you are providing an extrance file which node.js cannot handle.

meteorlxy commented 1 year ago

I'm trying to import my theme from node_modules

Do not publish your package in .ts. Compile it to .js first.

its2easy commented 1 year ago

@Mister-Hope but why in the second case the imported file is not processed by tsc like with local theme import?

import vuepressTheme from './theme/index.ts'; // works
import vuepressTheme from 'package/index.ts'; // doesn't work

Mister-Hope commented 1 year ago

The first one is considered as source file and proceeded by bundler(client) or esbuild(node), while the second one is considered as production code. So node esm loader is used

its2easy commented 1 year ago

ok, thanks

TaTo30 commented 1 year ago

I'm getting a similar error with depedency's css file.

Any ideas?

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for C:\project_path\docs\node_modules\pdfjs-dist\web\pdf_viewer.css
    at new NodeError (node:internal/errors:387:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:75:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:117:38)
    at defaultLoad (node:internal/modules/esm/load:81:20)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at ESMLoader.load (node:internal/modules/esm/loader:605:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
    at new ModuleJob (node:internal/modules/esm/module_job:63:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:480:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34)

vuepress / core