13

I have error in IE11 SCRIPT1002: Syntax error (problem with class syntax). My simple code with 2 lines: 

import { struct } from 'superstruct';
console.log('finished');

I wan't that my babel7 compile class into ES5 code

I have tried write .babelrc file : 

 {
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "11"
        }
      }
    ]
  ]
}

and https://babeljs.io/docs/en/babel-plugin-transform-classes haven't fixed too

Update : I have tried use @babel/plugin-preset-es2015 which convert class in ES5 code but this package is deprecated in babel7

Help me please

loganfsmyth
  • 156,129
  • 30
  • 331
  • 251
zloctb
  • 10,592
  • 8
  • 70
  • 89
  • do you have `@babel/core` also installed? – Tomasz Mularczyk Feb 25 '19 at 07:24
  • if you dont need you can exclude all node modules _except_ qs or include for compile – Overflowrun Feb 25 '19 at 07:26
  • "@babel/core": "^7.0.0 and { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules___(hardcode)____/ } but it didn't help – zloctb Feb 25 '19 at 07:45
  • 2
    Are you transpiling via babel directly, or using this with webpack? If you run `babel input.js > output.js` can you post the output with your configuration above? (babel-cli) (aside, so happy I don't have to support IE anymore at work) – Tracker1 Feb 25 '19 at 19:11
  • Have you tried the next version of [@babel/plugin-transform-classes](https://babeljs.io/docs/en/next/babel-plugin-transform-classes.html), can you provide your attempt at using this. – jaredrethman Mar 03 '19 at 18:05
  • I think targets should not be there. – snnsnn Mar 04 '19 at 04:44
  • 1
    @zloctb I've updated my answer with a more detailed explanation of how to solve this with webpack and babel.config.js. Let us know if you're using something else! – Garrett Johnson Mar 04 '19 at 09:30

1 Answers1

26

In order to transform node_modules and child packages in Babel 7 you need to use a babel.config.js file instead of a .babelrc file.

See this issue comment and the babel documentation on project-wide configuration. Specifically

New in Babel 7.x, Babel has as concept of a "root" directory, which defaults to the current working directory. For project-wide configuration, Babel will automatically search for a "babel.config.js" in this root directory.

...

Because project-wide config files are separated from the physical location of the config file, they can be ideal for configuration that must apply broadly, even allowing plugins and presets to easily apply to files in node_modules or in symlinked packages, which were traditionally quite painful to configure in Babel 6.x.

The short of it is that .babelrc is used for a local project file transformations (not including node_modules) while babel.config.js should be considered project-wide and will apply to package dependencies when bundling (node_modules). It's a bit confusing but hopefully that helps!

Edit

Here's a bit more information on a full project config to build your example file using webpack. Note that if you use .babelrc instead of babel.config.js here it will not work. Running webpack-cli produces a script script.out.js that does not use the class keyword.

script.js 
import { struct } from 'superstruct';
console.log('finished');
babel.config.js 
module.exports = {
    "presets": [
        [
            "@babel/preset-env",
            {
                    "targets": {
                    "ie": "11"
                }
            }
        ]
    ]
};
webpack.config.js 
module.exports = {
    entry: './script.js',
    output: {
        path: __dirname,
        filename: 'script.out.js',
    },
    module: {
        rules: [ {
            test: /\.m?js$/,
            use: {
                loader: 'babel-loader'
            }
        } ]
    }
}
Package Dependencies 
"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"babel-loader": "^8.0.5",
"superstruct": "^0.6.0",
"webpack-cli": "^3.2.3"
Community
  • 1
  • 1
Garrett Johnson
  • 2,413
  • 9
  • 17
  • Hi can u give some workoing NodeJS code on how to exactly do this? Simply runnign ransform isnt working: babel.transform – B''H Bi'ezras -- Boruch Hashem Mar 21 '19 at 09:06
  • 1
    This new behaviour is really stupid. It means dependencies can no longer tell their parent projects how to transpile them, which encourages library authors to ship ES5 instead of source. It's a gigantic step backwards. – Steve Jun 19 '19 at 17:07
  • 1
    How's that a step backward? What do you need to specify how it should be transpiled? I am intrigued. The consuming application knows best what they need to target and be control how your lib should be transpiled. An I missing something? – user1275105 Aug 10 '19 at 14:04