CODEWITHSUNDEEP
node.jsnpmwebpackbabeljs
Ben Haynie
Ben Haynie

Reputation: 125

Webpack/Babel giving Unexpected Token error

I have a project written using React and Webpack, and when I try to run my build, I am given a "Unexpected Token" error. The odd thing about this is that I am getting this error on one of my machines, but not on the other.

Background: I have two different environments.
One is my development machine (Windows 10 professional) The other is my build server (Windows 10 standard)

On both machines I have completely uninstalled Node, npm, etc. I have re-installed the latest version of Node (Node version 6.2.1, npm version 3.9.3).

When I run my build command on my development environment, everything works fine. When I run my build on the build environment, I get an error "unexpected token. You may need an appropriate loader to handle this file time").

It appears that the error is occurring when it is trying to work with the jsx in babel.

My webpack.prod.config.js file looks like the following:

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

module.exports = {
  entry: {
    main: [
      './dev/js/app/app',
    ]
  },
  output: {
    filename: 'scripts.js',
    path: './.tmp/js/',
    publicPath: '/js/'
  },
  resolve: {
    modulesDirectories: ['node_modules'],
    root: path.resolve('./dev/js/app'),
    extensions:         ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|build)/,
        loader: 'babel'
      },
      {
        test: /\.jsx?$/,
        loader: "eslint-loader",
        exclude: /(node_modules|build)/
      },
      {
        "test": /\.json$/,
        "loader": "json"
      },
    ],
    eslint: {
      configFile: '.eslintrc.js'
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        // This has effect on the react lib size
        'NODE_ENV': JSON.stringify('production'),
      }
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(true),
    new webpack.optimize.UglifyJsPlugin({
      minimize: true,
      compress: {
        screw_ie8: true,
        warnings: false
      },
      comments: false
    }),
    new webpack.IgnorePlugin(/regenerator|nodent|js\-beautify/, /ajv/),
  ],
};

My package.json looks like the following:

{
  "name": "ridesystems-admin",
  "version": "0.0.1",
  "description": "Ride Systems Admin App",
  "private": true,
  "main": "start.js",
  "scripts": {
    "start": "node --use_strict start.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "npm run webpack-dev & npm run watch-sass",
    "webpack-dev": "webpack-dev-server --progress --colors --inline --content-base dev/ --history-api-fallback",
    "watch-sass": "nodemon -e scss -x \"npm run compile-sass\"",
    "compile-sass": "node-sass --include-path scss dev/css/scss/main.scss  dev/css/main.css --sourceMap true",
    "build": "npm run clean-build && npm run copy && npm run build:styles && npm run build:scripts && npm run reversion",
    "build:styles": "npm run build-sass",
    "build:scripts": "npm run pack-js && npm run uglify-js",
    "copy": "npm run copy:dist",
    "copy:dist": "cpx \"./dev/**/*.{html,png,gif,jpg,ico,asp}\" ./build/",
    "reversion": "node ./bin/reversion",
    "clean-build": "rimraf build",
    "build-sass": "node-sass --include-path scss dev/css/scss/main.scss  build/css/main.css --outputStyle compressed",
    "pack-js": "webpack --config ./webpack.prod.config.js",
    "uglify-js": "mkdirp build/js && uglifyjs .tmp/js/scripts.js > build/js/scripts.js --screw-ie8"
  },
  "author": "John Reynolds",
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-eslint": "^6.0.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-syntax-decorators": "^6.5.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",
    "clean-css": "^3.4.17",
    "cpx": "^1.2.1",
    "eslint": "^2.12.0",
    "eslint-config-standard": "^5.1.0",
    "eslint-config-standard-react": "^2.4.0",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-promise": "^1.3.2",
    "eslint-plugin-react": "^5.1.1",
    "eslint-plugin-standard": "^1.3.2",
    "json-loader": "^0.5.4",
    "mkdirp": "^0.5.1",
    "node-sass": "3.7.0",
    "node-version-assets": "^1.1.0",
    "nodemon": "^1.9.1",
    "rimraf": "^2.5.2",
    "serve-static": "^1.11.1",
    "uglifyjs": "^2.4.10",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-notifier": "^1.3.0"
  },
  "dependencies": {
    "ajv": "^4.1.3",
    "animate-sass": "git+https://github.com/tgdev/animate-sass.git",
    "axios": "^0.12.0",
    "babel-preset-react": "^6.5.0",
    "bootstrap-sass": "^3.3.6",
    "classnames": "^2.2.5",
    "font-awesome": "^4.6.3",
    "jquery": "^3.0.0",
    "lodash": "^4.13.1",
    "moment": "^2.13.0",
    "querystring": "^0.2.0",
    "react": "^15.1.0",
    "react-addons-css-transition-group": "^15.1.0",
    "react-body-classname": "^1.0.1",
    "react-dom": "^15.1.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.4.1",
    "react-router-redux": "^4.0.5",
    "redux": "^3.5.2",
    "redux-form": "^5.2.5",
    "redux-thunk": "^2.1.0"
  }
}

Any ideas what could be causing this error?

Here is the output I get from Node:

ERROR in ./dev/js/app/app.js
Module parse failed: C:\TeamCity\buildAgent\work\9785690cbd035ffb\dev\js\app\app.js Unexpected token (27:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (27:2)
    at Parser.pp.raise (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:923:13)
    at Parser.pp.unexpected (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:1490:8)
    at Parser.pp.parseExprAtom (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:333:12)
    at Parser.pp.parseExprSubscripts (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:228:19)
    at Parser.pp.parseMaybeUnary (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:207:17)
    at Parser.pp.parseExprOps (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:154:19)
    at Parser.pp.parseMaybeConditional (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:136:19)
    at Parser.pp.parseMaybeAssign (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:112:19)
    at Parser.pp.parseExprList (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:660:23)
    at Parser.pp.parseSubscripts (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:252:29)
    at Parser.pp.parseExprSubscripts (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:231:15)
    at Parser.pp.parseMaybeUnary (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:207:17)
    at Parser.pp.parseExprOps (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:154:19)
    at Parser.pp.parseMaybeConditional (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:136:19)
    at Parser.pp.parseMaybeAssign (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:112:19)
    at Parser.pp.parseExpression (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:88:19)
    at Parser.pp.parseStatement (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:1771:23)
    at Parser.pp.parseTopLevel (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:1666:21)
    at Parser.parse (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:1632:17)
    at Object.parse (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\acorn\dist\acorn.js:885:44)
    at Parser.parse (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
    at nextLoader (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
    at C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
    at Storage.finished (C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
    at C:\TeamCity\buildAgent\work\9785690cbd035ffb\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3)
 @ multi main

Upvotes: 1

Views: 1994

Answers (1)

Nick H.
Nick H.

Reputation: 56

There is currently a bug in Node 6+ on some Windows machines that seems to fail loading the babel loader even when the config is correct. Some suggestions that seem to have helped are;

deleting the node_modules folder and/or running "npm cache clean" in your terminal and then reinstalling your repo via "npm install".

That did not work for me, however downgrading my version of Node did.

If you want to make sure that your configs are correct; downgrade to Node 5.12 and run your code. It seems to be stable and not experiencing this issue. Just be aware that pre-Node 6 doesn't support some of the nice ES2015 syntax features.

Also be aware that this is not a resolution but a viable workaround until a specific cause is identified. Hope it helps!

Upvotes: 1

Related Questions