语法错误：意外的令牌导入。 Webpack配置

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

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 */)}},

Answer 2

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\"",