Error: Module "events" has been externalized for browser compatibility #9238

sgnilreutr · 2022-07-20T04:13:08Z

Describe the bug

After upgrading to Vite 3.0.2 (since 2.X version has some production level bugs for me) - the production version started working, but the development is crashing due to the following error:

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

After removing the mentioned dependency 'HtmlParser' -> https://www.npmjs.com/package/react-html-parser -> the installation seems to work.

Reproduction

https://stackblitz.com/edit/react-rj6cc2

System Info

System:
    OS: macOS 12.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 36.39 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.1.2 - /usr/local/bin/npm
    Watchman: 2022.07.04.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 103.0.5060.114
    Firefox Developer Edition: 103.0
    Safari: 15.5
  npmPackages:
    @vitejs/plugin-react: 2.0.0 => 2.0.0 
    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.

The text was updated successfully, but these errors were encountered:

sapphi-red · 2022-07-20T13:54:28Z

Would you provide a minimal repro, not the entire project?

github-actions · 2022-07-20T13:54:47Z

Hello @sgnilreutr. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

sgnilreutr · 2022-07-20T19:46:41Z

Would you provide a minimal repro, not the entire project?

@sapphi-red initial post has been updated.

sapphi-red · 2022-07-21T00:00:15Z

react-html-parser uses htmlparser2@3.10.1 and that uses events node-builtin module.
https://github.com/fb55/htmlparser2/blob/v3.10.1/lib/Parser.js#L133
events cannot be used from browser and you need to install a polyfill by yourself.
https://stackblitz.com/edit/vitejs-vite-4ymyej?file=package.json&terminal=dev

Previously Vite 2 was wrongly handling this.
Closing as it is working as intended.

sebsobseb · 2022-07-21T16:40:21Z

@sapphi-red does this also apply for the error I'm having about util.inspect?

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

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)

More details can be found here: laravel/vite-plugin#102

sapphi-red · 2022-07-21T16:51:14Z

@sebsobseb That one is a bug.
It's a reported at #9092, #7576. (The reason is same: #7599)

sebsobseb · 2022-07-21T17:13:36Z

@sapphi-red ok, thanks for confirming.
I just had a look at that PR #7599 - Any idea when approx it will be merged/tagged?

sapphi-red · 2022-07-21T17:17:58Z

@sebsobseb #7599 won't be merged because it only explains the reason of the bug. #9170 might fix this but I've not checked yet.
If you create a reproduction without laravel/vite-plugin in stackblitz, I'll try to find a workaround.

sebsobseb · 2022-07-21T19:14:45Z

@sapphi-red Ok, fair enough, appreciate the help.
The strange thing is that i cannot reproduce it without the laravel/vite-plugin:
https://stackblitz.com/edit/vite-whdqvh?file=main.js

Simply importing import objectInspect from 'object-inspect'; should trigger the error.

With the plugin (on my machine) this throws the following error in the console:

[util.inspect:9] 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=736966f0:9:50)
    at dep:object-inspect:1:16

Do you reckon it could be because of the plugin or because of my machine? This is what the config of the plugin looks like:
https://github.com/laravel/vite-plugin/blob/main/src/index.ts

The other difference is that i'm using Yarn 3.2.1, in stackblitz it's v1.22.

sebsobseb · 2022-07-21T19:22:19Z

✅ The issue disappeared when I switched from Yarn to NPM 🤷‍♂️

sapphi-red · 2022-07-22T02:45:49Z

@sebsobseb Umm. Does it reproduce if you import inertia.js instead of directly importing object-inspect?

otaviosoares · 2022-07-25T18:25:23Z

The issue disappeared when I switched from Yarn to NPM

Yeah, the issue seems to be related pnp mode only. I switched to yarn's node-modules linker and the problem is gone.

Ken-vdE · 2022-07-26T09:00:10Z

