Parcel: Uncaught ReferenceError: require is not defined

[garthenweb]

🐛 bug report

Since some nightly versions (not 100% sure when it started) I get an error for optimized JS files Uncaught ReferenceError: require is not defined.

It looks like it happens when a node module is requested which contains a commonjs module.

🎛 Configuration (.babelrc, package.json, cli command)

See https://github.com/garthenweb/parcel-bug-report-examples/tree/bug/require-is-not-a-function

🤔 Expected Behavior

Should not throw at runtime.

😯 Current Behavior

Throws.

💁 Possible Solution

I guess the required calls need to be replaced in the scope hoisting process.

🔦 Context

I saw this yesterday the first time in nightly version 266 with the object-hash library but had it today in another project using react-hot-loader.

💻 Code Sample

https://github.com/garthenweb/parcel-bug-report-examples/tree/bug/require-is-not-a-function

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 2.0.0-nightly.273
| Node | v12.8.1
| npm | v6.14.5
| Operating System | Windows / WSL 1 Ubuntu

[mischnic]

The npm build of object-hash is a webpack bundle (or similar) and this is once again the problem where Parcel replaces typeof require with "function" although require isn't actually defined.

@wbinnssmith ~Tried has made an attempt to fix this in~ noticed this as well in https://github.com/parcel-bundler/parcel/pull/3933.

[garthenweb]

Interesting problem, thanks for the hint. I played a bit and found I can "fix" it for object-hash by just injecting the following into the head of the JS file (as require is actually never called):

globalThis.require = () => {
  throw new Error(
    "Calls to `require` from umd module definitions are not supported"
  );
};

This will not resolve all the issues for code like that, anyhow it would reduce the pain for modules that actually don't use the require call and defers the problem a bit until there is a stable solution.

Further, if it still throws for your application, there will at least be a helpful message so that you get a hint on what is going on (and how you might be able to work around it).

For #4206 we could actually do the same using a proxy (if supported by the browser).

@wbinnssmith @mischnic Any objections? Would you be interested into a PR that implements it as a runtime?

[mischnic]

I'm not happy with that (and if we did do that, rather as a local variable ("bundle-local", in the IIFE) and not by patching the global object).

These are the problematic cases that I know of:

• browserify/webpack bundles: I think we are replacing typeof "require" here so that peerDependency-style requires work. But with scope hoisting there is no require
• https://github.com/lodash/lodash/blob/master/.internal/nodeTypes.js: we don't really want to replace typeof require in these situations (essentially a isNode() check)

We should also investigate how Webpack handles this.

[einarpersson]

Still a problem for me with latest parcel v.2

When I import peerjs I get this error. npm start works but not npm run build

If I just import another local es6 module it works fine.

The workaround described above by @garthenweb removes the error, but if I have to do that in every project...??

[lukejagodzinski]

Hmmm I get this error when I try to import CSS files:

import "./styles.css";

It's the only place where require is being used.

[mischnic]

Another package where this happens: [email protected]