Cannot find module that's been specified in babel.config.json

Question

I'm new to using Babel but have installed it according to the Installation guide here https://babeljs.io/setup#installation

It says at the end that you need to install plugins in order for it to work:

Now, out of the box Babel doesn't do anything ... You will need to add plugins for Babel to do anything.

I want to use this plugin: https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator to fix some Internet Explorer 11 issues as described here: async function declaration expects ';' in Internet Explorer

I've created a file in the root of my project called babel.config.json and added the following to it.

{
    "plugins": ["@babel/plugin-transform-async-to-generator"]
}

My package.json contains this:

"scripts": {
     "build": "babel webroot/js -d webroot/js/babel"
},
"devDependencies": {
     "babel-cli": "^6.0.0"
},

When I execute npm run build from my project root it gives the following error messages.

Error: Cannot find module '@babel/plugin-transform-async-to-generator' from '/Users/andy/my-project'

Prior to creating babel.config.json I was able to run npm run build without getting any errors. As per the quote this doesn't really do anything other than output the same JavaScript as I had before transpiling it. But I knew that the process worked - in my case the input files are in webroot/js and it outputs the equivalent transpiled files to webroot/js/babel.

I don't understand how to fix this error. Is this some issue with my config file or is additional setup needed?

I've read the documentation on Babel Config Files at https://babeljs.io/docs/en/config-files and found this incredibly convoluted. My goal is to have a configuration file per project, which is why I opted for babel.config.json

npm version is 6.13.4, node version is 12.16.1.

Answer 1

babel-cli is outdated, you should install @babel/cli instead. It also has a peer dependency on @babel/core which you need to install as well. @babel/plugin-transform-async-to-generator plugin needs to be installed separately.

Summarizing:

• Uninstall outdated babel-cli:

npm uninstall --save-dev babel-cli

• Install the required packages:

npm install --save-dev @babel/cli @babel/core @babel/plugin-transform-async-to-generator

---

Regarding your problem with IE 11. @babel/plugin-transform-async-to-generator won't fix your issue. IE 11 doesn't support yield.

If you want to use the latest ECMAScript features and still support a wide range of browsers you should instead use @babel/preset-env. You can check out the docs on the official website: @babel/preset-env.

For async to work in IE 11 you will also need to setup polyfills. @babel/preset-env won't use them with default settings. Look under useBuiltIns option for instructions.

---

Additionally, there's a problem with your build script, specifically with this line: babel webroot/js -d webroot/js/babel.

With such a command babel will process whole webroot/js directory (including subdirectories) and place transpiled files to webroot/js/babel. This means that after you run this command again it will process not only your original source files but also transpiled source files because webroot/js/babel is a subdirectory of webroot/js.

Answer 2

I think you need to install @babel/plugin-transform-async-to-generator. More here: https://www.npmjs.com/package/@babel/plugin-transform-async-to-generator#install

npm install --save-dev @babel/plugin-transform-async-to-generator