parcel
parcel copied to clipboard
parcel-bundler
'Cannot find module' error when using react-refresh
🐛 bug report
I'm trying to convert an app to use parcel, and when running it I get the following error in the browser, and react-refresh doesn't work:
index-dev.3f2f5a4b.js:61 Uncaught Error: Cannot find module '1dldy'
at newRequire (index-dev.3f2f5a4b.js:61:19)
at newRequire (index-dev.3f2f5a4b.js:45:18)
at localRequire (index-dev.3f2f5a4b.js:84:35)
at 1xC6H.react-refresh/runtime (runtime-402a68cf08055057.js:3:20)
at newRequire (index-dev.3f2f5a4b.js:71:24)
at index-dev.3f2f5a4b.js:122:5
at index-dev.3f2f5a4b.js:145:3
This happens when the react-refresh runtime tries to load react-error-overlay, however it looks like that module isn't actually included in this bundle, as you can see it's referenced once here but nowhere else in the file:
🎛 Configuration (.babelrc, package.json, cli command)
My configuration is pretty straightforward, I'm just using the default configuration, other than a custom resolver to handle baseUrl for typescript, and excluding babel entirely:
{
"extends": "@parcel/config-default",
"resolvers": ["parcel-resolver-internal", "@parcel/resolver-default"],
"transformers": {
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
"@parcel/transformer-js",
"@parcel/transformer-react-refresh-wrap"
]
}
}
🤔 Expected Behavior
It shouldn't crash, React Fast Refresh should work
😯 Current Behavior
See above
💁 Possible Solution
Seems like Parcel might need to ensure somehow that react-error-overlay is correctly included in the file.
🔦 Context
See above
💻 Code Sample
I tried to create a repro but wasn't able to get a fresh repo using Parcel to split up the bundles like it does for our app, creating multiple separate index-dev.[hash].js files. I would love some help from someone who better understands parcel's bundling logic on how I might trigger this, or why Parcel is doing what it's doing.
This is what the <head> of our page looks like, in case it helps:
🌍 Your Environment
| Software | Version(s) |
|---|---|
| Parcel | 2.6.2 |
| Node | 16.6.1 |
| npm/Yarn | yarn 1.22.19 |
| Operating System | macOS |
I have the same problem. Only happens in production mode. I've spent Friday debugging it but all I found was that when there's this kind of code:
import React, { useState} from "react"
it evaluates to something like this:
e=i("foo"),o=i("bar") where "i" is parcelRequire, e is react import and o is that "missing module".
It kinda happened after adding parcelrc file to opt out from babel (which is only used for jest tests), however not sure (yet) if removing it solves the issue.
I am able to reproduce the above bug for react-fast-refresh... @mischnic None of the possible solutions mentioned here work: https://github.com/parcel-bundler/parcel/issues/4858..
Pls tell how to disable react fast refresh with parcel 2.8.0
Permanent solution which worked on my machine - https://github.com/parcel-bundler/parcel/issues/4858#issuecomment-1492080447
Check your node and npm version.
I was having same problem using parcel v2.2.1 with node v18 and npm v10.1.0. Then I changed the node version to 16.9.1 and the npm version to 9.6.2 and it worked.
@sznowicki so, did you solve this problem?
Unfortunately from what I remembered the workaround for us was to change the order of imports or something. I tried making a repro repo but I failed. it only happened in our massive design system mono repo.
In the end we moved to esbuild and vite (different reasons, we have dynamic https:// imports which parcel doesn't support)