Error: Module "module" has been externalized for browser compatibility

[manucorporat]

Describe the bug

At Qwik, we use Vite. When updating to 3.0.0, we found out that the app always crashes in the browser, because a SSR module leaks and it's imported through a ESM import in the browser code.

Internally QwikVite plugin uses ssrLoadModule(). seems like it's caching the transform needed for SSR and making it accessible from the client, when hitting the URL.

even manually setting transformRequest(url, {ssr: false]) returns a request that in SSR only.

This was not a problem in 2.9.9

Uncaught (in promise) Error: Module "module" has been externalized for browser compatibility. Cannot access "module.createRequire" in client code.
    at Object.get (__vite-browser-external:module:3:11)
    at @builder__io_qwik.js?v=594c8cff:1:192

Reproduction

https://stackblitz.com/edit/nextjs-opbbv2?file=README.md,src%2Froutes%2Findex.tsx,vite.config.ts

System Info

System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 425.98 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 3.2.0 - ~/.yarn/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Safari: 15.5
  npmPackages:
    vite: 3.0.0 => 3.0.0

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[acarl005]

I am having this issue in my app since upgrading to Vite 3. The issue is coming from a library I'm using called dom-to-svg, and it only happens with vite dev.

I have a reproduction case here: https://stackblitz.com/edit/sveltejs-kit-template-default-azwtze?file=src%2Froutes%2Findex.svelte&terminal=dev

To see the error, run npm run dev, and the index page crashes with this error:

