-
-
Save FbN/0e651105937c8000f10fefdf9ec9af3d to your computer and use it in GitHub Desktop.
| // yarn add --dev @esbuild-plugins/node-globals-polyfill | |
| import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill' | |
| // yarn add --dev @esbuild-plugins/node-modules-polyfill | |
| import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill' | |
| // You don't need to add this to deps, it's included by @esbuild-plugins/node-modules-polyfill | |
| import rollupNodePolyFill from 'rollup-plugin-node-polyfills' | |
| export default { | |
| resolve: { | |
| alias: { | |
| // This Rollup aliases are extracted from @esbuild-plugins/node-modules-polyfill, | |
| // see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts | |
| // process and buffer are excluded because already managed | |
| // by node-globals-polyfill | |
| util: 'rollup-plugin-node-polyfills/polyfills/util', | |
| sys: 'util', | |
| events: 'rollup-plugin-node-polyfills/polyfills/events', | |
| stream: 'rollup-plugin-node-polyfills/polyfills/stream', | |
| path: 'rollup-plugin-node-polyfills/polyfills/path', | |
| querystring: 'rollup-plugin-node-polyfills/polyfills/qs', | |
| punycode: 'rollup-plugin-node-polyfills/polyfills/punycode', | |
| url: 'rollup-plugin-node-polyfills/polyfills/url', | |
| string_decoder: | |
| 'rollup-plugin-node-polyfills/polyfills/string-decoder', | |
| http: 'rollup-plugin-node-polyfills/polyfills/http', | |
| https: 'rollup-plugin-node-polyfills/polyfills/http', | |
| os: 'rollup-plugin-node-polyfills/polyfills/os', | |
| assert: 'rollup-plugin-node-polyfills/polyfills/assert', | |
| constants: 'rollup-plugin-node-polyfills/polyfills/constants', | |
| _stream_duplex: | |
| 'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex', | |
| _stream_passthrough: | |
| 'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough', | |
| _stream_readable: | |
| 'rollup-plugin-node-polyfills/polyfills/readable-stream/readable', | |
| _stream_writable: | |
| 'rollup-plugin-node-polyfills/polyfills/readable-stream/writable', | |
| _stream_transform: | |
| 'rollup-plugin-node-polyfills/polyfills/readable-stream/transform', | |
| timers: 'rollup-plugin-node-polyfills/polyfills/timers', | |
| console: 'rollup-plugin-node-polyfills/polyfills/console', | |
| vm: 'rollup-plugin-node-polyfills/polyfills/vm', | |
| zlib: 'rollup-plugin-node-polyfills/polyfills/zlib', | |
| tty: 'rollup-plugin-node-polyfills/polyfills/tty', | |
| domain: 'rollup-plugin-node-polyfills/polyfills/domain' | |
| } | |
| }, | |
| optimizeDeps: { | |
| esbuildOptions: { | |
| // Node.js global to browser globalThis | |
| define: { | |
| global: 'globalThis' | |
| }, | |
| // Enable esbuild polyfill plugins | |
| plugins: [ | |
| NodeGlobalsPolyfillPlugin({ | |
| process: true, | |
| buffer: true | |
| }), | |
| NodeModulesPolyfillPlugin() | |
| ] | |
| } | |
| }, | |
| build: { | |
| rollupOptions: { | |
| plugins: [ | |
| // Enable rollup polyfills plugin | |
| // used during production bundling | |
| rollupNodePolyFill() | |
| ] | |
| } | |
| } | |
| } |
https://github.com/sodatea/vite-plugin-node-stdlib-browser
This worked for the
Uncaught TypeError: util.inherits is not a function. error, thank you!
Does not work for me
// vite.config.js
import { defineConfig } from "vite";
import nodePolyfills from "vite-plugin-node-stdlib-browser";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
plugins: [nodePolyfills(), tsconfigPaths(), react()],
});
error
✘ [ERROR] The injected path "/Users/marian/code/OzoneV2/app-web/node_modules/node-stdlib-browser/helpers/esbuild/shim.js" cannot be marked as external
Build failed with 1 error:
error: The injected path "/Users/marian/code/OzoneV2/app-web/node_modules/node-stdlib-browser/helpers/esbuild/shim.js" cannot be marked as external
Failed to load url /node_modules/util/url (resolved id: /node_modules/util/url). Does the file exist?
Failed to load url /node_modules/util/searchAndFilters (resolved id: /node_modules/util/searchAndFilters). Does the file exist?
Failed to load url /node_modules/util/markerFiller (resolved id: /node_modules/util/markerFiller). Does the file exist?
Failed to load url /node_modules/util/markerFiller (resolved id: /node_modules/util/markerFiller). Does the file exist? (x2)
Failed to load url /node_modules/util/markerFiller (resolved id: /node_modules/util/markerFiller). Does the file exist? (x3)
found a solution that works for me
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
"@esbuild-plugins/node-modules-polyfill": "0.2.2",
"rollup-plugin-node-polyfills": "^0.2.1",
"util": "^0.12.5",
vite.config.ts
// yarn add --dev @esbuild-plugins/node-globals-polyfill
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
// yarn add --dev @esbuild-plugins/node-modules-polyfill
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
// You don't need to add this to deps, it's included by @esbuild-plugins/node-modules-polyfill
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
export default {
plugins: [
react(),
tsconfigPaths(),
{
name: "fix-node-globals-polyfill",
setup(build) {
build.onResolve({ filter: /util\.js/ }, ({ path }) => ({ path }));
},
},
],
resolve: {
alias: {
// This Rollup aliases are extracted from @esbuild-plugins/node-modules-polyfill,
// see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts
// process and buffer are excluded because already managed
// by node-globals-polyfill
util: "util",
sys: "util",
events: "rollup-plugin-node-polyfills/polyfills/events",
stream: "rollup-plugin-node-polyfills/polyfills/stream",
path: "rollup-plugin-node-polyfills/polyfills/path",
querystring: "rollup-plugin-node-polyfills/polyfills/qs",
punycode: "rollup-plugin-node-polyfills/polyfills/punycode",
url: "rollup-plugin-node-polyfills/polyfills/url",
string_decoder: "rollup-plugin-node-polyfills/polyfills/string-decoder",
http: "rollup-plugin-node-polyfills/polyfills/http",
https: "rollup-plugin-node-polyfills/polyfills/http",
os: "rollup-plugin-node-polyfills/polyfills/os",
assert: "rollup-plugin-node-polyfills/polyfills/assert",
constants: "rollup-plugin-node-polyfills/polyfills/constants",
_stream_duplex: "rollup-plugin-node-polyfills/polyfills/readable-stream/duplex",
_stream_passthrough: "rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough",
_stream_readable: "rollup-plugin-node-polyfills/polyfills/readable-stream/readable",
_stream_writable: "rollup-plugin-node-polyfills/polyfills/readable-stream/writable",
_stream_transform: "rollup-plugin-node-polyfills/polyfills/readable-stream/transform",
timers: "rollup-plugin-node-polyfills/polyfills/timers",
console: "rollup-plugin-node-polyfills/polyfills/console",
vm: "rollup-plugin-node-polyfills/polyfills/vm",
zlib: "rollup-plugin-node-polyfills/polyfills/zlib",
tty: "rollup-plugin-node-polyfills/polyfills/tty",
domain: "rollup-plugin-node-polyfills/polyfills/domain",
},
},
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: "globalThis",
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true,
}),
NodeModulesPolyfillPlugin(),
],
},
},
build: {
rollupOptions: {
plugins: [
// Enable rollup polyfills plugin
// used during production bundling
rollupNodePolyFill(),
],
},
},
};
found a solution that works for me
"@esbuild-plugins/node-globals-polyfill": "0.2.3", "@esbuild-plugins/node-modules-polyfill": "0.2.2", "rollup-plugin-node-polyfills": "^0.2.1", "util": "^0.12.5",
vite.config.ts// yarn add --dev @esbuild-plugins/node-globals-polyfill import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill"; // yarn add --dev @esbuild-plugins/node-modules-polyfill import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill"; // You don't need to add this to deps, it's included by @esbuild-plugins/node-modules-polyfill import rollupNodePolyFill from "rollup-plugin-node-polyfills"; import react from "@vitejs/plugin-react"; import tsconfigPaths from "vite-tsconfig-paths"; export default { plugins: [ react(), tsconfigPaths(), { name: "fix-node-globals-polyfill", setup(build) { build.onResolve({ filter: /util\.js/ }, ({ path }) => ({ path })); }, }, ], resolve: { alias: { // This Rollup aliases are extracted from @esbuild-plugins/node-modules-polyfill, // see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts // process and buffer are excluded because already managed // by node-globals-polyfill util: "util", sys: "util", events: "rollup-plugin-node-polyfills/polyfills/events", stream: "rollup-plugin-node-polyfills/polyfills/stream", path: "rollup-plugin-node-polyfills/polyfills/path", querystring: "rollup-plugin-node-polyfills/polyfills/qs", punycode: "rollup-plugin-node-polyfills/polyfills/punycode", url: "rollup-plugin-node-polyfills/polyfills/url", string_decoder: "rollup-plugin-node-polyfills/polyfills/string-decoder", http: "rollup-plugin-node-polyfills/polyfills/http", https: "rollup-plugin-node-polyfills/polyfills/http", os: "rollup-plugin-node-polyfills/polyfills/os", assert: "rollup-plugin-node-polyfills/polyfills/assert", constants: "rollup-plugin-node-polyfills/polyfills/constants", _stream_duplex: "rollup-plugin-node-polyfills/polyfills/readable-stream/duplex", _stream_passthrough: "rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough", _stream_readable: "rollup-plugin-node-polyfills/polyfills/readable-stream/readable", _stream_writable: "rollup-plugin-node-polyfills/polyfills/readable-stream/writable", _stream_transform: "rollup-plugin-node-polyfills/polyfills/readable-stream/transform", timers: "rollup-plugin-node-polyfills/polyfills/timers", console: "rollup-plugin-node-polyfills/polyfills/console", vm: "rollup-plugin-node-polyfills/polyfills/vm", zlib: "rollup-plugin-node-polyfills/polyfills/zlib", tty: "rollup-plugin-node-polyfills/polyfills/tty", domain: "rollup-plugin-node-polyfills/polyfills/domain", }, }, optimizeDeps: { esbuildOptions: { // Node.js global to browser globalThis define: { global: "globalThis", }, // Enable esbuild polyfill plugins plugins: [ NodeGlobalsPolyfillPlugin({ process: true, buffer: true, }), NodeModulesPolyfillPlugin(), ], }, }, build: { rollupOptions: { plugins: [ // Enable rollup polyfills plugin // used during production bundling rollupNodePolyFill(), ], }, }, };
This configuration has gotten me very close. However, I have odic-client-ts as a dep and I'm getting the following error. Any idea on how to fix this?
Failed to load url rollup-plugin-node-polyfills/polyfills/constants/odic-config (resolved id: rollup-plugin-node-polyfills/polyfills/constants/odic-config). Does the file exist?
Had the same problem in Nuxt3 after upgrading to 3.1.1
I was already using polyfills:
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
but after upgrading Nuxt (which comes with Vite update) I got error:
✘ [ERROR] The injected path "/Users/../node_modules/@esbuild-plugins/node-globals-polyfill/_virtual-process-polyfill_.js" cannot be resolved
Everything is back in the right order after upgrading dev dependencies to:
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
Thanks @Terkea 👍
try installing the standalone module and replacing it in the vite.config.js
that's how I got around the util issue which is the same
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
`build: {
outDir: resolve(devPath, 'renderer'),
rollupOptions: {
plugins: [
injectProcessEnvPlugin({
NODE_ENV: 'production',
platform: process.platform,
}),
rollupNodePolyFill(),
],
...
},
},`
rollupNodePolyFill doesn't work here, I'm using electron-vite^1.0.12
I got an error by ts:
Type '{ name: string; resolveId(importee: string, importer: string): { id: any; moduleSideEffects: boolean; } | null; load(id: string): string | undefined; transform(code: string, id: string): any; }' is not assignable to type 'false | Plugin | null | undefined'. Type '{ name: string; resolveId(importee: string, importer: string): { id: any; moduleSideEffects: boolean; } | null; load(id: string): string | undefined; transform(code: string, id: string): any; }' is not assignable to type 'Plugin'. Types of property 'resolveId' are incompatible. Type '(importee: string, importer: string) => { id: any; moduleSideEffects: boolean; } | null' is not assignable to type 'ObjectHook<(this: PluginContext, source: string, importer: string | undefined, options: { custom?: CustomPluginOptions | undefined; isEntry: boolean; }) => ResolveIdResult | Promise<...>, {}> | undefined'. Type '(importee: string, importer: string) => { id: any; moduleSideEffects: boolean; } | null' is not assignable to type '(this: PluginContext, source: string, importer: string | undefined, options: { custom?: CustomPluginOptions | undefined; isEntry: boolean; }) => ResolveIdResult | Promise<...>'. Types of parameters 'importer' and 'importer' are incompatible. Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2322)
Can someone help me?
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
`build: { outDir: resolve(devPath, 'renderer'),
rollupOptions: { plugins: [ injectProcessEnvPlugin({ NODE_ENV: 'production', platform: process.platform, }), rollupNodePolyFill(), ], ...}, },`
rollupNodePolyFill doesn't work here, I'm using electron-vite^1.0.12
I got an error by ts:
Type '{ name: string; resolveId(importee: string, importer: string): { id: any; moduleSideEffects: boolean; } | null; load(id: string): string | undefined; transform(code: string, id: string): any; }' is not assignable to type 'false | Plugin | null | undefined'. Type '{ name: string; resolveId(importee: string, importer: string): { id: any; moduleSideEffects: boolean; } | null; load(id: string): string | undefined; transform(code: string, id: string): any; }' is not assignable to type 'Plugin'. Types of property 'resolveId' are incompatible. Type '(importee: string, importer: string) => { id: any; moduleSideEffects: boolean; } | null' is not assignable to type 'ObjectHook<(this: PluginContext, source: string, importer: string | undefined, options: { custom?: CustomPluginOptions | undefined; isEntry: boolean; }) => ResolveIdResult | Promise<...>, {}> | undefined'. Type '(importee: string, importer: string) => { id: any; moduleSideEffects: boolean; } | null' is not assignable to type '(this: PluginContext, source: string, importer: string | undefined, options: { custom?: CustomPluginOptions | undefined; isEntry: boolean; }) => ResolveIdResult | Promise<...>'. Types of parameters 'importer' and 'importer' are incompatible. Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2322)Can someone help me?
CodeSandbox?
I solve it with:
electron.vite.config.ts
`
build: {
outDir: resolve(devPath, 'renderer'),
rollupOptions: {
plugins: [
injectProcessEnvPlugin({
NODE_ENV: 'production',
platform: process.platform,
}),
rollupNodePolyFill,
],
},
},
`
and this:
index.html
<script> global = globalThis; </script>
rollup-plugin-node-polyfills
@Terkea Hello, I use yours and get this error:
Error: Build failed with 2 errors:
error: Could not read from file: /root/zzb/node_modules/@esbuild-plugins/node-globals-polyfill/_virtual-process-polyfill_.js
error: Could not read from file: /root/zzb/node_modules/@esbuild-plugins/node-globals-polyfill/_virtual-buffer-polyfill_.js
at failureErrorWithLog (/root/zzb/node_modules/esbuild/lib/main.js:1566:15)
at /root/zzb/node_modules/esbuild/lib/main.js:1024:28
at runOnEndCallbacks (/root/zzb/node_modules/esbuild/lib/main.js:1438:61)
at buildResponseToResult (/root/zzb/node_modules/esbuild/lib/main.js:1022:7)
at /root/zzb/node_modules/esbuild/lib/main.js:1134:14
at responseCallbacks.<computed> (/root/zzb/node_modules/esbuild/lib/main.js:671:9)
at handleIncomingPacket (/root/zzb/node_modules/esbuild/lib/main.js:726:9)
at Socket.readFromStdout (/root/zzb/node_modules/esbuild/lib/main.js:647:7)
at Socket.emit (node:events:513:28)
at addChunk (node:internal/streams/readable:324:12)
at readableAddChunk (node:internal/streams/readable:297:9)
at Readable.push (node:internal/streams/readable:234:10)
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
rollup-plugin-node-polyfills
@Terkea Hello, I use yours and get this error:
Error: Build failed with 2 errors: error: Could not read from file: /root/zzb/node_modules/@esbuild-plugins/node-globals-polyfill/_virtual-process-polyfill_.js error: Could not read from file: /root/zzb/node_modules/@esbuild-plugins/node-globals-polyfill/_virtual-buffer-polyfill_.js at failureErrorWithLog (/root/zzb/node_modules/esbuild/lib/main.js:1566:15) at /root/zzb/node_modules/esbuild/lib/main.js:1024:28 at runOnEndCallbacks (/root/zzb/node_modules/esbuild/lib/main.js:1438:61) at buildResponseToResult (/root/zzb/node_modules/esbuild/lib/main.js:1022:7) at /root/zzb/node_modules/esbuild/lib/main.js:1134:14 at responseCallbacks.<computed> (/root/zzb/node_modules/esbuild/lib/main.js:671:9) at handleIncomingPacket (/root/zzb/node_modules/esbuild/lib/main.js:726:9) at Socket.readFromStdout (/root/zzb/node_modules/esbuild/lib/main.js:647:7) at Socket.emit (node:events:513:28) at addChunk (node:internal/streams/readable:324:12) at readableAddChunk (node:internal/streams/readable:297:9) at Readable.push (node:internal/streams/readable:234:10) at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
Update to Vite 4.2 solved the issue for me.
Have a project with a WebRTC video player component and we are receiving the following error:
this.once is not a function
Seems to be an issue with how Vite handles transforms around Duplex.once and _readable_stream.
Here is a GitHub thread where someone was discussing a similar issue:
nodejs/readable-stream#315 (comment)
Has anyone ran into this or have a solution for it?
I've tried a variety of solutions in this thread and other GitHub threads... none have worked so far. I am on the latest version of Vite ("vite": "^4.3.4",).
Anyone know how to handle cytpo ? It seems to work in build mode but can't get it to work in dev with crypto-browserify
this worked. thanks!
This worked for the
Uncaught TypeError: util.inherits is not a function. error, thank you!