SourceNode.fromSourceWithMap 不是 mocha-env-loader 中的函数答案

【问题标题】：SourceNode.fromSourceWithMap is not a function in mocha-env-loaderSourceNode.fromSourceWithMap 不是 mocha-env-loader 中的函数
【发布时间】：2017-09-04 07:08:22
【问题描述】：

我正在尝试通过通用路由将 Karma 集成到 React 中。由于在 karma webpack 中使用通用块时出错，我删除了通用块插件

https://github.com/webpack-contrib/karma-webpack/issues/24#issuecomment-257613167

我现在的错误是：

Uncaught Error: Module build failed: TypeError: SourceNode.fromSourceWithMap is not a function
      at Object.module.exports (/Users/jgs/Projects/react/MyApp/node_modules/karma-webpack/lib/mocha-env-loader.js:16:29)

是否可以将 karma webpack 与 react 和文件分块一起使用？

【问题讨论】：

标签： reactjs karma-mocha chunking karma-webpack

【解决方案1】：

如果您使用 karma-webpack_2 npm 模块，在 karma-webpack 中使用分块的问题似乎得到了解决。

配置我的 karma 配置并重用 webpack 配置中的 module.rules 数组还有其他工作。

https://github.com/jackygrahamez/react-starter-kit/blob/master/karma.conf.js

const webpackConfig = require('./tools/webpack.config').default[0];

// let commonsChunkPluginIndex = webpackConfig[0].plugins.findIndex(plugin => plugin.chunkNames);
// webpackConfig[0].plugins.splice(commonsChunkPluginIndex, 1);
// commonsChunkPluginIndex = webpackConfig[0].plugins.findIndex(plugin => plugin.chunkNames);
// webpackConfig[0].plugins.splice(commonsChunkPluginIndex, 1);

// let module = webpackConfig;
// console.log(webpackConfig);
webpackConfig.module.rules.push({ test: /\.js$/, loader: 'babel-loader' })
module.exports = function(config) {
    config.set({

        browsers: [ 'Chrome' ], //run in Chrome
        singleRun: true, //just run once by default
        // ... normal karma configuration
        frameworks    : ['mocha'],
        // reporters     : ['mocha'],
        files: [
            // all files ending in "_test"
            'src/*test.js',
            'src/**/*test.js'
            // each file acts as entry point for the webpack configuration
        ],

        preprocessors: {
            // add webpack as preprocessor
            'src/*test.js': ['webpack'],
            'src/**/*test.js': ['webpack']
        },

        // webpack: {
        //     // you don't need to specify the entry option because
        //     // karma watches the test entry points
        //     // webpack watches dependencies

        //     // ... remainder of webpack configuration (or import)
        // },

        // webpack: webpackConfig,
        webpack: {
          devtool: 'inline-source-map',
          // module: {
          //   loaders: [
          //     { test: /\.js$/, loader: 'babel-loader' },
          //     { test: /\.jsx?$/, loader: 'babel-loader' },
          //     { test: /\.css/, loader: 'isomorphic-style-loader' },
          //     // { loader: 'css-loader' },
          //     // { test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/, loader: 'file-loader' },
          //     // { test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/, loader: 'url-loader' }
          //   ]
          // }
         module: webpackConfig.module 
        },        

        webpackMiddleware: {
            // webpack-dev-middleware configuration
            // i.e.
            noInfo: true,
            // and use stats to turn off verbose output
            stats: {
                // options i.e. 
                chunks: false
            }
        },

        plugins: [
            require("karma-webpack"),
            require('karma-mocha'),
            require('karma-chrome-launcher')
        ]

    });
};

【讨论】：