2

I have a react App for which I'd like to run its mocha specs (unit-tests) in a browser. I found this SO post and tried to apply same idea to my project. I came up with the following webpack config file:

webpack.config.test.js

const nodeExternals = require('webpack-node-externals');
const path = require('path');

const host = 'localhost';
const port = '8084';

module.exports = {
    target: 'web',
    externals: [nodeExternals()],
    entry: './specs/index.js',
    output: {
        filename: 'debug.bundle.js',
        path: path.join(__dirname, 'tests'),
        publicPath: `http://${host}:${port}/tests`,
    },
    devServer: {
        host,
        port,
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loaders: ['react-hot-loader', 'babel-loader'],
                enforce: 'pre',
            },
            {
                test: /.+Spec\.js$/,
                loaders: ['mocha-loader'],
            },
            {
                test: /(\.css|\.scss)$/,
                loader: 'null-loader',
                exclude: [
                    /build/,
                ],
            },
            {
                test: /(\.jpg|\.jpeg|\.png|\.gif)$/,
                loader: 'null-loader',
            },
        ],
    },
};

And, after starting the server with:

webpack-dev-server --config webpack.config.test.js

I get the following error in console:

enter image description here

I've read that the problem might be with webpack-node-externals but not really sure what's happening. Any ideas?

leo.fcx
  • 6,137
  • 2
  • 21
  • 37
  • did your try `import` instaed of `require`? – Jiang YD May 31 '17 at 05:28
  • @JiangYD, all my implementation is using `es6` sintax, `webpack` does the 'translation' through `babel-loader` – leo.fcx May 31 '17 at 21:54
  • but `import` is `es6`, `require` is not. – Jiang YD Jun 02 '17 at 06:31
  • @JiangYD, I think you need to read more about `webpack` and stuff related. Indeed `import ` is `es6` and I am using it, however, since I am trying to run my code/specs in a browser, `webpack` transpiles it to js-code that the browser understands (`es5`), and in that process is where `require` is introduced – leo.fcx Jun 02 '17 at 21:23

1 Answers1

0

I think you will want to use webpack-node-externals only when you bundle files for backend (as described in plugin README). When you use it you forbid it to build all modules from node_modules folder.

GProst
  • 9,229
  • 3
  • 25
  • 47