remorses / esbuild-plugins Goto Github PK

I am trying to polyfill Node.js built-in modules, reference: https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2

I am running into this problem: https://pastebin.com/GWRFqWVr

My Vite config file: https://gist.github.com/plusminushalf/33d3d8a45b2924c846348f3f0ace17d5

Hi there,

I noticed in latest master of node-globals-polyfill, you changed Buffer.js with this commit: dcc1b37

But there is not a new release making use of it

Could you please create a new release? thank you

Hello!

I'm not sure if this is an issue with node-modules-polyfills or with the way that the library that I'm trying to use is built, but when I try to use https://github.com/wanseob/soltypes, and build my app, I get the following error:

✘ [ERROR] No matching export in "node-modules-polyfills:buffer" for import "default"

    node_modules/soltypes/build/index.es.js:1:7:
      1 │ import buffer from 'buffer';
        ╵        ~~~~~~

I've created a minimal repro here: https://github.com/keithbro-imx/buffer-polyfills-repro

For context, I ran in to this issue when using this library in a Remix app.

Would be great to get your thoughts on where the problem might be and how we might fix it.

Thanks in advance for your help!

My code:

NodeResolvePlugin({
					extensions: ['.ts', '.js'],
					onResolved: (resolved) => {
						if (resolved.includes('node_modules')) {
							return {
								external: true,
							};
						}
						return resolved;
					},
				}),

It works well, when a bundle is made it won't include the node_modules libs in the bundle.

But what if I'm building without any node_modules libs present (like it's a CI runner that just wants to prepare the app bundle itself)? Can your plugin let me also ignore the resolution check completely so I don't get ERROR: Could not resolve errors in esbuild?

NodeModulesPolyfills should be NodeModulesPolyfillPlugin in the README. Additionally, the EsmExternals import in the node-globals-polyfill plugin is a copy/paste error from the esm-externals plugin.

when adding the plugin @esbuild-plugins/tsconfig-paths it causes issues when adding a TS alias to externals
for more details please see this issue

it can be solved by applying the built-in esbuild's resolve function.
esbuild doesn't resolve the paths that handled by plugins.

I have a simple app which builds and works fine in dev environment. For some dependencies I had to add NodeGlobalsPolyfillPlugin({ process: true })

I found that when I build and deploy the app, I'm getting process is not defined from the bundle...

Trying to build webtorrent using esbuild with Globals and Modules polyfills, I get the following error:

    at node-modules-polyfills-commonjs:buffer (node-modules-polyfills-commonjs:buffer:12)
    at __require (out.js:12)
    at node_modules/safe-buffer/index.js (index.js:3)
    at __require (out.js:12)
    at node_modules/bencode/lib/encode.js (encode.js:1)
    at __require (out.js:12)
    at node_modules/bencode/lib/index.js (index.js:3)
    at __require (out.js:12)
    at node_modules/create-torrent/index.js (index.js:2)
    at __require (out.js:12)

my build code:

import NodeModulesPolyfillPlugin from '@esbuild-plugins/node-modules-polyfill'
import NodeGlobalsPolyfillPlugin from '@esbuild-plugins/node-globals-polyfill'
import ESBuild from 'esbuild'

ESBuild.build({
  plugins: [NodeModulesPolyfillPlugin.default(),
    NodeGlobalsPolyfillPlugin.default({
      process: true,
      buffer: true
    })],
  entryPoints: ['index.js'],
  bundle: true,
  sourcemap: true,
  format: 'esm',
  target: ['esnext'],
  platform: 'browser',
  outfile: 'out.js',
  define: {
    global: 'globalThis'
  }
}).catch(() => process.exit(1))

additionally in package.json I specified "type": "module",
I run the script via node build.js

Error occured when build using node-resolve and the source code have any node:* imported.
i.e. node:fs

