CODEWITHSUNDEEP
javascriptreactjsbabeljsbabel-loader
Dave Kalu
Dave Kalu

Reputation: 1595

Unexpected token import(ReactJS & Babel)

When I try to run my application, I get following error: (function (exports, require, module, __filename, __dirname) { import { Row } from '../grid' SyntaxError: Unexpected token import

I tried a couple of stackoverflow answers that suggested I install babel-plugin-transform-es2015-modules-commonjs babel-plugin-transform-class-properties babel-preset-es2015

then configure my babel-rc file as such:

{
  "presets": ["env", "es2015", "react", "stage-2"],
  "plugins": [
    ["transform-es2015-modules-commonjs"],
    ["transform-class-properties"],
    [
      "import",
      { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }
    ]
  ]
}

But none of these has worked.

Here is the snippet of my webpack.config.js that should configure babel-loader to transpile .jsx|.js

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

Upvotes: 0

Views: 1399

Answers (2)

Shashank Agarwal
Shashank Agarwal

Reputation: 21

Your .babelrc should look like

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

if you have not already added babel to dev dependencies, run

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

OR

yarn --dev add @babel/core babel-loader @babel/preset-env @babel/preset-react

this would ensure you have the latest versions of all the required dependencies.

Upvotes: 0

Deadron
Deadron

Reputation: 5289

Your .babelrc should look like 

{
  "presets": [
    "@babel/env",
    "@babel/react"
  ]
}

Which means you should have 

"@babel/core": "^7.0.0"
"@babel/preset-env": "^7.0.0"
"@babel/preset-react": "^7.0.0"

as dev dependencies.

This all that is necessary to enable the standard features in babel including import and JSX support. Remove any babel packages that are not these three unless you are also using babel pollyfills.

Upvotes: 2

Related Questions