使用Webpack / Babel运行业力时出现``意外字符串''

Question

I'm trying to run karma using webpack to preprocess code with babel that can then be tested with mocha. However whenever I run it I get errors.

spec/tests.spec.js:

import 'chai/register-expect';

karma.conf.js:

const webpackConfig = require('./webpack.config.js');

const tests = './spec/**/*.spec.js'

module.exports = function(config) {
  config.set({
    singleRun: true,
    browsers: ['Chrome'],
    frameworks: ['mocha'],
    files: [
      tests
    ],
    preprocessors: {
      tests: ['webpack'],
    },
    webpack: webpackConfig,
  })
}

webpack.config.js:

module.exports = {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', {
            'modules': false
          }]
        }
      }
    ]
  }
}

When I run karma I get the following output:

'Uncaught SyntaxError: Unexpected string\\nat http://localhost:9876/base/spec/tests.spec.js?af68737606dd067ef21aa6efadfc004fb1d05454:1:8 \\n

Which corresponds to the import line.

If I remove all es6 code from the test, then it runs successfully, implying that webpack/babel isn't being invoked properly.

Any ideas why this isn't working?

Answer 1

So it was nothing to do with any of the tools, and turned out to be a JS gotcha.

In karma.conf.js I was doing:

const tests = './spec/**/*.spec.js'
...
    preprocessors: {
      tests: ['webpack'],
    }

The problem here is that tests as an object key translates to the string "tests" .

The solution was to use:

preprocessors: {
  [tests]: ['webpack'],
}

So that tests gets expanded properly to the variable value.