SyntaxError: Unexpected token import. Webpack configuration

Question

I am not sure how to fix this SyntaxError caused by my import. I do not think I configured my webpack properly and unsure of how to fix it

ERROR

/Users/bradfordli/Development/projects/businesses/jifts/jifts/app/tools/index.test.js:1
(function (exports, require, module, __filename, __dirname) { import expect from 'expect';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at /Users/bradfordli/Development/projects/businesses/jifts/jifts/node_modules/mocha/lib/mocha.js:230:27
    at Array.forEach (native)
    at Mocha.loadFiles (/Users/bradfordli/Development/projects/businesses/jifts/jifts/node_modules/mocha/lib/mocha.js:227:14)
    at Mocha.run (/Users/bradfordli/Development/projects/businesses/jifts/jifts/node_modules/mocha/lib/mocha.js:513:10)
    at Object.<anonymous> (/Users/bradfordli/Development/projects/businesses/jifts/jifts/node_modules/mocha/bin/_mocha:480:18)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:389:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:504:3
npm ERR! Test failed.  See above for more details.

index.test.js

import expect from 'expect';

describe('First', () => {
    it('pass', () => {
        expect(true).toEqual(true);
        });
});

package.json

{
  "name": "jifts",
  "version": "1.0.0",
  "description": "Share, don't waste.",
  "main": "index.js",
  "scripts": {
    "test": "./node_modules/.bin/mocha --reporter progress app/tools/testSetup.js \"app/**/*.test.js\"",
    "build": "",
    "watch": "./node_modules/.bin/webpack --watch --progress",
    "start": "./node_modules/.bin/npm-run-all --parallel lint:watch",
    "lint": "./node_modules/.bin/esw webpack.config* app",
    "lint:watch": "npm run lint -- --watch"
  },
  "author": "Bradford Li",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.25.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router": "^4.1.2",
    "redux": "^3.7.2"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.24.1",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.4",
    "eslint": "^4.3.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-react": "^7.1.0",
    "eslint-watch": "^3.1.2",
    "expect": "^1.20.2",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.30.1",
    "mocha": "^3.5.0",
    "npm-run-all": "^4.0.2",
    "style-loader": "^0.18.2",
    "webpack": "^3.4.1",
    "webpack-bundle-tracker": "^0.2.0",
    "webpack-dev-server": "^2.6.1"
  }
}

webpack.config

import path from 'path'
import webpack from 'webpack';
import BundleTracker from 'webpack-bundle-tracker';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';

module.exports = {
    entry: {
        app: './app/index.js'
    },
    devtool: 'inline-source-map',
    target: 'web',
    output: {
        path: path.resolve('./app/bundles/'), // Note: Physical files will not be created during development. Files are served in memory
        filename: '[name]-[hash].js'
    },
    plugins: [
        new CleanWebpackPlugin(['./app/bundles/']),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        }),
        new BundleTracker({
            filename: './webpack-stats.json'
        }),
        // allows all kinds of modules to be updated at runtime without the need for a full refresh
        new webpack.HotModuleReplacementPlugin(),
        // Keeps errors from breaking our Hot Reload experience
        new webpack.NoErrorsPlugin()

    ],
    // Tells webpack-dev-server to serve file from the app directory on localhost:8080
    devServer: {
        contentBase: './app',
        // required for HotModuleReplacement
        hot: true

    },
    module: {
        rules: [
            {test: /\.js$/, use: {loader: 'babel-loader'}},
            {test: /\.css$/, use: ['css-loader', 'style-loader']},
            {test: /\.(png|svg|jpg|gif)$/, use: ['file-loader']},
            // for fonts
            {test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader']}
        ]
    }
};

.babelrc

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [
            "last 2 Firefox versions",
            "last 2 Chrome versions",
            "Firefox ESR",
            "last 3 Safari versions",
            "last 2 iOS versions",
            "ie 11"
          ]
        }
      }
    ],
    "react",
    "es2015"
  ]
}

project structure

Answer 1

I was getting this error because mocha was not using babel and did not know how to interpret es6

Changed this in my package.json. Added: --compilers js:babel-core/register

"test": "./node_modules/.bin/mocha --compilers js:babel-core/register --reporter progress app/tools/testSetup.js \"app/**/*.test.js\"",

Answer 2

import is likely not being recognized because transpilation from ES2015 via babel is not occurring. This may have to do with the location of your .babelrc. If .babelrc is not in the same directory as webpack.config.js, you either have to move it or load it manually:

{test: /\.js$/, use: {loader: 'babel-loader', options: require(/* path to babelrc */)}},