CODEWITHSUNDEEP
webpackvisual-studio-code
TheSoul
TheSoul

Reputation: 5376

vscode: SyntaxError: Unexpected token {

I am sure there is something stupid I must be doing. Webpack fails to build with this error:

enter image description here

This is the offensive line in my webpack file:

enter image description here

It looks like webpack (at least the version I have) does not like this kind of syntax.

Here is my package.json

{
  "name": "react-typescript-es6-webpack2-postcss",
  "version": "0.0.2",
  "license": "MIT",
  "author": {
    "name": "Jose Quinto Zamora",
    "email": "[email protected]",
    "url": "https://blog.josequinto.com"
  },
  "description": "",
  "scripts": {
    "start": "set NODE_ENV=development && webpack-dev-server --open --config ./webpack/webpack.config.dev.js",
    "prebundle": "npm install",
    "bundle": "set NODE_ENV=production && webpack --progress --config ./webpack/webpack.config.prod.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "@types/axios": "^0.9.35",
    "@types/node": "^7.0.4",
    "@types/react": "^15.0.6",
    "@types/react-dom": "^0.14.22",
    "autoprefixer": "^6.7.2",
    "awesome-typescript-loader": "^3.0.0-beta.18",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^2.0.0-rc.2",
    "path": "^0.12.7",
    "postcss-custom-properties": "^5.0.2",
    "postcss-import": "^9.1.0",
    "postcss-loader": "^1.2.2",
    "postcss-nesting": "^2.3.1",
    "react-hot-loader": "^3.0.0-beta.3",
    "source-map-loader": "^0.1.6",
    "style-loader": "^0.13.1",
    "stylelint": "^7.8.0",
    "tslint": "^4.4.2",
    "tslint-react": "^2.3.0",
    "typescript": "^2.1.5",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.2.1",
    "webpack-visualizer-plugin": "^0.1.10"
  }
}

I am using vscode with typescript 2.1.6

Any help would be greatly appreciated

Upvotes: 0

Views: 8386

Answers (2)

Pytth
Pytth

Reputation: 4186

You are mixing up the different ways to import code. You can either:

const resolve = require('path').resolve;

or:

import { resolve } from 'path';

Though I will say – to remain consistent in APIs – that one should expect object restructuring to work the way you used it.

Upvotes: 2

José Quinto Zamora
José Quinto Zamora

Reputation: 2128

You probably have old version of node, check it with "node -v". You can upgrade from here: https://nodejs.org/en/

Second option could be to change you webpack config with:

var resolve = require('path').resolve;
var webpack = require('webpack');

Upvotes: 1

Related Questions