Webpack babel-loader runtime: Module build failed: TypeError: this.setDynamic is not a function

Question

I'm trying to use the babel-loader with the babel-plugin-transform-runtime.

I've followed the instructions at: https://github.com/babel/babel-loader#babel-is-injecting-helpers-into-each-file-and-bloating-my-code

The relevant code:

rules: [
  // the 'transform-runtime' plugin tells babel to require the runtime
  // instead of inlining it.
  {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/transform-runtime']
      }
    }
  }
]

And I get the following error on build:

Module build failed: Error: Cannot find module '@babel/plugin-transform-runtime'

If I'm changing the plugin name to: plugins: ['transform-runtime'], I get the following error:

Module build failed: TypeError: this.setDynamic is not a function

What is the problem?

score 14 · Accepted Answer · answered Jan 21 '18 at 15:21

After a struggle I've found the right way to do it.

Tl;dr

If you install the new babel loader, you should load the new babel plugins.

Full story

The install in the official docs: npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

In the github page, these were the instructions for the runtime plugin:

NOTE: You must run npm install babel-plugin-transform-runtime --save-dev to include this in your project and babel-runtime itself as a dependency with npm install babel-runtime --save.

Instead, you should use the new version like this: npm install --save-dev @babel/plugin-transform-runtime npm install --save @babel/runtime

Then it would work with the configuration in the documentation.

Roman · Answer 2 · 2021-07-20T01:20:59.377

First, as @yccteam pointed one needs to have installed

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

.babelrc file should have

{
  "presets": [
    ["@babel/preset-env", {
      "debug": false,
      "modules": false,
      "useBuiltIns": false
    }], 
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/syntax-dynamic-import",
    "@babel/plugin-transform-runtime",
    [ "@babel/plugin-proposal-class-properties", { "loose": true } ],
    "@babel/transform-async-to-generator"
  ],
  "env": {
    "production": {
      "presets": ["react-optimize"]
    }
  }
}

webpack.js file should look like

 module: {
  rules: [
    {
      test: /(\.js[\S]{0,1})$/i,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['@babel/preset-react', '@babel/preset-env'],
        plugins: ['@babel/proposal-class-properties']
      },
    },
    ...

Unsure if this a change that happened over the last year, so just want to flag that both `syntax-dynamic-import` and `transform-async-to-generator` need to be `@babel/syntax-dynamic-import` and `@babel/transform-async-to-generator` — fmsf, Dec 31 '19 at 17:28

score 0 · Answer 3 · answered Jan 21 '18 at 11:41

0

Your webpack entry looks the same as the example, so I wonder what happens if you use .babelrc.

{
   "plugins": ["transform-runtime"]
}

Do you have the env preset installed as well?

answered Jan 21 '18 at 11:41

1

The env preset works fine. Actually, the whole project compiles well without the `runtime` plugin. If I use `.babelrc` and remove this plugin from `babel-loader` config, it has the same error. – yccteam Jan 21 '18 at 11:50
What happens if you change the loader line to: `loader: 'babel',`. I think I read somewhere a while back that was a fix, could be thinkiing of something else though. – Jan 21 '18 at 12:03
Doesn't work either. `Module not found: Error: Can't resolve 'babel'` – yccteam Jan 21 '18 at 12:12
2

the current verison of babel, 7.4.0, uses namespaced packages, so you would have to list this plugin as `@babel/plugin-transform-runtime`, even in the babelrc dotfile – worc Mar 27 '19 at 20:56

Webpack babel-loader runtime: Module build failed: TypeError: this.setDynamic is not a function

3 Answers3