Parcel: Bug: Uncaught Error: Cannot find module '9'

[krokofant]

Related closed issue https://github.com/parcel-bundler/parcel/issues/198

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

├── dist
├── index.html
├── index.js
├── node_modules
├── package-lock.json
├── package.json
└── rust.rs

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "parcel index.html"
  },
  "devDependencies": {
    "babel-preset-env": "1.6.1",
    "parcel-bundler": "1.5.0"
  }
}

🤔 Expected Behavior

No error? 😅

😯 Reproduce

npm install
rm -rf .cache
npm start

change console.log("test1") to console.log("test2") or something else

Now the log looks like:

13
index.js:5 test1
VM3106:7 13
VM3106:9 test2

Reload page
Now the error is thrown:

Navigated to http://localhost:1234/
test.js:33 Uncaught Error: Cannot find module '9'
    at newRequire (test.js:33)
    at localRequire (test.js:48)
    at Object.require.0 (index.js:5)
    at newRequire (test.js:42)
    at require.4../rust.rs (test.js:67)
    at test.js:72

💁 Possible Solution

💻 Code Sample

https://github.com/krokofant/parcel-error

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.5
| Node | 9.4.0
| npm/Yarn | npm 5.6.0
| Operating System | macOS 10.13.2

[shawwn]

@krokofant Thanks for the report!

@DeMoorJasper @albizures I've confirmed this in the latest version of Parcel. Anyone available to take a look?

[albizures]

I can work on it ✋

[shawwn]

@albizures Thanks! I just created a #rust channel in our slack. Wanna hop on? Jasper is looking into it too, so maybe you can help us with some Rust debugging.

[DeMoorJasper]

@albizures Thanks for joining in, it appears to be a Rust issue at first sight, something with it not being included in the bundle from time to time

[albizures]

@DeMoorJasper I don't think it's a rust issue since the missing module is the bundle logic and the wasm reference is still there.

maybe @devongovett could have an idea