Error: Module "path" has been externalized for browser compatibility. Cannot access "path.dirname" in client code.
    at Object.get (https://sveltejs-kit-template-default-azwtze--5173.local.webcontainer.io/node_modules/.vite/deps/dom-to-svg.js?v=e81faeb3:2646:17)
    at node_modules/postcss/lib/map-generator.js (https://sveltejs-kit-template-default-azwtze--5173.local.webcontainer.io/node_modules/.vite/deps/dom-to-svg.js?v=e81faeb3:3033:11)
    at __require (https://sveltejs-kit-template-default-azwtze--5173.local.webcontainer.io/node_modules/.vite/deps/chunk-QOVRSCHT.js?v=e81faeb3:11:50)
    at node_modules/postcss/lib/lazy-result.js (https://sveltejs-kit-template-default-azwtze--5173.local.webcontainer.io/node_modules/.vite/deps/dom-to-svg.js?v=e81faeb3:4790:24)
    at __require (https://sveltejs-kit-template-default-azwtze--5173.local.webcontainer.io/node_modules/.vite/deps/chunk-QOVRSCHT.js?v=e81faeb3:11:50)
    at node_modules/postcss/lib/postcss.js (https://sveltejs-kit-template-default-azwtze--5173.local.webcontainer.io/node_modules/.vite/deps/dom-to-svg.js?v=e81faeb3:5497:22)
    at __require (https://sveltejs-kit-template-default-azwtze--5173.local.webcontainer.io/node_modules/.vite/deps/chunk-QOVRSCHT.js?v=e81faeb3:11:50)
    at https://sveltejs-kit-template-default-azwtze--5173.local.webcontainer.io/node_modules/.vite/deps/dom-to-svg.js?v=e81faeb3:6382:30

Interestingly, it works just fine in "prod" mode. If you run npm run build && npm run preview, it does not crash.

[patak-dev]

Hey @manucorporat, sorry for the regression. Would it be possible for you to PR Qwik CI or a part of it to https://github.com/vitejs/vite-ecosystem-ci? We can then detect these issues before releasing the next versions. A file in tests like this one is enough to get our CIs connected: https://github.com/vitejs/vite-ecosystem-ci/blob/main/tests/marko.ts

The issue appears in Qwik because you are setting build.ssr: true in the config. Most projects don't have that set during development. This is a bug in Vite though, I'll send a PR soon to include it in 3.0.2.

[patak-dev]

@manucorporat this should be fixed in [email protected]
Would you contact me (@patak in https://chat.vitejs.dev)? It would be great if we could get the qwik CI in vite-ecosystem-ci so this doesn't happen again

[sgnilreutr]

@patak-dev unfortunately similar bugs are still there:

Uncaught Error: Module "events" has been externalized for browser compatibility. Cannot access "events.EventEmitter" in client code. get events:9 js Parser.js:133 __require chunk-QOVRSCHT.js:11 js index.js:1 __require chunk-QOVRSCHT.js:11 <anonymous> HtmlParser.js:1 [events:9:12](browser-external:events) get events:9 js Parser.js:133 __require chunk-QOVRSCHT.js:11 js index.js:1 __require chunk-QOVRSCHT.js:11 <anonymous> HtmlParser.js:1 InnerModuleEvaluation self-hosted:2361 InnerModuleEvaluation self-hosted:2361 InnerModuleEvaluation self-hosted:2361 InnerModuleEvaluation self-hosted:2361 InnerModuleEvaluation self-hosted:2361 InnerModuleEvaluation self-hosted:2361 evaluation self-hosted:2322

[patak-dev]

@sgnilreutr please create a new bug report with a reproduction, thanks!

[jimblue]

I'm getting similar error in browser while using y2be-player :

Uncaught (in promise) Error: Module "events" has been externalized for browser compatibility. Cannot access "events.EventEmitter" in client code.

    get events:9
    <anonymous> y2be-player.js:45
events:9:12
    lazyLoadYouTube https://website.test:5173/resources/js/app/index.js?t=1658337747784:100
    AsyncFunctionThrow self-hosted:672
    (Async: async)
    onDocumentReady https://website.test:5173/resources/js/app/index.js?t=1658337747784:74
    init https://website.test:5173/resources/js/app/index.js?t=1658337747784:52
    App https://website.test:5173/resources/js/app/index.js?t=1658337747784:41
    newApp https://website.test:5173/resources/js/app/index.js?t=1658337747784:134
    <anonymous> https://website.test:5173/resources/js/pages/blog_post.js:6
    InnerModuleEvaluation self-hosted:2361
    evaluation self-hosted:2322

It seems to be related to the Class extending the EventEmitter

[sebsobseb]

I'm getting the same issue using Intertia + Laravel + Laravel vite:

Uncaught Error: Module "./util.inspect" has been externalized for browser compatibility. Cannot access "./util.inspect.custom" in client code.
    at Object.get (util.inspect:9:13)
    at .yarn/cache/object-inspect-npm-1.12.2-f125a822c0-a534fc1b85.zip/node_modules/object-inspect/index.js (index.js:69:33)
    at __require (chunk-OL3AADLO.js?v=ac4fe6e7:9:50)
    at .yarn/cache/side-channel-npm-1.0.4-e1f38b9e06-351e41b947.zip/node_modules/side-channel/index.js (index.js:5:15)
    at __require (chunk-OL3AADLO.js?v=ac4fe6e7:9:50)
    at .yarn/cache/qs-npm-6.11.0-caf1bc9dea-6e1f29dd53.zip/node_modules/qs/lib/stringify.js (stringify.js:3:22)
    at __require (chunk-OL3AADLO.js?v=ac4fe6e7:9:50)
    at .yarn/cache/qs-npm-6.11.0-caf1bc9dea-6e1f29dd53.zip/node_modules/qs/lib/index.js (index.js:3:17)
    at __require (chunk-OL3AADLO.js?v=ac4fe6e7:9:50)
    at .yarn/cache/@inertiajs-inertia-npm-0.11.0-d50fb317f9-69653f3cb4.zip/node_modules/@inertiajs/inertia/dist/index.js (index.js:1:99)`

[patak-dev]

@jimblue @sebsobseb please create a separate issue with a minimal reproduction. Thanks!

[sebsobseb]

@patak-dev there is a seperate issue #9238

[patak-dev]

That issue is closed, if you think that the comment from @sapphi-red isn't right please comment there.