Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
7 tasks done
manucorporat opened this issue Jul 15, 2022 · 10 comments
Closed
7 tasks done
Labels
p4-important Violate documented behavior or significantly improves performance (priority) possible regression The issue only appears after a new release

Comments

@manucorporat
Copy link
Contributor

manucorporat commented Jul 15, 2022

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

@sodatea sodatea added the possible regression The issue only appears after a new release label Jul 15, 2022
@acarl005
Copy link

acarl005 commented Jul 18, 2022

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
Copy link
Member

patak-dev commented Jul 18, 2022

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 patak-dev added p4-important Violate documented behavior or significantly improves performance (priority) and removed pending triage labels Jul 18, 2022
@patak-dev
Copy link
Member

patak-dev commented Jul 18, 2022

@manucorporat this should be fixed in vite@3.0.2
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
Copy link

sgnilreutr commented Jul 19, 2022

@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
Copy link
Member

patak-dev commented Jul 19, 2022

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

@jimblue
Copy link

jimblue commented Jul 20, 2022

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
Copy link

sebsobseb commented Jul 21, 2022

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
Copy link
Member

patak-dev commented Jul 21, 2022

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

@sebsobseb
Copy link

sebsobseb commented Jul 21, 2022

@patak-dev there is a seperate issue #9238

@patak-dev
Copy link
Member

patak-dev commented Jul 21, 2022

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

@github-actions github-actions bot locked and limited conversation to collaborators Aug 6, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
p4-important Violate documented behavior or significantly improves performance (priority) possible regression The issue only appears after a new release
Projects
None yet
Development

No branches or pull requests

7 participants