Parcel: 🐛Uncaught Error: Cannot find module '21'

[v0idifier]

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

.babelrc:

{
  "presets": ["env"],
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathSuffix": "js",
      "rootPathPrefix": "@"
    }]
  ]
}

package.json:

{
  "name": "hwm-parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "makmm",
  "license": "MIT",
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-plugin-root-import": "^5.1.0"
  }
}

🤔 Expected Behavior

Run $ parcel index.html, go to localhost:1234, change something in the code and the browser should get the new code and load it

😯 Current Behavior

Run $ parcel index.html, go to localhost: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

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.6.2 |
| Node | 9.5.0 |
| npm | 5.6.0 |
| Operating System | Debian sid |

[DeMoorJasper]

Could u provide us with a test repository?

[v0idifier]

@DeMoorJasper https://github.com/makmm/test-repo

[DeMoorJasper]

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.

[davidnagli]

Cannot find module ‘[number]’

I’ve seen this error message tons of times:

198

326

666

497

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 🤷‍♂️

[mecurc]

It will be good if we provide file file mapping moduleId => moduleName

[v0idifier]

If there's a workaround I can use, please tell me as this is holding me back from developing my project.

[YUFENGWANG]

@makmm fall back your node version to 8.9.4 and have a try

[v0idifier]

@YUFENGWANG Tried with 8.9.3, same issue

[davidnagli]

What OS is everybody who sees the issue using?

I’m on MacOS High Sierra (10.13.2), and I don’t get that Cannot find module error message. I only get:

Uncaught TypeError: Cannot read property 'getState' of undefined

Which makes sense, because when I log out stores I get:

stores: [undefined, GroupStore]

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 Cannot find module message?

[DeMoorJasper]

@davidnagli i'm also using High Sierra

[v0idifier]

@davidnagli 1. not Angular 2. yes, the error is normal, I want to fix it but can't because of this issue

[davidnagli]

@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 v9.6.1 and v8.9.4), different Parcel versions (1.6.2 and master), and even different terminals (Mac Terminal and iTerm2).

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... 😕

[v0idifier]

@davidnagli Tried with 9.6.1, npm scripts (npm run dev) AND global (parcel index.html) and still same issue, got the number 29 with npm scripts tho.

[davidnagli]

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!

> parcel --version
1.6.2
> npm --version
5.6.0
> node --version
v9.5.0
> parcel index.html --no-hmr --no-cache --no-source-maps
Server running at http://localhost:1234
✨  Built in 9.15s.

Then I opened localhost:1234 in Chrome (64.0.3282.167 (Official Build) (64-bit)), turned on Verbose logs, and disabled Group Similar (I think it’s a new feature). Still nothing...

I also tried in Safari, with the same exact result.

Let’s see if anyone else is able to reproduce...

[v0idifier]

@davidnagli Reproduced on a completly different machine just now, Debian sid too, node 8.9.4, latest parcel, deleted node_modules and re-installed (I pushed node_modules, whoops :P) and same error, but with 39 now. :/

EDIT: tried with the exact same version of Google Chrome, same issue >.>

[v0idifier]

Wait @davidnagli , did you try modifying a file? that's when the error comes up.

[davidnagli]

Oh!!! You mean during HMR?!

[v0idifier]

I don't know what HMR is. >.<

[davidnagli]

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 localhost:1234 the first time, but then once you make a change and the app get’s automatically refreshed your seeing that error?

Try running parcel with these flags so we can narrow it down:

parcel index.html --no-hmr --no-cache --no-source-maps

[v0idifier]

@davidnagli HMR is failing (in the way you said it is), but source maps are too, if I run it with the --no-hmr flag only, I have the same source map issue after changing a file

[davidnagli]

Interesting...

[davidnagli]

Ummm question:

What does @/ do here?

import NavBar from '@/components/NavBar'
import GlobalAlert from '@/components/GlobalAlert'
import RouterView from '@/core/router/RouterView'

[v0idifier]

Check .babelrc; it's a way to say go to the root of the code

[davidnagli]

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 👍

[v0idifier]

Oh great! let me try that, one second

[v0idifier]

Nope, doesn't fix it ://

[davidnagli]

😡 😠 😡

[mischnic]

Commenting out the css files, this is the error on HMR reload:

Uncaught TypeError: Cannot read property 'modules' of undefined
    at hmrApply (initialize.js:22)
    at initialize.js:22
    at Array.forEach (<anonymous>)
    at WebSocket.ws.onmessage (initialize.js:22)

[mischnic]

The underlying error is ~the connection of babel-polyfill and~ a javascript error:

Any javascript error will cause (on the 2nd edit of the js file):

• With a css file:

Uncaught Error: Cannot find module 'XX'
    at newRequire (css-loader.js:30)
    at newRequire (css-loader.js:22)
    at localRequire (css-loader.js:30)
    at Object.eval (eval at hmrApply (css-loader.js:30), <anonymous>:5:1)
    at newRequire (css-loader.js:30)
    at hmrAccept (css-loader.js:30)
    at css-loader.js:30
    at Array.forEach (<anonymous>)
    at WebSocket.ws.onmessage (css-loader.js:30)

• Without (comment out <link> below)

index.js:3 Uncaught TypeError: Cannot read property 'modules' of undefined
    at hmrApply (index.js:3)
    at index.js:3
    at Array.forEach (<anonymous>)
    at WebSocket.ws.onmessage (index.js:3)

This works:

