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?

Answer 1

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 [email protected] @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.