vite: Error: Module "events" has been externalized for browser compatibility

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.

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 18 (5 by maintainers)

Most upvoted comments

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 Androidhttps://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 GitHubhttps://github.com/vitejs/vite/issues/9238#issuecomment-1207248242, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAT4Q7I67SHOSWK57EZTYY3VX2LRPANCNFSM54CD2BLA. You are receiving this because you commented.Message ID: @.***>

justin0mcateer on Aug 7, 2022

The StackOverflow answer mentioned above also worked for me…

justin0mcateer on Aug 4, 2022

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.

otaviosoares on Jul 25, 2022

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.

sapphi-red on Jul 21, 2022

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

@sapphi-red initial post has been updated.

sgnilreutr on Jul 20, 2022

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

sapphi-red on Jul 20, 2022