[Solved] Error: Load failed: regenerator-runtime/runtime

Hi,

Solution

Recently I get localhost get errors in my current project. I’ve created a vanilla project and also receive the same error. Any solution?

Using:

  • Node v14.7.0
  • Browsers
    • Firefox - 79.0 (64-bit)
    • Chromium - Version 84.0.4147.125 (Official Build) Arch Linux (64-bit)

Steps:

  1. npx makes aurelia/v1 new-project-name --here -s cli-bundler,alameda,htmlmin,sass,postcss,karma,scaffold-navigation
  2. npm i
  3. npm start

Errors (errors from Firefox):

GET http://localhost:9000/src/regenerator-runtime/runtime.js
[HTTP/1.1 404 Not Found 3ms]

The resource from “http://localhost:9000/src/regenerator-runtime/runtime.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff). localhost:9000

Error: Load failed: regenerator-runtime/runtime: http://localhost:9000/src/regenerator-runtime/runtime.js
    load alameda.js:709
    load alameda.js:692
    callDep alameda.js:781
    waitForDep alameda.js:588
    main alameda.js:1079
    main alameda.js:1061
    takeQueue alameda.js:296
    load alameda.js:690
    load alameda.js:688
    callDep alameda.js:781
    waitForDep alameda.js:588
    main alameda.js:1079
    main alameda.js:1061
    req alameda.js:363
    promise callback*req alameda.js:359
    loadModule aurelia-loader-default.js:165
    loadModule aurelia-loader-default.js:164
    config aurelia-bootstrapper.js:133
    p aurelia-bootstrapper.js:169
    promise callback*bootstrap aurelia-bootstrapper.js:168
    run aurelia-bootstrapper.js:155
    promise callback*run aurelia-bootstrapper.js:150
    <anonymous> aurelia-bootstrapper.js:175
    execCb alameda.js:1233
    defineModule alameda.js:493
    depFinished alameda.js:526
    waitForDep alameda.js:589
    promise callback*waitForDep alameda.js:588
    main alameda.js:1079
    main alameda.js:1061
    callDep alameda.js:746
    waitForDep alameda.js:588
    main alameda.js:1079
    main alameda.js:1061
    callDep alameda.js:746
    waitForDep alameda.js:588
    main alameda.js:1079
    main alameda.js:1061
    req alameda.js:363
    promise callback*req alameda.js:359
    <anonymous> alameda.js:1296
    <anonymous> alameda.js:1299
    aurelia-bootstrapper.js:160

I tried with typescript instead of babel and it works. But my project is using babel.

  • npx makes aurelia/v1 new-project-name --here -s cli-bundler,alameda,typescript,htmlmin,sass,postcss,karma,scaffold-navigation

Edit:

  • Add step to be clearer: npm i
  • Add result of trying with TypeScript instead of JavaScript
  • Add solution by @huochunpeng
1 Like

Sounds like a regression in that dependency. I will test it tomorrow.

2 Likes

Too bad, recent change in regenerator-runtime defined a local function called define, which cli-bundler cannot handle because of lack of scope analysis (cli-bundler think that define is an AMD module define).

The successor of cli-bundler, the dumber bundler doesn’t have such issue. But the project scaffold is different from the cli one, you can try npx makes dumberjs if you want to a look, you will need --here likely for your existing project. FYI, for Aurelia 2, we are using dumber to replace cli-bundler.

For your current project, you can bypass the issue:

  1. remove import 'regenerator-runtime/runtime'; from main.js.
  2. add it to aurelia.json prepend.
      {
        "name": "vendor-bundle.js",
        "prepend": [
          "node_modules/regenerator-runtime/runtime.js", // <-- here
          "node_modules/whatwg-fetch/dist/fetch.umd.js",
          "node_modules/promise-polyfill/dist/polyfill.min.js",
          "node_modules/alameda/alameda.js"
        ],
2 Likes

ok. thank you for looking into it

1 Like