No matching export in "browser-external:stream"

[kirianguiller]

Describe the bug

Explanation of the error

When using vite with a react project including the library subtitle, we have the two following errors :

No matching export in "browser-external:stream" for import "Duplex"

and

No matching export in "browser-external:stream" for import "Transform"

(Full error below)
The error is from the builtin module stream that , for a reason I ignore, is replaced by browser-external:stream.

The problem is similar to this one : aws-amplify/amplify-js#9639
As well as maybe this one : #1979

Error Message

error when starting dev server:
Error: Build failed with 2 errors:
node_modules/subtitle/dist/subtitle.esm.js:1:9: error: No matching export in "browser-external:stream" for import "Duplex"
node_modules/subtitle/dist/subtitle.esm.js:1:17: error: No matching export in "browser-external:stream" for import "Transform"
    at failureErrorWithLog (/home/wenjia/Projects/to_delete/my-vue-app/node_modules/esbuild/lib/main.js:1493:15)
    at /home/wenjia/Projects/to_delete/my-vue-app/node_modules/esbuild/lib/main.js:1151:28
    at runOnEndCallbacks (/home/wenjia/Projects/to_delete/my-vue-app/node_modules/esbuild/lib/main.js:941:63)
    at buildResponseToResult (/home/wenjia/Projects/to_delete/my-vue-app/node_modules/esbuild/lib/main.js:1149:7)
    at /home/wenjia/Projects/to_delete/my-vue-app/node_modules/esbuild/lib/main.js:1258:14
    at /home/wenjia/Projects/to_delete/my-vue-app/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/home/wenjia/Projects/to_delete/my-vue-app/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/home/wenjia/Projects/to_delete/my-vue-app/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (events.js:400:28)
    at addChunk (internal/streams/readable.js:293:12)

Reproduction

Method 1 : Cloning from my example repo

git clone https://github.com/kirianguiller/vite-subtitle-bug
cd vite-subtitle-bug
npx vite

Method 2 : Install from scratch

npm init vite@latest my-react-app --template react-ts
cd my-react-app
npm install
npm install subtitle

Add the following line after the imports in App.tsx :

import { parseSync } from 'subtitle'
parseSync("a dummy string")

and then, run vite :

npx vite

System Info

System:
    OS: Linux 5.8 Ubuntu 20.10 (Groovy Gorilla)
    CPU: (12) x64 AMD Ryzen 5 PRO 4650U with Radeon Graphics
    Memory: 4.28 GB / 14.93 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
Binaries:
    Node: 14.18.0 - ~/.nvm/versions/node/v14.18.0/bin/node
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.0/bin/npm
Browsers:
    Chrome: 87.0.4280.141
    Firefox: 90.0
npmPackages:
    @vitejs/plugin-react: ^1.0.0 => 1.0.5 
    vite: ^2.6.4 => 2.6.10 

### Used Package Manager

npm

### Logs