@sapphi-red
I'm having the same issue when trying to import { Device } from '@twilio/voice-sdk'; (https://www.npmjs.com/package/@twilio/voice-sdk).

Because eventtarget.js tries running const EventEmitter = require('events').EventEmitter;.

I've tried adding the 'events' package (https://www.npmjs.com/package/events), but then I run into a similar issue:

I've also tried installing 'rollup-plugin-node-polyfills' (https://www.npmjs.com/package/rollup-plugin-node-polyfills) and setting it in vite.config.js

    build: {
        rollupOptions: {
            plugins: [
                rollupNodePolyFill(),
            ],
        },
    },
    resolve: {
        alias: [
            { find: 'events', replacement: 'rollup-plugin-node-polyfills/polyfills/events' },
            { find: 'child_process', replacement: 'rollup-plugin-node-polyfills' },
            { find: 'path', replacement: 'rollup-plugin-node-polyfills/polyfills/path' },
        ],
    },

but then I run into

So then I add this to vite.config.js:

    define: {
        process: {
            env: {},
        },
    },

But then this is thrown:

Then I found this post https://stackoverflow.com/a/70666018/3017716 and added those things to the vite.config.js. It seems to be working now...

justin0mcateer · 2022-08-04T12:14:56Z

The StackOverflow answer mentioned above also worked for me...

blobinabottle · 2022-08-06T17:06:21Z

Fighting with the polypill nightmare. Anyone is able to fix the issue with Sveltekit/vite?

This is the config I'm using (process and buffer are not warning anymore so I guess it's "working" but I'm stuck on events)

import nodePolyfills from "rollup-plugin-polyfill-node";

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";

export default defineConfig({
  plugins: [nodePolyfills({ include: null }), svelte()],
});

justin0mcateer · 2022-08-07T01:59:31Z

See that link on Stack Overflow, you need to use a 'resolve' block and specifically map the 'events' import to a file on that polyfill. Also, there is a newer version of the polyfill: https://github.com/FredKSchott/rollup-plugin-polyfill-node Look in the 'polyfills' directory and you will see all of the node modules that you can alias. Get Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: Lionel ***@***.***> Sent: Saturday, August 6, 2022 12:06:31 PM To: vitejs/vite ***@***.***> Cc: justin0mcateer ***@***.***>; Comment ***@***.***> Subject: Re: [vitejs/vite] Error: Module "events" has been externalized for browser compatibility (Issue #9238) Fighting with the polypill nightmare. Anyone is able to fix the issue with Sveltekit/vite? This is the config I'm using (process and buffer are not warning anymore so I guess it's "working" but I'm stuck on events) import nodePolyfills from "rollup-plugin-polyfill-node"; import { defineConfig } from "vite"; import { svelte } from ***@***.***/vite-plugin-svelte"; export default defineConfig({ plugins: [nodePolyfills({ include: null }), svelte()], }); — Reply to this email directly, view it on GitHub<#9238 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAT4Q7I67SHOSWK57EZTYY3VX2LRPANCNFSM54CD2BLA>. You are receiving this because you commented.Message ID: ***@***.***>

blobinabottle · 2022-08-07T08:12:33Z

Ah man, thanks a lot! I tried that initially and got some weird errors with string_encoder but it turns out it's not necessary.

Do you know if it has an impact to add all the polyfills (so we could always use the same config file in different projects) or is it best to only add the ones needed?

justin0mcateer · 2022-08-07T11:53:22Z