1. Code has no runtime errors
2. Open page
3. Change code to throw error
4. Subsequent HMR updates work fine

This doesn't work:

1. Code has runtime errors
2. Open page
3. Change code to not throw error anymore
4. Subsequent HMR updates still don't work

Minimal (non-)working example

index.html:

<link rel="stylesheet" href="index.css">
<script src="index.js"></script>

index.js:

// import 'babel-polyfill';

throw new Error("test");
//or
someReferenceError = 10;

index.css:

body {}

Debugging

 ws.onmessage = function (event) {
    // ...
    if (data.type === 'update') {
      data.assets.forEach(function (asset) {
        console.log(global.require) //undefined with error, normally = function newRequire()
        hmrApply(global.require, asset);
      });

      data.assets.forEach(function (asset) {
        if (!asset.isNew) {
          hmrAccept(global.require, asset.id);
        }
      });
    }
    // ...
  };

EDIT:
~import "regenerator-runtime/runtime" causes the same issue as "babel-polyfill".~

EDIT 2:
Has nothing to do with babel-polyfill.

[v0idifier]

@mischnic Wow okay, so it's an actual /and kinda big/ bug in parcel?

[mischnic]

@makmm Looks like it.

yes, the error is normal, I want to fix it but can't because of this issue

Ironically, parcel doesn't work correctly because of the error.

[mischnic]

@DeMoorJasper @devongovett
I think I found the cause:
https://github.com/parcel-bundler/parcel/blob/420ed63ed18c6a09e8b25754d0142b3b87ebcd71/src/builtins/prelude.js#L68-L74
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 undefined
https://github.com/parcel-bundler/parcel/blob/420ed63ed18c6a09e8b25754d0142b3b87ebcd71/src/builtins/prelude.js#L9-L11
and global.require will be undefined in the HMR loader as well:
https://github.com/parcel-bundler/parcel/blob/420ed63ed18c6a09e8b25754d0142b3b87ebcd71/src/builtins/hmr-runtime.js#L30-L34

"Proof"/ Bugfix(?):

  for (var i = 0; i < entry.length; i++) {
    try{
      newRequire(entry[i]);
    } catch(e){
      console.error(e)
    }    
  }

works!

(The first error is from the added console.error and the second from HMR)

[DeMoorJasper]

@mischnic Feel free to make a PR :)

[willin]

css-loader.js:30 Uncaught (in promise) Error: Cannot find module '3b96d1e50931156f07cc051bc060909f.svg,119'
    at newRequire (css-loader.js:30)
    at newRequire (css-loader.js:22)
    at localRequire (css-loader.js:30)
    at css-loader.js:30
newRequire @ css-loader.js:30
newRequire @ css-loader.js:22
localRequire @ css-loader.js:30
(anonymous) @ css-loader.js:30
Promise.then (async)
loadBundles @ css-loader.js:30
require.0 @ css-loader.js:30
newRequire @ css-loader.js:30
require.17 @ css-loader.js:30
(anonymous) @ css-loader.js:30

[luikore]

When I import an image from js in a single file vue component, it shows Uncaught Error: Cannot find module '467' too.

It took me a lot of time to realize that I should config babel to enable importing images.
After adding babel-plugin-import-static-files the error goes away.

I think a more friendly message should be something like "foo.png" is not a valid javascript file or importing "foo.png" throws an error so I know how I can fix it easier.

[DeMoorJasper]

@luikore requiring images should work, it should return the url of the asset.
I agree that the errors should represent the filenames instead of the id

_{Sent with GitHawk}

[luikore]

@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
loading the same image in both HTML and JS. A minimal example to recur this error:

(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 yarn && yarn dev and open http://localhost:1234/index.html to see the error.

(EDIT: reduced dependencies to show this is a parcel issue)

[xeoneux]

@luikore I spent good amount of time figuring it out myself. Can't import the same asset twice I guess.

[Thomazella]

I ran into this issue today. I had JS importing the asset import foo from "..." and later on css using the same asset as a bg image url(....). I tried removing .cache and renaming the asset, but it didn't work. I had to duplicate it with a different name so JS imports one, and css the other. Can I help to get it fixed? 🔥🐛

[ghost]

Can I help to get it fixed?

Yes, please isolate the root cause and sub a pull to fix all related issues.

[pselden]

If someone else encounters this, same thing happens if you have the same image in the index.html and also imported from your JS.

[paleite]

@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!

[lourd]

I've expanded the basic html integration test to demonstrate the bug and am working on debugging it now. Any collaboration or ideas welcome.

[mischnic]

@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;

[lourd]

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.

[mischnic]

Either way, I think this issue can be closed.

The issue in #898 should still cause this error.

[DeMoorJasper]

@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.

[devil418]

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.js

import 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:

1. Prepare an app with the files included above.
2. Try launching it, you should get the right error.
3. Change toor to root in the index.js, instead of working, you will get:
   js index.js:5 Console was cleared Error index.js:5 Uncaught TypeError: Cannot read property 'modules' of undefined at hmrApply (index.js:5) at index.js:5 at Array.forEach (<anonymous>) at WebSocket.ws.onmessage (index.js:5)
4. refresh the page, it will work.
5. Change to toor, toora, toraaaaaa etc. It will give you right errors.
6. Change back to root, it will work.

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.

[mischnic]

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.

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");

[devil418]

@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.

[mischnic]

why didn't it get merged? Is there any chance for it to be fixed in the near future?

There were some issues with my fix. I might take another look.