Babel 6 transform-runtime: $export is not a functi

Question

I'm trying to incorporate Babel's transform-runtime to make my code compatible with IE9. But since integrating it, the code won't even run on Chrome. I get the error Uncaught TypeError: $export is not a function on es6.object.define-property.js:3. Without the "transform-runtime" line in my .babelrc, everything runs fine. Any ideas?

Here is my .babelrc:

{
  "plugins": [
    "transform-runtime"
  ],
  "presets": [
    "es2015",
    "react"
  ]
}

And my webpack.config.js:

var webpack = require('webpack');

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
  entry: {
    EventAdmin: './src/event_admin',
    EventRender: './src/event_render'
  },
  output: {
    path: '../public/js2',
    filename: '[name].js' // Template based on keys in entry above
  },
  externals: {
    // require("jquery") is external and available
    //  on the global var jQuery
    'jquery': 'jQuery'
  },
  plugins: [commonsPlugin],
  devtool: 'source-map',
  module: {
    loaders: [
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
    ]
  }
};

Answer 1

Hello I have the same issue and finally found a solution that works for me. See:

loaders: [
  {
    test: /.js/,
    loader: 'babel',
    query: {
      presets: ['es2015', 'es2017'],
      plugins: [
        ['transform-runtime', {
          helpers: false,
          polyfill: false,
          regenerator: true, }],
        'transform-es2015-destructuring',
        'transform-object-rest-spread',
        'transform-async-to-generator',
        ],
     },
  },
]

See the 'transform-runtime' part. I hope this helps.

Answer 2

For those of you who are using webpack, make sure to no include the node_modules folder with the following in your webpack configuration file:

module: {
  rules: [
    {
      test: /\.js$/,
      // With this line, make sure you only include your javascript
      // source files
      include: [ path.resolve(__dirname, './src') ],
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env'],
          plugins: ['transform-runtime']
        }
      }
    }
  ]
}

Answer 3

It looks to be a problem with running core-js files through Babel 6 because Babel 6 no longer converts require('something') to require('something').default as Babel 5 did. I even tried running it through this plugin https://www.npmjs.com/package/babel-plugin-add-module-exports but no matter what I did, it wouldn't correct the require statements properly. I ultimately just had to exclude the core-js and various Babel related files from being processed by the babel-loader by setting the exclude property to this:

[ /node_modules\/babel-/m, /node_modules\/core-js\//m, /node_modules\/regenerator-runtime\//m ]

As a side note, I hadn't reinstalled my node_modules since converting to Babel 6 and that caused the same issue but for some other mysterious reason.

Answer 4

Have you install also the babel-runtime?

I just installed both and added the plugin in the .babelrc and it worked out.

Answer 5

At first you must installed babel-plugin-transform-runtime and then use it like me:

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

After it you must add exclude key to your babel-loader inside webpack configuration file:

{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: [
        {
            loader: 'babel-loader',
        }
    ]
}

Attention: please write /node_modules/ not /(node_modules\/)/ or /node_modules\//, it's weird but this way works.

Answer 6

Try adding exclude: /node_modules/ after loader: 'babel-loader'. I had the same problem when trying to run the runtime transformer without excluding node_modules. I am not aware of the underlying problem, though.