My thought was to minimize the aliases. Overtime, I plan to try to eliminate these with different deps or upstream patches. I did run into a problem with one polyfill depending on a different one (process) and it wasn't referenced, so it wasn't resolving. I had to add an import to get it to work correctly. Get Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: Lionel ***@***.***> Sent: Sunday, August 7, 2022 3:12:45 AM To: vitejs/vite ***@***.***> Cc: justin0mcateer ***@***.***>; Comment ***@***.***> Subject: Re: [vitejs/vite] Error: Module "events" has been externalized for browser compatibility (Issue #9238) Ah man, thanks a lot! I tried that initially and got some weird errors with string_encoder but it turns out it's not necessary. Do you know if it has an impact to add all the polyfills (so we could always use the same config file in different projects) or is it best to only add the ones needed? — Reply to this email directly, view it on GitHub<#9238 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAT4Q7MS5GPNNBIUK5XMYVTVX5VX3ANCNFSM54CD2BLA>. You are receiving this because you commented.Message ID: ***@***.***>

sgnilreutr added the pending triage label Jul 20, 2022

sapphi-red added the needs reproduction label Jul 20, 2022

github-actions bot removed the pending triage label Jul 20, 2022

sapphi-red added pending triage and removed needs reproduction labels Jul 20, 2022

sapphi-red closed this as completed Jul 21, 2022

sapphi-red added invalid This doesn't seem right and removed pending triage labels Jul 21, 2022

This was referenced Jul 21, 2022

[w/ Inertia] Error: Cannot access "./util.inspect.custom" in client code. laravel/vite-plugin#102

Closed

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

Closed

github-actions bot locked and limited conversation to collaborators Aug 22, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error: Module "events" has been externalized for browser compatibility #9238

Error: Module "events" has been externalized for browser compatibility #9238

sgnilreutr commented Jul 20, 2022 •

edited

Loading

sapphi-red commented Jul 20, 2022

github-actions bot commented Jul 20, 2022

sgnilreutr commented Jul 20, 2022

sapphi-red commented Jul 21, 2022

sebsobseb commented Jul 21, 2022 •

edited

Loading

sapphi-red commented Jul 21, 2022

sebsobseb commented Jul 21, 2022

sapphi-red commented Jul 21, 2022 •

edited

Loading

sebsobseb commented Jul 21, 2022 •

edited

Loading

sebsobseb commented Jul 21, 2022

sapphi-red commented Jul 22, 2022 •

edited

Loading

otaviosoares commented Jul 25, 2022

Ken-vdE commented Jul 26, 2022 •

edited

Loading

justin0mcateer commented Aug 4, 2022

blobinabottle commented Aug 6, 2022

justin0mcateer commented Aug 7, 2022 via email

blobinabottle commented Aug 7, 2022

justin0mcateer commented Aug 7, 2022 via email

Error: Module "events" has been externalized for browser compatibility #9238

Error: Module "events" has been externalized for browser compatibility #9238

Comments

sgnilreutr commented Jul 20, 2022 • edited Loading

Describe the bug

Reproduction

System Info

Used Package Manager

Logs

Validations

sapphi-red commented Jul 20, 2022

github-actions bot commented Jul 20, 2022

sgnilreutr commented Jul 20, 2022

sapphi-red commented Jul 21, 2022

sebsobseb commented Jul 21, 2022 • edited Loading

sapphi-red commented Jul 21, 2022

sebsobseb commented Jul 21, 2022

sapphi-red commented Jul 21, 2022 • edited Loading

sebsobseb commented Jul 21, 2022 • edited Loading

sebsobseb commented Jul 21, 2022

sapphi-red commented Jul 22, 2022 • edited Loading

otaviosoares commented Jul 25, 2022

Ken-vdE commented Jul 26, 2022 • edited Loading

justin0mcateer commented Aug 4, 2022

blobinabottle commented Aug 6, 2022

justin0mcateer commented Aug 7, 2022 via email

blobinabottle commented Aug 7, 2022

justin0mcateer commented Aug 7, 2022 via email

sgnilreutr commented Jul 20, 2022 •

edited

Loading

sebsobseb commented Jul 21, 2022 •

edited

Loading

sapphi-red commented Jul 21, 2022 •

edited

Loading

sebsobseb commented Jul 21, 2022 •

edited

Loading

sapphi-red commented Jul 22, 2022 •

edited

Loading

Ken-vdE commented Jul 26, 2022 •

edited

Loading