```shell
vite:config bundled config file loaded in 169.28ms +0ms
  vite:config using resolved config: {
  vite:config   resolve: {
  vite:config     dedupe: [ 'react', 'react-dom' ],
  vite:config     alias: [ [Object], [Object], [Object], [Object] ]
  vite:config   },
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite:react-jsx',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-script-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'node-resolve',
  vite:config     'node-resolve',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   server: { fs: { strict: undefined, allow: [Array] } },
  vite:config   optimizeDeps: {
  vite:config     include: [ 'react/jsx-dev-runtime' ],
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   },
  vite:config   configFile: '/home/wenjia/Projects/to_delete/my-vue-app/vite.config.ts',
  vite:config   configFileDependencies: [ 'vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     server: { fs: [Object] }
  vite:config   },
  vite:config   root: '/home/wenjia/Projects/to_delete/my-vue-app',
  vite:config   base: '/',
  vite:config   publicDir: '/home/wenjia/Projects/to_delete/my-vue-app/public',
  vite:config   cacheDir: '/home/wenjia/Projects/to_delete/my-vue-app/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +8ms
  vite:deps Crawling dependencies using entries:
  vite:deps   /home/wenjia/Projects/to_delete/my-vue-app/index.html +0ms
  vite:resolve 1.18ms /src/main.tsx -> /home/wenjia/Projects/to_delete/my-vue-app/src/main.tsx +0ms
  vite:resolve 3.98ms react -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/react/index.js +8ms
  vite:resolve 1.44ms react-dom -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/react-dom/index.js +4ms
  vite:resolve 0.60ms ./App -> /home/wenjia/Projects/to_delete/my-vue-app/src/App.tsx +4ms
  vite:resolve 1.51ms subtitle -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/subtitle/dist/subtitle.esm.js +6ms
  vite:deps Scan completed in 77.05ms: {
  react: '/home/wenjia/Projects/to_delete/my-vue-app/node_modules/react/index.js',
  'react-dom': '/home/wenjia/Projects/to_delete/my-vue-app/node_modules/react-dom/index.js',
  subtitle: '/home/wenjia/Projects/to_delete/my-vue-app/node_modules/subtitle/dist/subtitle.esm.js'
} +60ms
  vite:resolve 0.92ms react/jsx-dev-runtime -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/react/jsx-dev-runtime.js +0ms
Pre-bundling dependencies:
  react
  react-dom
  subtitle
  react/jsx-dev-runtime
(this will be run only when your dependencies or config have changed)
  vite:resolve 1.01ms stream -> __vite-browser-external:stream +0ms
  vite:resolve 1.52ms multipipe -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/multipipe/index.js +2ms
  vite:resolve 0.20ms react -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/react/index.js +0ms
  vite:resolve 1.70ms split2 -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/split2/index.js +6ms
  vite:resolve 1.61ms object-assign -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/object-assign/index.js +5ms
  vite:resolve 2.13ms strip-bom -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/strip-bom/index.js +5ms
  vite:resolve 1.23ms duplexer2 -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/duplexer2/index.js +7ms
  vite:resolve 1.85ms readable-stream -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/split2/node_modules/readable-stream/readable-browser.js +3ms
  vite:resolve 1.15ms stream -> __vite-browser-external:stream +2ms
  vite:resolve 1.75ms string_decoder -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/string_decoder/lib/string_decoder.js +3ms
  vite:resolve 1.79ms readable-stream -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/readable-stream/readable-browser.js +2ms
  vite:resolve 2.36ms safe-buffer -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/safe-buffer/index.js +3ms
  vite:resolve 2.37ms inherits -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/inherits/inherits_browser.js +1ms
  vite:resolve 1.50ms util-deprecate -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/util-deprecate/browser.js +2ms
  vite:resolve 2.82ms process-nextick-args -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/process-nextick-args/index.js +4ms
  vite:resolve 2.86ms core-util-is -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/core-util-is/lib/util.js +0ms
  vite:resolve 1.78ms buffer -> __vite-browser-external:buffer +3ms
  vite:resolve 1.86ms events -> __vite-browser-external:events +0ms
  vite:resolve 1.82ms isarray -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/isarray/index.js +6ms
  vite:resolve 1.11ms util -> __vite-browser-external:util +4ms
  vite:resolve 1.34ms string_decoder/ -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/string_decoder/lib/string_decoder.js +7ms
  vite:resolve 1.16ms scheduler -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/scheduler/index.js +33ms
  vite:resolve 0.50ms scheduler/tracing -> /home/wenjia/Projects/to_delete/my-vue-app/node_modules/scheduler/tracing.js +2ms
 > node_modules/subtitle/dist/subtitle.esm.js:1:9: error: No matching export in "browser-external:stream" for import "Duplex"
    1 │ import { Duplex, Transform } from 's...
      ╵          ~~~~~~

 > node_modules/subtitle/dist/subtitle.esm.js:1:17: error: No matching export in "browser-external:stream" for import "Transform"
    1 │ ...t { Duplex, Transform } from 'str...
      ╵                ~~~~~~~~~

error when starting dev server:
Error: Build failed with 2 errors:
node_modules/subtitle/dist/subtitle.esm.js:1:9: error: No matching export in "browser-external:stream" for import "Duplex"
node_modules/subtitle/dist/subtitle.esm.js:1:17: error: No matching export in "browser-external:stream" for import "Transform"
    at failureErrorWithLog (/home/wenjia/Projects/to_delete/my-vue-app/node_modules/esbuild/lib/main.js:1493:15)
    at /home/wenjia/Projects/to_delete/my-vue-app/node_modules/esbuild/lib/main.js:1151:28
    at runOnEndCallbacks (/home/wenjia/Projects/to_delete/my-vue-app/node_modules/esbuild/lib/main.js:941:63)
    at buildResponseToResult (/home/wenjia/Projects/to_delete/my-vue-app/node_modules/esbuild/lib/main.js:1149:7)
    at /home/wenjia/Projects/to_delete/my-vue-app/node_modules/esbuild/lib/main.js:1258:14
    at /home/wenjia/Projects/to_delete/my-vue-app/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/home/wenjia/Projects/to_delete/my-vue-app/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/home/wenjia/Projects/to_delete/my-vue-app/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (events.js:400:28)
    at addChunk (internal/streams/readable.js:293:12)

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/vue-next 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.

[bluwy]

The subtitle library can only be used in nodejs since it uses node's builtin modules. It looks like you're using it in a browser environment. There are ways to polyfill these but it's not encouraged to do so.

[kirianguiller]

Thanks. So far we were using the subtitle library fine in react thanks to webpack bundling. So I thought vite could also manage to compile it.
I will try the polyfill solution you gave.
I will let the issue open to see if some people have other recommandations ! :) Thanks 🙏

[kirianguiller]

I made some more research, I found that node builtins module are usually browserified in usual bundlers (they use the browserify version of the module if existing).
In the case of the stream library, it exist a stream-browserify version.
. So I first thought about making the subtitle-browserify package by just referencing to stream-browserify instead. But then I saw this stackoverflow answers that suggest to use resolve.alias to change the path of a library.

So I npm i stream-browserify and then added the following config to vite.config.ts :

export default defineConfig({
  resolve: {
    alias: {
      stream: 'stream-browserify',
    },
  },
  plugins: [
    react()   
  ]
})

Now, the bundling is working ! Howerver, when running the webapp, the console return this error :

Uncaught ReferenceError: global is not defined
    at node_modules/stream-browserify/node_modules/readable-stream/lib/_stream_readable.js (_stream_readable.js:48)
    at __require (chunk-LJBNGPO3.js?v=2b10ddd6:29)
    at node_modules/stream-browserify/index.js (index.js:28)
    at __require (chunk-LJBNGPO3.js?v=2b10ddd6:29)
    at index.js:14

Here is the line in readable-strean that is responsible for the error :

var OurUint8Array = global.Uint8Array || function () {};

Any ideas on the reason why global is not defined ? Shouldn't it be defined by default normally ?

Thanks !

[bluwy]

Any ideas on the reason why global is not defined ? Shouldn't it be defined by default normally ?

global doesn't exist in the browser, it's for node only. You can however make a quick polyfill by injecting globalThis.global = globalThis somewhere in your code. (Ideally on app startup)

[milahu]

similar problem with ipfs, electron-fetch, ... project is IPFS-CRDT-shared-editing

node_modules/electron-fetch/lib/index.es.js:1:9: error: No matching export in "browser-external:url" for import "parse"
node_modules/fetch-blob/from.js:1:9: error: No matching export in "browser-external:node:fs" for import "statSync"
node_modules/node-fetch/src/body.js:8:16: error: No matching export in "browser-external:node:stream" for import "PassThrough"

pnpm why electron-fetch
ipfs 0.61.0

pnpm why fetch-blob
ipfs 0.61.0
node-fetch 3.1.0

pnpm why node-fetch
ipfs 0.61.0
node-fetch 3.1.0

ipfs examples for webpack

ipfs example for vite (via)

probably relevant build script in package.json with node-globals.js

"build:ipfs": "esbuild ./node_modules/ipfs-core --bundle --format=esm --sourcemap --main-fields=browser,module,main --inject:./src/node-globals.js --define:process.env.NODE_ENV='\"production\"' --splitting --outdir=./src/modules/ipfs-core"

Could not resolve "node:http" -> use esbuild --external:node:* --external:net --external:util

[milahu]

      stream: 'stream-browserify',

still getting
Uncaught SyntaxError: The requested module '/@id/__vite-browser-external:node:stream' does not provide an export named 'PassThrough'

fixed with

// vite.config.js
export default {
  resolve: {
    alias: {
      'node:stream': 'stream-browserify',
    },
  },
}

but now im getting
GET http://localhost:3000/node_modules/.vite/node:stream.js?v=2ef3e273 net::ERR_ABORTED 404 (Not Found)
since vite provides the file as node_modules/.vite/node_stream.js
with the colon escaped as underline

workaround

ln -s node_stream.js node_modules/.vite/node:stream.js

fails with
[vite] Internal server error: Cannot set properties of undefined (setting 'isSelfAccepting')

[xpluscal]

Any updates on this?

[Niputi]

closing as #5398 (comment) is solved by #7006
and lack of response from issue author