Cannot find module 'babel-runtime/regenerator' Import locally vs Import from NPM

Question

I'm working on an NPM module and I've been having issues with my babel configuration. I am using ES6, specifically with async / await, static class methods and import / export.

At first, I got the common issue of: ReferenceError: regeneratorRuntime is not defined. I, therefore, installed babel-plugin-transform-runtime as a dev dependency and added it to the plugins in .babelrc. When requiring the module with either the path name or through npm as a dependency I ran into the error Error: Cannot find module 'babel-runtime/regenerator'. It seems that to resolve this I'd have to require babel-runtime, however, a lot of people seem to recommend not doing this when it's a module that you are publishing.

After looking for some guides, I found one that suggested not using import / export, so I tried that. After building and requiring it locally it worked. However, when publishing to npm and importing as a dependency I continue to get the error: Error: Cannot find module 'babel-runtime/regenerator'.

  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-eslint": "^10.0.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "eslint": "^5.12.0",
    "eslint-config-prettier": "^3.4.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0",
    "husky": "^1.3.1",
    "jest": "^23.6.0",
    "lint-staged": "^8.1.0",
    "nodemon": "^1.18.9",
    "prettier": "^1.15.3",
    "rimraf": "^2.6.3"
  },

{
  "presets": [
    "env"
  ],
  plugins: [
    "babel-plugin-transform-runtime"
  ]
}

Could someone suggest how to fix this / give some advice for using babel when publishing npm modules?

Solution 1

According to the docs you need two modules:

• the transform plugin babel-plugin-transform-runtime (which you already have)

• and the actual runtime module which polyfills or otherwise enables the features at runtime (i.e. in the browser) is babel-runtime

you can add it as a (non-dev) dependency in package.json like

"babel-runtime": "^6.26.0"

, or just do

npm i babel-runtime --save

Other people seem to have the same problem with babel 6:

https://github.com/nozzle/react-static/issues/685

Solution 2

Kind of a turn it off and on again solution, but have you considered just using the Babel Upgrade tool to bump to Babel 7, and then adding anything additional you need from there?

https://github.com/babel/babel-upgrade

I was skeptical the first time I used this, but it has worked like a dream so far every time I run into one of these "can't find module babel plugin" errors.

Comments

[Thomas Smyth]

I just upgraded prior to reading this answer. I did it manually copying my work from a project I started the other week.

[Eric Walker]

Note that the module is now called @babel/runtime.