vite-node@0.28.3 cannot import `clsx`

hanayashiki commented 1 year ago

Describe the bug

When importing clsx in a typescript file, we have a syntax error reported by node due to using export syntax in a cjs file. I think this is due to clsx.m.js is not treated by node as an ESM.

yarn vite-node index.ts
yarn run v1.22.19
$ /Users/chenyuwang/vite-node-import-clsx-fixture/node_modules/.bin/vite-node index.ts
(node:97184) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/chenyuwang/vite-node-import-clsx-fixture/node_modules/clsx/dist/clsx.m.js:1
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}export function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}export default clsx;
                                                                                                                                                                                                                                        ^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1048:15)
    at Module._compile (node:internal/modules/cjs/loader:1083:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Function.Module._load (node:internal/modules/cjs/loader:838:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at ESMLoader.import (node:internal/modules/esm/loader:527:24)

Node.js v18.9.0

Reproduction

https://github.com/hanayashiki/vite-node-import-clsx-fixture

System Info

System:
    OS: macOS 12.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 393.70 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.9.0 - ~/.nvm/versions/node/v18.9.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.19.1 - ~/.nvm/versions/node/v18.9.0/bin/npm
    Watchman: 2022.01.10.00 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 102.1.39.111
    Firefox: 106.0
    Safari: 15.5
  npmPackages:
    vite: ^4.1.0 => 4.1.0

Used Package Manager

yarn

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

hanayashiki commented 1 year ago

For anyone encountering this bug, you may get around it with alias "clsx": "clsx/dist/index.js" which is a cjs file and works both in vite and vite-node.

sibelius commented 4 months ago

where should I add this alias ?

hanayashiki commented 4 months ago

where should I add this alias ?

Hi, you should add it here https://vitejs.dev/config/shared-options#resolve-alias

vitest-dev / vitest