question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

vite does not seem to support es module that depends on nodejs builtins

See original GitHub issue

Describe the bug

By default vite does not include any support for es module that import nodejs builtins module (like crypto, etc…)

I tried to add the rollup-plugin-node-builtins plugin with option {crypto: true}

but I had to set a name to it as the following

import builtins from 'rollup-plugin-node-builtins';

const builtinsPlugin = builtins({crypto: true});
builtinsPlugin.name = 'builtins';

module.exports = {
    rollupInputOptions: {
        plugins: [
            builtinsPlugin
        ]
    }
  }

because otherwise I get the following error :

TypeError: Cannot read property 'includes' of undefined
    at C:\dev\projects\wighawag\svite-test\svite-typescript-minimal\node_modules\vite\dist\node\build\index.js:202:60
    at Array.findIndex (<anonymous>)
    at Object.build (C:\dev\projects\wighawag\svite-test\svite-typescript-minimal\node_modules\vite\dist\node\build\index.js:202:36)
    at async runBuild (C:\dev\projects\wighawag\svite-test\svite-typescript-minimal\node_modules\svite\bin\svite.js:176:7)
    at async Command.<anonymous> (C:\dev\projects\wighawag\svite-test\svite-typescript-minimal\node_modules\svite\bin\svite.js:401:7)
    at async Promise.all (index 0)
    at async main (C:\dev\projects\wighawag\svite-test\svite-typescript-minimal\node_modules\svite\bin\svite.js:441:3)

Also when running npm run dev it fails with various error indicating the builtins are not properly injected

Reproduction

Here is repo that uses svite (https://github.com/dominikg/svite/) where you can reproduce the issue in the branch rollup-plugin-node-builtins : https://github.com/wighawag/svite-typescript-minimal/tree/rollup-plugin-node-builtins

npm i
npm run build

to test runtime error :

npm run dev

System Info

  • required vite version: 1.0.0-rc.4
  • required Operating System: Windows 10 (64bit)
  • required Node version: 12.18.3
  • npm/yarn version : npm 6.14.6

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:31 (11 by maintainers)

github_iconTop GitHub Comments

31reactions
yyx990803commented, Jan 25, 2021

That’s a problem in rollup-plugin-node-globals. It’s very outdated and is probably using an old version of acorn to parse the code in script mode instead of module mode.

Suggestion: if you have dependencies that expects to use Node built-ins, try swapping it out with something more modern. Relying on Node built-ins in the browser is bad practice, period.

15reactions
yyx990803commented, Jan 14, 2021

You can’t use require in your source code. Vite is ESM only.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Error [ERR_REQUIRE_ESM]: require() of ES Module not ...
The node-fetch latest version doesn't use the require() syntax to import the package. You need to go to your package.json and type
Read more >
CommonJS vs. ES Modules: Modules and Imports in NodeJS
As we already have seen, ES Modules can import CommonJS modules. Vice versa is not the case. CommonJS modules cannot import ES Modules....
Read more >
Getting Started - ESBuild
#Install esbuild. First, download and install the esbuild command locally. A prebuilt native executable can be installed using npm (which is automatically ...
Read more >
Externals - webpack
Using node preset will not bundle built-in modules and treats them as external and loads them via require() when used. webpack.config.js module.exports =...
Read more >
Comparing the New Generation of Build Tools - CSS-Tricks
In fact, Snowpack and Vite actually use esbuild under the hood for ... There is no support for CSS Modules, but there are...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Hashnode Post

No results found