parseSync doesn't load in browser when built with vite and ESM

[benbucksch]

Environment:

• vite 4.3.9
• Svelte (without SvelteKit) 3.58.0
• @sveltejs/vite-plugin-svelte 2.4.1

Reproduction:
1.

import { parseSync } from 'subtitle';
const nodes = parseSync(fileContents);

2. Run app in browser

Actual result:

• App doesn't load at all
• Errors on browser error console (see below)

Error logs and stacks:

Uncaught (in promise) ReferenceError: process is not defined
    js _stream_writable.js:57
    __require2 chunk-TFWDKVI3.js:18
    js readable-browser.js:4
    __require2 chunk-TFWDKVI3.js:18
    js index.js:3
    __require2 chunk-TFWDKVI3.js:18
    js index.js:5
    __require2 chunk-TFWDKVI3.js:18
    <anonymous> subtitle.js:15

Uncaught (in promise) ReferenceError: global is not defined
    at node_modules/readable-stream/lib/_stream_readable.js (_stream_readable.js:56:21)
    at __require2 (chunk-TFWDKVI3.js?v=950aa587:18:50)
    at node_modules/readable-stream/readable-browser.js (readable-browser.js:1:28)
    at __require2 (chunk-TFWDKVI3.js?v=950aa587:18:50)
    at node_modules/duplexer2/index.js (index.js:3:14)
    at __require2 (chunk-TFWDKVI3.js?v=950aa587:18:50)
    at node_modules/multipipe/index.js (index.js:5:18)
    at __require2 (chunk-TFWDKVI3.js?v=950aa587:18:50)
    at index.js:15:1

Offending lines:

var asyncWrite = !process.browser && ["v0.10", "v0.9."].indexOf(process.version.slice(0, 5)) > -1 ? setImmediate : pna.nextTick;

var import_multipipe = __toESM(require_multipipe());

[rowanfuchs]

this is because the package makes use of Node dependencies that aren't available within Vite or the browser. What you can do is pull the package locally and replace them with compatible web api's.

[benbucksch]

@rowanfuchs There's no inherent reason why VTT/SRT files cannot be parsed in the browser. Could we therefore leave this bug open, until someone volunteers to do the necessary changes to make it work, please?

[jmadelaine]

Solution with Vite.

• Add @esbuild-plugins/node-globals-polyfill, buffer and stream-browserify deps in package.json.

// package.json

{
  "dependencies": {
    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
    "buffer": "^6.0.3",
    "stream-browserify": "^3.0.0",
    "subtitle": "^4.2.1"
  }
}

• Add NodeGlobalsPolyfillPlugin in the optimizeDeps.esbuildOptions.plugins list in vite config:

// vite.config.js

import { defineConfig } from 'vite'
import NodeGlobalsPolyfillPlugin from '@esbuild-plugins/node-globals-polyfill'

defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      define: { global: 'globalThis' },
      plugins: [NodeGlobalsPolyfillPlugin({ buffer: true, process: true })]
    }
  }
}

• Polyfill window.Buffer in index file (or wherever):

// index.js

import { Buffer } from 'buffer'

window.Buffer = Buffer

[automan-bot]

Solution with Vite.

• Add @esbuild-plugins/node-globals-polyfill, buffer and stream-browserify deps in package.json.

// package.json

{
  "dependencies": {
    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
    "buffer": "^6.0.3",
    "stream-browserify": "^3.0.0",
    "subtitle": "^4.2.1"
  }
}

• Add NodeGlobalsPolyfillPlugin in the optimizeDeps.esbuildOptions.plugins list in vite config:

// vite.config.js

import { defineConfig } from 'vite'
import NodeGlobalsPolyfillPlugin from '@esbuild-plugins/node-globals-polyfill'

defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      define: { global: 'globalThis' },
      plugins: [NodeGlobalsPolyfillPlugin({ buffer: true, process: true })]
    }
  }
}

• Polyfill window.Buffer in index file (or wherever):

// index.js

import { Buffer } from 'buffer'

window.Buffer = Buffer

prod error:

process is not defined

[Antonytm]

I have a similar issue but for Webpack. Is there any working solution for Webpack?