Error: Build failed with 3 errors:
../../../../node_modules/.pnpm/@[email protected]/node_modules/@helia/unixfs/dist/src/utils/glob-source.js:1:15: ERROR: Plugin "node-resolve" returned a non-absolute path: node:fs (set a namespace if this is not a file path)
../../../../node_modules/.pnpm/@[email protected]/node_modules/@helia/unixfs/dist/src/utils/glob-source.js:2:16: ERROR: Plugin "node-resolve" returned a non-absolute path: node:fs/promises (set a namespace if this is not a file path)
../../../../node_modules/.pnpm/@[email protected]/node_modules/@helia/unixfs/dist/src/utils/glob-source.js:3:17: ERROR: Plugin "node-resolve" returned a non-absolute path: node:path (set a namespace if this is not a file path)

I'm using the simplest vite example project (vanilla-js) and when I run npm run dev the polyfill works, but when I build and test it using npm run preview I get Buffer is not defined error on the console.

Here's the example code

my vite.config.js:

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

export default () => {
  return defineConfig({
    optimizeDeps: {
      esbuildOptions: {
        // Node.js global to browser globalThis
        define: {
          global: "globalThis",
        },
        // Enable esbuild polyfill plugins
        plugins: [
          NodeGlobalsPolyfillPlugin({
            buffer: true,
          }),
        ],
      },
    },
  });
};

Really trying to solve an issue with resolving paths when building with esbuild and it seems this project will do that? At some point, not sure how to use it in its current form?

This might well not be the right place to submit a bug report, though could be useful as a record of workarounds.

It appears that these are no longer compatible with vite 4.

https://stackblitz.com/edit/vitejs-vite-va6gek?file=vite.config.js&terminal=dev

I'm seeing this issue on 2 separate projects that I'm converting to esbuild.

const EventEmitter = require('events');

class Test extends EventEmitter {
  constructor() { };
  }
}

This will throw the runtime error: Uncaught TypeError: Class extends value #<Object> is not a constructor or null - it seems like the events module is not properly resolved to the polyfills/events module.

Same reasoning as in ionic-team/rollup-plugin-node-polyfills#32.

Since that repo is never touched in the last 3 years, it's probably a good idea to either look at the community forks (see ionic-team/rollup-plugin-node-polyfills#28) or create our own fork.
I would prefer to use @FredKSchott fork as he's the creator of snowpack & that's the one used by the snowpack library too, so it probably has the most up to date version of the rollup-plugin-node-polyfills lib.

Edit: @FredKSchott's fork is also recommended by the @rollup team: https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency

Please consider switching the polyfill lib to: https://github.com/snowpackjs/rollup-plugin-polyfill-node

It's the forked & maintained/updated version of the lib you are currently using.

Proposal: mark @esbuild-plugins/node-modules-polyfill & @esbuild-plugins/node-globals-polyfill as deprecated both in the README and in the npm registry (docs).

Rational:

