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.

Answer 2

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']
      },
    },
    ...