ReferenceError: require is not defined - when using "type": "module" in package

[ntucker]

Version

0.5.0-rc.1

Description

With no "type" in package.json:

__webpack_require__.$Refresh$.runtime = __webpack_require__(/*! ../../node_modules/react-refresh/runtime.js */ "../../node_modules/react-refresh/runtime.js");

Adding "type": "module"

__webpack_require__.$Refresh$.runtime = require('/home/ntucker/src/rest-hooks/node_modules/react-refresh/runtime.js');

Perhaps this is thinking "type" will also say commonjs?

You can use @rest-hooks/[email protected] as an example if you so desire.

Related

#337

https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/loader/utils/getModuleSystem.js

Extra info

I tried removing the package.json "exports" member, but that didn't change anything.

Reproducing repo

git clone https://github.com/coinbase/rest-hooks
cd rest-hooks
yarn install
yarn build
cd ./examples/todo-app
yarn start

This puts require() in packages/normalizr/lib/special.js where packages/normalizr/package.json has "type": "module",

[pmmmwh]

Sorry, can you create a repo for me to test on? Module system related issues are really hard to reproduce on my side.

There does exist logic to try inferring the current module system here, but we might have missed some cases.
A workaround would be to force ESM by using options.esModule.

[ntucker]

Added section with the repo I'm trying to get this working on. I tried options.esModule = true but that messed up some other things that I think were expecting commonjs for whatever reason.

[pmmmwh]

The option does accept include and exclude params, maybe you can try tweaking them?
I'll take a look at the example tomorrow.

[ntucker]

I tried the include/exclude a bit, but after a while gave up. It seemed to behavior like module: true with the 'default' options for include and exclude specified. Maybe if I could include/exclude for 'auto' and have another matcher for forcing a specific way. Otherwise I'm forced to find all the things that need one way or another.

[ntucker]

Based on https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/loader/utils/getModuleSystem.js it looks like maybe it's only using one packageJson globally - rather than searching upwards to find the closest packagejson based on the module's directory.

[pmmmwh]

Based on https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/loader/utils/getModuleSystem.js it looks like maybe it's only using one packageJson globally - rather than searching upwards to find the closest packagejson based on the module's directory.

Yes, when that was implemented it was based on a somewhat naïve assumption (for performance mainly) that node_modules would not be passed through this plugin and that sub-directory package.json usage is rare.

I guess correctness would be better here, but it could degrade cold start performance slightly since that would mean we need to traverse all directories for all branches of the tree from rootContext.

[ntucker]

Hmm what leads it to cover node_modules, babel is excluded in the webpack config here https://github.com/ntucker/anansi/blob/master/packages/webpack-config-anansi/src/base/index.js#L146

[pmmmwh]

node_modules as in the linking of lerna to built packages? Since that would definitely be outside of the app's root.

[ntucker]

The way it's currently setup it doesn't build anything in /packages/ in webpack - you have to first build them to create their /lib that is used by exports - which is what the yarn build at top level does.

[pmmmwh]

The way it's currently setup it doesn't build anything in /packages/ in webpack - you have to first build them to create their /lib that is used by exports - which is what the yarn build at top level does.

Yep, but since those ../../package/something routes are not excluded from the plugin (it doesn't match the default exclude rules, which is basically node_modules), they will be processed and thus get tied to the example app's package.json with the current logic. Our loader would inject code into those built files, which should be in cjs as there is no type field for the example app, and hence breaking the build.

[pmmmwh]

Actually, while testing this I realised that there could be another way to circumvent this issue while I continue to test a new heuristic - you can specify any paths outside of the currently compiled base path to the exclude option (alongside node_modules, and I think it would fix the issue at least for your repo.

[ntucker]

I played with exclude a bit but couldn't figure it out. Not sure if it was matching correctly or anything

[aaronshaf]

Still getting this issue with:

"@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",