1. They are already listed as "out of date" in the README (as of 8fef802), and a potential replacement (esbuild-plugin-polyfill-node) is given.
2. @esbuild-plugins/node-modules-polyfill depends on the unmaintained rollup-plugin-node-polyfills which depends on the deprecated rollup-plugin-inject.
3. A deprecation notice might be a good way to deter the impressive cavalcade of PRs attempting to resolve the reliance on rollup-plugin-node-polyfills! (I'm being a bit silly, but in all seriousness, it might save people the trouble of working on a PR which will very likely not be merged)

Speaking of potential replacements: would it make sense to additionally mention esbuild-plugins-node-modules-polyfill?

Shouldn't this also shim in the keyword global with globalThis or window?

I have problem in my project although I already use NodeModulesPolyfillPlugin().
I always get Buffer is not defined error. and process is no defined error.
When I always get Buffer is not defined error when I user Buffer modules, I find that the code uses Buffer from node library (node_modules/@types/node)
I made repo for the example.
https://github.com/rudyaditya/cypress_cucumber_example

    ReferenceError: Buffer is not defined
      at encryptBasicToken (http://localhost:53189/__cypress/tests?p=cypress/e2e/1-getting-started/todo.cy.js:4:21)
      at Context.eval (http://localhost:53189/__cypress/tests?p=cypress/e2e/1-getting-started/todo.cy.js:11:12)

I also get process is not defined, when I import package from 'fs-extra'
https://github.com/jprichardson/node-fs-extra

 ReferenceError: process is not defined
      at node_modules/graceful-fs/polyfills.js (http://localhost:53189/__cypress/tests?p=cypress/e2e/1-getting-started/todo2.cy.js:845:21)
      at __require (http://localhost:53189/__cypress/tests?p=cypress/e2e/1-getting-started/todo2.cy.js:10:52)
      at node_modules/graceful-fs/graceful-fs.js (http://localhost:53189/__cypress/tests?p=cypress/e2e/1-getting-started/todo2.cy.js:5877:23)
      at __require (http://localhost:53189/__cypress/tests?p=cypress/e2e/1-getting-started/todo2.cy.js:10:52)
      at node_modules/fs-extra/lib/fs/index.js (http://localhost:53189/__cypress/tests?p=cypress/e2e/1-getting-started/todo2.cy.js:6248:16)
      at __require (http://localhost:53189/__cypress/tests?p=cypress/e2e/1-getting-started/todo2.cy.js:10:52)
      at node_modules/fs-extra/lib/index.js (http://localhost:53189/__cypress/tests?p=cypress/e2e/1-getting-started/todo2.cy.js:8223:12)
      at __require (http://localhost:53189/__cypress/tests?p=cypress/e2e/1-getting-started/todo2.cy.js:10:52)
      at Context.eval (http://localhost:53189/__cypress/tests?p=cypress/e2e/1-getting-started/todo2.cy.js:8249:15)

It's weird because I see those package already provided by polyfill.
This is how I use NodeModulesPolyfillPlugin

const { defineConfig } = require("cypress");
const nodePolyfills =
require("@esbuild-plugins/node-modules-polyfill").NodeModulesPolyfillPlugin;
import createBundler from "@bahmutov/cypress-esbuild-preprocessor";
import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";
import createEsbuildPlugin from "@badeball/cypress-cucumber-preprocessor/esbuild";

module.exports = defineConfig({
e2e: {
  async setupNodeEvents(on, config) {
    // `on` is used to hook into various events Cypress emits
    // `config` is the resolved Cypress config
    await addCucumberPreprocessorPlugin(on, config);
    on(
      "file:preprocessor",
      createBundler({
        plugins: [nodePolyfills(), createEsbuildPlugin(config)],
      })
    );
    return config;
  },
},
video: false,
});

When using @esbuild-plugings/node-modules-polyfill as an ESBuild plugin, the output contains a reference to the global variable. When running the code in the browser it errors saying global is not defined. It seems to come from the process polyfill.

Is that polyfill mistakenly included? (as I used to have a Rollup build which also uses rollup-plugin-node-polyfills and did not include this polyfill in the build) or is there something missing that polyfills the global variable?

I followed the example in the readme, but the solid-js imports are still bundled.

I am trying to use this much-needed plugin to polyfill assert calls. Polyfiliing itself happens, however somehow the shape of the exported module does not match the assert api from the polyfill anymore.

In the default Node API, require('assert') is a function that you can call and that behaves like assert.ok: https://nodejs.org/dist/latest-v14.x/docs/api/assert.html#assert_assert_value_message

When bundling my code using esbuild and this plugin, the polyfilled assert module will look like this though:

  // @esbuild-plugins/node-modules-polyfill:assert
  var assert_exports = {};
  __export(assert_exports, {
    AssertionError: () => AssertionError,
    assert: () => ok,
    deepEqual: () => deepEqual,
    deepStrictEqual: () => deepStrictEqual,
    default: () => assert_default,
    doesNotThrow: () => doesNotThrow,
    equal: () => equal,
    fail: () => fail,
    ifError: () => ifError,
    notDeepEqual: () => notDeepEqual,
    notDeepStrictEqual: () => notDeepStrictEqual,
    notEqual: () => notEqual,
    notStrictEqual: () => notStrictEqual,
    ok: () => ok,
    strictEqual: () => strictEqual,
    throws: () => throws
  });

so any consumer that calls require('assert') will see an error of assert is not a function. I'm not entirely sure how this would actually work in a scenario that supports both ESM / CommonJS imports and if this is just me configuring esbuild incorrectly, but maybe you have some insights on what is going on here?

@esbuild-plugins/node-modules-polyfill is using the dependancy rollup-plugin-node-polyfills which gives the warning that rollup-plugin-node-polyfills is depreciated and should use @rollup/plugin-inject.

Is that by design or just an oversight?

Thanks!

As the title says, when I try to get my vote polyfills done I keep on getting the following error. Any ideas as to why?

✘ [ERROR] The injected path "/Users/marian/code/OzoneV2/app-web/node_modules/@esbuild-plugins/node-globals-polyfill/_buffer.js" cannot be marked as external

✘ [ERROR] The injected path "/Users/marian/code/OzoneV2/app-web/node_modules/@esbuild-plugins/node-globals-polyfill/_virtual-process-polyfill_.js" cannot be marked as external

Build failed with 2 errors:
error: The injected path "/Users/marian/code/OzoneV2/app-web/node_modules/@esbuild-plugins/node-globals-polyfill/_buffer.js" cannot be marked as external
error: The injected path "/Users/marian/code/OzoneV2/app-web/node_modules/@esbuild-plugins/node-globals-polyfill/_virtual-process-polyfill_.js" cannot be marked as external

my config

// 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(),
            ],
        },
    },
};

As the title says, the polyfill for proccess is missing stdin,stdout, and stderr

I am trying to bundle my components library with node 18.16.0 and esbuild 0.17.18.

tsconfig.esbuild.json

But I receive this error.

The only fix that I've found is to downgrade node to 18.5.

The node-resolve is dependent on resolve which in turn, does not support native ESM packages (type=module in package.json) see browserify/resolve#222

As a result, a well-known consumer of node-resolve, the Mr. Dodds' mdx-bundler doesn't properly compile ESM packages. For example, it would compile matcher which is ESM only because it has minimalistic "exports": "./index.js", https://github.com/sindresorhus/matcher/blob/main/package.json#L14 — any other value, including differently-named JS file, will fail in MDX bundler.

If you want to recreate the issue, just tweak the unit test to resolve package.json key exports pointing to anything else than index.js, and of course, make it type: module and without main.

When updating to v0.2.0 in the Remix repo (see remix-run/remix#5274), we got the same error(s) as @connorjclark was talking about in #19 (comment):

Cannot read directory "\x00polyfill-node._stream_duplex": invalid argument

https://github.com/remix-run/remix/actions/runs/4017689920/jobs/6902360260#step:7:122

I'm happy to create a PR if somebody could point me into the right direction 🙏

CC/ @remorses

I'm trying to make tailwindcss works in the browser. But, currently there is no util.promisify polyfill which is needed for purgecss,

Current util polyfill:

// node-modules-polyfills:util
var util_exports = {};
__export(util_exports, {
  _extend: () => _extend,
  debuglog: () => debuglog,
  default: () => util_default,
  deprecate: () => deprecate,
  format: () => format,
  inherits: () => inherits_default,
  inspect: () => inspect,
  isArray: () => isArray,
  isBoolean: () => isBoolean,
  isBuffer: () => isBuffer2,
  isDate: () => isDate,
  isError: () => isError,
  isFunction: () => isFunction,
  isNull: () => isNull,
  isNullOrUndefined: () => isNullOrUndefined,
  isNumber: () => isNumber,
  isObject: () => isObject,
  isPrimitive: () => isPrimitive,
  isRegExp: () => isRegExp,
  isString: () => isString,
  isSymbol: () => isSymbol,
  isUndefined: () => isUndefined,
  log: () => log
});