CODEWITHSUNDEEP
reactjswebpackbabeljsunexpected-token
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

Babel-loader: unexpected token

I have inherited react a project that i'm am unable to init.

The problem I had at first ( running yarn dev) was:

let vdom = <Desktop />;
enter image description here

After reading this accepted anwer: babel-loader jsx SyntaxError: Unexpected token

I changed in webpack.config.js this:

module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader",
          query: { presets: ["es2015", "stage-0"] },
        },

To:

module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader",
          query: { presets: ["react"] },
        },

Obviously installing babel-loader-react first.

And now the error I'm facing is different "unexpected token":

Any though on what could be miss-configured?

enter image description here
(there are serveral similar ones; arrow functions and object notation)

This is the (original) package.json that I recived

{
  "name": "Project-name", #can't share
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --host 0.0.0.0",
    "build": "NODE_ENV=prod webpack -p"
  },
  "author": "Author", #can't share
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-react-jsx": "^6.8.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-register": "^6.14.0",
    "babel-runtime": "^6.11.6",
    "copy-webpack-plugin": "^4.0.1",
    "core-js": "^2.4.1",
    "css-loader": "^0.26.1",
    "eslint": "^3.0.1",
    "extract-text-webpack-plugin": "^2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.26.0",
    "node-sass": "^4.7.2",
    "postcss-loader": "^1.2.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.0-rc.6",
    "webpack-dev-server": "^2.2.0-rc.0"
  },
  "dependencies": {
    "babel-plugin-webpack-loaders": "^0.9.0",
    "gsap": "^3.0.5",
    "lax.js": "^1.2.5",
    "pixi.js": "^5.2.0",
    "preact": "^7.2.0",
    "preact-render-to-string": "^3.7.0",
    "promise-polyfill": "^6.0.2",
    "scrollmagic": "^2.0.7",
    "scrollmagic-plugin-gsap": "^1.0.4",
    "unfetch": "^2.1.2",
    "webpack-node-externals": "^1.6.0"
  }
}

Upvotes: 2

Views: 1649

Answers (1)

brijesh-pant
brijesh-pant

Reputation: 1145

You should keep the presets that were already present query: { presets: ["latest", "react"] }, Also, I'm assuming you have these packages installed as devDependencies

babel-core,
babel-loader,
babel-preset-react,
babel-preset-latest

Looks like babel-preset-stage-0 that you're using above doesn't provide the transform plugins for classes(specifically the error you shown above https://babeljs.io/docs/en/babel-plugin-transform-class-properties). Try using https://babeljs.io/docs/en/6.26.3/babel-preset-latest. It should have all the presets that you want to use. You can also try using https://babeljs.io/docs/en/babel-preset-env

Also, please read https://blog.jakoblind.no/babel-preset-env/

Upvotes: 1

Related Questions