Vite unable to use npm xml-js package: Cannot read properties of undefined (reading 'prototype') at sax.js:222:46 at node_modules/sax/lib/sax.js

[rrabb]

Describe the bug

Current web app project using Rollup and am able to use the xml-js package to build the web app, however, when trying to switch Vite, the web app fails to load and Vite produces no errors, however, in the console I get the error below at runtime. I reproduced this using the simplest Vite+Vue app on stackblitz (see link below).

Text:

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
    at sax.js:222:46
    at node_modules/sax/lib/sax.js (sax.js:1565:1)
    at __require (chunk-OL3AADLO.js?v=8029f249:9:50)
    at node_modules/xml-js/lib/xml2js.js (xml2js.js:1:11)
    at __require (chunk-OL3AADLO.js?v=8029f249:9:50)
    at node_modules/xml-js/lib/index.js (index.js:3:14)
    at __require (chunk-OL3AADLO.js?v=8029f249:9:50)
    at dep:xml-js:1:16
| (anonymous) | @ | sax.js:222
| node_modules/sax/lib/sax.js | @ | sax.js:1565
| __require | @ | chunk-OL3AADLO.js?v=8029f249:9
| node_modules/xml-js/lib/xml2js.js | @ | xml2js.js:1
| __require | @ | chunk-OL3AADLO.js?v=8029f249:9
| node_modules/xml-js/lib/index.js | @ | index.js:3
| __require | @ | chunk-OL3AADLO.js?v=8029f249:9
| (anonymous) | @ | dep:xml-js:1

xml-js: https://www.npmjs.com/package/xml-js
It appears that it fails to package Stream, but Rollup can package it, and I understand Vite uses Rollup internally, so I'm confused as to why this is failing.

When reproducing using the stackblitz web IDE, please open console to see the error.

Reproduction

https://stackblitz.com/edit/vitejs-vite-fm1ze8

System Info

System:    OS: Windows 10 10.0.18363
  Binaries:    Node: 14.16.0 - C:\Program Files\nodejs\node-v14.16.0\node.EXE
  vite: ^2.9.0

Used Package Manager

npm

Logs

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
    at sax.js:222:46
    at node_modules/sax/lib/sax.js (sax.js:1565:1)
    at __require (chunk-OL3AADLO.js?v=8029f249:9:50)
    at node_modules/xml-js/lib/xml2js.js (xml2js.js:1:11)
    at __require (chunk-OL3AADLO.js?v=8029f249:9:50)
    at node_modules/xml-js/lib/index.js (index.js:3:14)
    at __require (chunk-OL3AADLO.js?v=8029f249:9:50)
    at dep:xml-js:1:16
| (anonymous) | @ | sax.js:222
| node_modules/sax/lib/sax.js | @ | sax.js:1565
| __require | @ | chunk-OL3AADLO.js?v=8029f249:9
| node_modules/xml-js/lib/xml2js.js | @ | xml2js.js:1
| __require | @ | chunk-OL3AADLO.js?v=8029f249:9
| node_modules/xml-js/lib/index.js | @ | index.js:3
| __require | @ | chunk-OL3AADLO.js?v=8029f249:9
| (anonymous) | @ | dep:xml-js:1

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 https://github.com/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.

[mattias-nuanxed]

This solution worked for me.

[sapphi-red]

It works with build but it does not work during dev.

This part becomes like this after optimization.
https://github.com/isaacs/sax-js/blob/5da00d213a8cae94be72ce155e7cf8fda600b94c/lib/sax.js#L161-L166

      var Stream;
      try {
        Stream = (init_stream(), __toCommonJS(stream_exports)).Stream;
      } catch (ex) {
        Stream = function() {
        };
      }

// browser-external:stream
var stream_exports = {};
__export(stream_exports, {
  default: () => stream_default
});
var stream_default;
var init_stream = __esm({
  "browser-external:stream"() {
    stream_default = new Proxy({}, {
      get() {
        throw new Error('Module "stream" has been externalized for browser compatibility and cannot be accessed in client code.');
      }
    });
  }
});

If Stream = (init_stream(), __toCommonJS(stream_exports)).Stream; throws an error, maybe it works.
But currently it becomes undefined.

[sapphi-red]

I don't know why this only throws error with .default.

vite/packages/vite/src/node/optimizer/esbuildDepPlugin.ts

Lines 198 to 211 in adacaba

	build.onLoad(
	{ filter: /.*/, namespace: 'browser-external' },
	({ path: id }) => {
	return {
	contents:
	`export default new Proxy({}, {
	get() {
	throw new Error('Module "${id}" has been externalized for ` +
	`browser compatibility and cannot be accessed in client code.')
	}
	})`
	}
	}
	)

Maybe it is safe to change export default to module.exports =? (not sure if it works)
Since require('externalized').foo will throw error when externalized was not resolved.

[sapphi-red]

For a workaround, aliasing stream to a polyfill (for example stream-browserify) works.

// vite.config.js
export default defineConfig({
  resolve: {
    alias: {
      'stream': 'stream-browserify'
    }
  }
});

[bluwy]

Maybe it is safe to change export default to module.exports =? (not sure if it works)
Since require('externalized').foo will throw error when externalized was not resolved.

I think https://github.com/vitejs/vite/pull/6493/files#diff-7657c7c3217417a1747348410996718b471f6f0cb9552752b47a411f8f010830R207-R224 may address this, though I haven't took the time to look into it yet. The PR is mixed with a fix for yarn pnp.

[livthomas]

I have also run into this problem when I added @foxglove/xmlrpc dependency to my project. Here's how I solved it:

1. I added the following lines to main.ts file:

   import {Buffer} from 'buffer';
   import EventEmitter from 'events';
   import process from 'process';
   
   // sax.js needs these
   window.Buffer = Buffer;
   window.EventEmitter = EventEmitter;
   window.process = process;

2. And then I added the following lines to vite.config.ts file:

   {
     build: {
       commonjsOptions: {
         ignoreTryCatch: id => id !== 'stream',
       },
     },
     resolve: {
       alias: [
         {
           find: 'stream',
           replacement: `stream-browserify`,
         },
       ],
     },
   }

It works in both dev and prod mode.