here is the diff

 // modules are defined as an array
 // [ module function, map of requires ]
 //
 // map of requires is short require name -> numeric require
 //
 // anything defined in a previous bundle is accessed via the
 // orig method which is the require for previous bundles

 // eslint-disable-next-line no-global-assign
 require = (function (modules, cache, entry) {
  // Save the require from previous bundle to this closure if any
  var previousRequire = typeof require === "function" && require;

  function newRequire(name, jumped) {
    if (!cache[name]) {
      if (!modules[name]) {
        // if we cannot find the module within our internal map or
        // cache jump to the current global require ie. the last bundle
        // that was added to the page.
        var currentRequire = typeof require === "function" && require;
        if (!jumped && currentRequire) {
          return currentRequire(name, true);
        }

        // If there are other bundles on this page the require from the
        // previous one is saved to 'previousRequire'. Repeat this as
        // many times as there are bundles until the module is found or
        // we exhaust the require chain.
        if (previousRequire) {
          return previousRequire(name, true);
        }

        var err = new Error('Cannot find module \'' + name + '\'');
        err.code = 'MODULE_NOT_FOUND';
        throw err;
      }

      localRequire.resolve = resolve;

      var module = cache[name] = new newRequire.Module;

      modules[name][0].call(module.exports, localRequire, module, module.exports);
    }

    return cache[name].exports;

    function localRequire(x){
      return newRequire(localRequire.resolve(x));
    }

    function resolve(x){
      return modules[name][1][x] || x;
    }
  }

  function Module() {
    this.bundle = newRequire;
    this.exports = {};
  }

  newRequire.Module = Module;
  newRequire.modules = modules;
  newRequire.cache = cache;
  newRequire.parent = previousRequire;

  for (var i = 0; i < entry.length; i++) {
    newRequire(entry[i]);
  }

  // Override the current require with this new one
  return newRequire;
})({4:[function(require,module,exports) {
"use strict";

var _rust = require("./rust.rs");

console.log((0, _rust.add)(5, 8));

-console.log("test3");
+console.log("test3");
},{"./rust.rs":6}],8:[function(require,module,exports) {

var global = (1, eval)('this');
var OldModule = module.bundle.Module;
function Module() {
  OldModule.call(this);
  this.hot = {
    accept: function (fn) {
      this._acceptCallback = fn || function () {};
    },
    dispose: function (fn) {
      this._disposeCallback = fn;
    }
  };
}

module.bundle.Module = Module;

if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
  var hostname = '' || location.hostname;
  var ws = new WebSocket('ws://' + hostname + ':' + '58424' + '/');
  ws.onmessage = function (event) {
    var data = JSON.parse(event.data);

    if (data.type === 'update') {
      data.assets.forEach(function (asset) {
        hmrApply(global.require, asset);
      });

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

    if (data.type === 'reload') {
      ws.close();
      ws.onclose = function () {
        location.reload();
      };
    }

    if (data.type === 'error-resolved') {
      console.log('[parcel] ✨ Error resolved');
    }

    if (data.type === 'error') {
      console.error('[parcel] 🚨  ' + data.error.message + '\n' + 'data.error.stack');
    }
  };
}

function getParents(bundle, id) {
  var modules = bundle.modules;
  if (!modules) {
    return [];
  }

  var parents = [];
  var k, d, dep;

  for (k in modules) {
    for (d in modules[k][1]) {
      dep = modules[k][1][d];
      if (dep === id || Array.isArray(dep) && dep[dep.length - 1] === id) {
        parents.push(+k);
      }
    }
  }

  if (bundle.parent) {
    parents = parents.concat(getParents(bundle.parent, id));
  }

  return parents;
}

function hmrApply(bundle, asset) {
  var modules = bundle.modules;
  if (!modules) {
    return;
  }

  if (modules[asset.id] || !bundle.parent) {
    var fn = new Function('require', 'module', 'exports', asset.generated.js);
    asset.isNew = !modules[asset.id];
    modules[asset.id] = [fn, asset.deps];
  } else if (bundle.parent) {
    hmrApply(bundle.parent, asset);
  }
}

function hmrAccept(bundle, id) {
  var modules = bundle.modules;
  if (!modules) {
    return;
  }

  if (!modules[id] && bundle.parent) {
    return hmrAccept(bundle.parent, id);
  }

  var cached = bundle.cache[id];
  if (cached && cached.hot._disposeCallback) {
    cached.hot._disposeCallback();
  }

  delete bundle.cache[id];
  bundle(id);

  cached = bundle.cache[id];
  if (cached && cached.hot && cached.hot._acceptCallback) {
    cached.hot._acceptCallback();
    return true;
  }

  return getParents(global.require, id).some(function (id) {
    return hmrAccept(global.require, id);
  });
}
-},{}],12:[function(require,module,exports) {
-  var bundleURL = null;
-  function getBundleURLCached() {
-    if (!bundleURL) {
-      bundleURL = getBundleURL();
-    }
-  
-    return bundleURL;
-  }
-  
-  function getBundleURL() {
-    // Attempt to find the URL of the current script and use that as the base URL
-    try {
-      throw new Error;
-    } catch (err) {
-      var matches = ('' + err.stack).match(/(https?|file|ftp):\/\/[^)\n]+/g);
-      if (matches) {
-        return getBaseURL(matches[0]);
-      }
-    }
-  
-    return '/';
-  }
-  
-  function getBaseURL(url) {
-    return ('' + url).replace(/^((?:https?|file|ftp):\/\/.+)\/[^/]+$/, '$1') + '/';
-  }
-  
-  exports.getBundleURL = getBundleURLCached;
-  exports.getBaseURL = getBaseURL;
-  
-  },{}],10:[function(require,module,exports) {
-  var getBundleURL = require('./bundle-url').getBundleURL;
-  
-  function loadBundlesLazy(bundles) {
-    var id = bundles[bundles.length - 1];
-  
-    try {
-      return Promise.resolve(require(id));
-    } catch (err) {
-      if (err.code === 'MODULE_NOT_FOUND') {
-        return new LazyPromise(function (resolve, reject) {
-          loadBundles(bundles)
-            .then(resolve, reject);
-        });
-      }
-  
-      throw err;
-    }
-  }
-  
-  function loadBundles(bundles) {
-    var id = bundles[bundles.length - 1];
-  
-    return Promise.all(bundles.slice(0, -1).map(loadBundle))
-      .then(function () {
-        return require(id);
-      });
-  }
-  
-  var bundleLoaders = {};
-  function registerBundleLoader(type, loader) {
-    bundleLoaders[type] = loader;
-  }
-  
-  module.exports = exports = loadBundlesLazy;
-  exports.load = loadBundles;
-  exports.register = registerBundleLoader;
-  
-  var bundles = {};
-  function loadBundle(bundle) {
-    var id;
-    if (Array.isArray(bundle)) {
-      id = bundle[1];
-      bundle = bundle[0];
-    }
-  
-    if (bundles[bundle]) {
-      return bundles[bundle];
-    }
-  
-    var type = bundle.match(/\.(.+)$/)[1].toLowerCase();
-    var bundleLoader = bundleLoaders[type];
-    if (bundleLoader) {
-      return bundles[bundle] = bundleLoader(getBundleURL() + bundle)
-        .then(function (resolved) {
-          if (resolved) {
-            module.bundle.modules[id] = [function (require,module) {
-              module.exports = resolved;
-            }, {}];
-          }
-  
-          return resolved;
-        });
-    }
-  }
-  
-  function LazyPromise(executor) {
-    this.executor = executor;
-    this.promise = null;
-  }
-  
-  LazyPromise.prototype.then = function (onSuccess, onError) {
-    return this.promise || (this.promise = new Promise(this.executor).then(onSuccess, onError));
-  };
-  
-  LazyPromise.prototype.catch = function (onError) {
-    return this.promise || (this.promise = new Promise(this.executor).catch(onError));
-  };
-  
-},{"./bundle-url":12}],14:[function(require,module,exports) {
+},{}],14:[function(require,module,exports) {
module.exports = function loadWASMBundle(bundle) {
  return fetch(bundle)
    .then(function (res) {
      if (WebAssembly.instantiateStreaming) {
        return WebAssembly.instantiateStreaming(res);
      } else {
        return res.arrayBuffer()
          .then(function (data) {
            return WebAssembly.instantiate(data);
          });
      }
    })
    .then(function (wasmModule) {
      return wasmModule.instance.exports;
    });
};

},{}],0:[function(require,module,exports) {
var b=require(10);b.register("wasm",require(14));b.load([["fdde80692d345c2ce5aedd1a3e089a77.wasm",6],4]);
},{}]},{},[8,0])
//# sourceMappingURL=/dist/test.map

[devongovett]

Seems like an HMR issue with WebAssembly. I don't think we've implemented anything for that yet. Reloading the page should work for now.

[krokofant]

When I tested this the browser tab became very slow when this was failing. Upon reload the issue also persisted multiple times. I tried disable hmr and cache but then the issue still persisted upon page reload.

With cache disabled some files were still used in .cache - .websm and some other file.

[albizures]

@devongovett actually this error is happening when the page is reloaded and the change was in a no-wasm module, also it's happening no matter if you remove the .cache folder or not

and the error for HMR in a wasm files is different:

not sure if they are related.