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

🎛 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

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 51 (27 by maintainers)

Most upvoted comments

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

luikore on May 9, 2018

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? 🔥🐛

tcodes0 on Jun 7, 2018

😡 😠 😡

davidnagli on Feb 24, 2018

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

ghost on Feb 24, 2018

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

davidnagli on Feb 22, 2018

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 on Jul 12, 2018

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

ghost on Feb 21, 2018

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

paleite on Jul 12, 2018

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

pselden on Jul 8, 2018

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:

Code has no runtime errors
Open page
Change code to throw error
Subsequent HMR updates work fine

This doesn’t work:

Code has runtime errors
Open page
Change code to not throw error anymore
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.

mischnic on Feb 26, 2018

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 on Feb 25, 2018

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

ghost on Feb 24, 2018

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

ghost on Feb 23, 2018

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

dima-takoy-zz on Feb 22, 2018