-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
🐛Uncaught Error: Cannot find module '21' #879
Comments
Could u provide us with a test repository? |
Tried out your test repo and can confirm this is indeed happening, tried cleaning cache, disabling cache, disabling sourcemaps and going down to parcel v1.5.1 to see if it was not caused by recent changes. |
I’ve seen this error message tons of times: From looking at the issues the bugs seem totally unrelated, but I suppose maybe we should figure out where that error message is coming from and make it more informative. Or maybe the issues are actually even caused by some common bug... not sure 🤷♂️ |
It will be good if we provide file file mapping moduleId => moduleName |
If there's a workaround I can use, please tell me as this is holding me back from developing my project. |
@Makmm fall back your node version to 8.9.4 and have a try |
@yufengwang Tried with 8.9.3, same issue |
What OS is everybody who sees the issue using? I’m on MacOS High Sierra (10.13.2), and I don’t get that
Which makes sense, because when I log out
I’m not familiar with Angular so I have no clue why it’s undefined, but that doesn’t look like it’s being caused by Parcel. Am I the only one that’s not getting the |
@davidnagli i'm also using High Sierra |
@davidnagli 1. not Angular 2. yes, the error is normal, I want to fix it but can't because of this issue |
@DeMoorJasper That’s really strange... I’ve tried a million times and I can’t reproduce. I’ve tried different browsers, different Node versions (tried both I’m pretty much at a loss for reproducing this. Can you guys try to remove parcel and reinstall it? That’s the only thing I can think off... 😕 |
@davidnagli Tried with |
As a last ditch effort I just tried to perfectly recreate everything and installed the exact Node version number as @Makmm, and verified that npm version numbers also match. Then I ran Parcel without HMR, cache, or sourcemaps, and I still didn’t get the error!
Then I opened I also tried in Safari, with the same exact result. Let’s see if anyone else is able to reproduce... |
@davidnagli Reproduced on a completly different machine just now, Debian EDIT: tried with the exact same version of Google Chrome, same issue >.> |
Wait @davidnagli , did you try modifying a file? that's when the error comes up. |
Oh!!! You mean during HMR?! |
I don't know what HMR is. >.< |
HMR is pretty much the “live reload” thing that refreshes your code within your app automatically whenever you make a change. See: HMR Docs So you’re saying that you don’t see an error when you open Try running parcel with these flags so we can narrow it down:
|
@davidnagli HMR is failing (in the way you said it is), but source maps are too, if I run it with the |
Interesting... |
Ummm question: What does import NavBar from '@/components/NavBar'
import GlobalAlert from '@/components/GlobalAlert'
import RouterView from '@/core/router/RouterView' |
Check |
Ok I’m pretty sure that’s gonna cause issues, because Parcel only runs Babel after resolving imports, meaning that those paths won’t be transformed with babel before we try to resolve them. Can you try temporarly getting rid of them and seeing if it magically solves the issue? Just so you know, we just added support for project relative imports built into Parcel, so you won’t even need this whole babel set up soon. The PR has already been merged and should be released to npm pretty soon :) The PR: #850 I’m fairly certain that if you change those paths to be relative paths, it should fix the error 👍 |
Oh great! let me try that, one second |
Nope, doesn't fix it :// |
😡 😠 😡 |
Commenting out the css files, this is the error on HMR reload:
|
@Makmm Looks like it.
Ironically, parcel doesn't work correctly because of the error. |
@DeMoorJasper @devongovett parcel/src/builtins/prelude.js Lines 68 to 74 in 420ed63
newRequire runs the childBundles on page load: first the HMR loader and then the code itself.When an error occurs on the inital load inside a childBundle, an error is thrown and newRequire doesn't get returned. Therefore the global window.require is undefinedparcel/src/builtins/prelude.js Lines 9 to 11 in 420ed63
and global.require will be undefined in the HMR loader as well:parcel/src/builtins/hmr-runtime.js Lines 30 to 34 in 420ed63
"Proof"/ Bugfix(?): for (var i = 0; i < entry.length; i++) {
try{
newRequire(entry[i]);
} catch(e){
console.error(e)
}
} works! |
@mischnic Feel free to make a PR :) |
|
When I import an image from js in a single file vue component, it shows It took me a lot of time to realize that I should config babel to enable importing images. I think a more friendly message should be something like |
@DeMoorJasper Thanks, your are right. I made some tests and confirmed loading images in js is supported out of the box. After some more tries, I found that the real cause of the "Can not find module" error is (assume there is a "foo.png" under the same folder: package.json {
"scripts": {
"dev": "parcel index.html"
},
"devDependencies": {
"parcel-bundler": "^1.8.1"
},
"dependencies": {
}
} index.html <html>
<head></head>
<body>
<h1>img from html</h1>
<img src="./foo.png">
<h1>img from js</h1>
<img id="from-js">
<script src="./app.js"></script>
<style>img {border: 1px solid black; width: 100px; height: 100px;}</style>
</body>
</html> app.js import foo from './foo.png'
document.querySelector('#from-js').src = foo Then (EDIT: reduced dependencies to show this is a parcel issue) |
@luikore I spent good amount of time figuring it out myself. Can't import the same asset twice I guess. |
I ran into this issue today. I had JS importing the asset |
Yes, please isolate the root cause and sub a pull to fix all related issues. |
If someone else encounters this, same thing happens if you have the same image in the index.html and also imported from your JS. |
@DeMoorJasper : It seems parcel won't resolve the module correctly if it's been referenced in a non-JS file previously. I don't know if this helps or not, but I found a workaround, which might be a hint into solving the issue. Not working<body>
<img src="./image.png" alt="">
<script src="main.js"></script>
</body> Working<body>
<script src="main.js"></script>
<img src="./image.png" alt="">
</body> Hope this helps! |
I've expanded the basic html integration test to demonstrate the bug and am working on debugging it now. Any collaboration or ideas welcome. |
@lourd So should this fail ? It doesn't (anymore) with 1.10.1 <body>
<img src="./image.png">
<img id="from-js">
<script src="./index.js"></script>
</body> import foo from './image.png';
document.querySelector('#from-js').src = foo; |
Nice! I tested my reproduction against the latest on master and it looks like it's passing now. I'm happy to make a PR if that test is helpful. Either way, I think this issue can be closed. |
The issue in #898 should still cause this error. |
@lourd feel free to open a PR if there isn't a test for it yet. The more coverage the better. Gonna close this as it appears to have been fixed. |
I still have that issue. Here's an example: index.html:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<Title>Sample hooks app</title>
</head>
<body>
<div id="root"></div>
<script src="./src/index.js"></script>
</body>
</html> index.jsimport React from 'react';
import ReactDOM from 'react-dom';
const App = () => <div>Hey</div>;
ReactDOM.render(<App />, document.getElementById("toor")); // error here package.json (notice React alpha, not sure if it matters or not):{
"name": "hooks-parcel-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"parcel-bundler": "^1.11.0",
"react": "^16.7.0-alpha.2",
"react-dom": "^16.7.0-alpha.2"
}
} Steps to reproduce:
Conclusion:If the app is loaded with an error for the first time, the error is displayed but everything crashes on an edit, no matter if the edit would make the run successful or not. If the app loads successfully for the first time, everything is okay, even if there's an error later on, you can fix it and the app will continue working. |
This is exactly what I attempted to fix in #898 (didn't get merged). An even shorter sample: throw new Error("STOP!");
console.log("print"); |
@mischnic why didn't it get merged? Is there any chance for it to be fixed in the near future? This looks serious to me and i'm surprised that such a mature project has such an error and that no one has noticed it earlier. |
There were some issues with my fix. I might take another look. |
🎛 Configuration (.babelrc, package.json, cli command)
.babelrc:
package.json:
🤔 Expected Behavior
Run
$ parcel index.html
, go tolocalhost:1234
, change something in the code and the browser should get the new code and load it😯 Current Behavior
Run
$ parcel index.html
, go tolocalhost:1234
, console shows correct sourcemaps:change something in the code and this error comes up:
Refresh, now sourcemaps are broken:
💁 Possible Solution
No idea! <.<
🌍 Your Environment
The text was updated successfully, but these errors were encountered: