Reactjs 导入后加载模块域时出现网页包错误
我有一个带有TypeScript和React 0.14的项目 我用karma/mocha/chai设置了测试环境。以及它的工作。但当我从Ezyme导入并使用该函数时,浏览器中出现了错误(Chrome中的人类可读错误): 据我所知,模块227…232(内部DomUtils文件)在使用前未加载 也许我忘了什么?或者有人知道变通方法吗 抱歉,配置太多: 网页包配置:Reactjs 导入后加载模块域时出现网页包错误,reactjs,typescript,webpack,cheerio,enzyme,Reactjs,Typescript,Webpack,Cheerio,Enzyme,我有一个带有TypeScript和React 0.14的项目 我用karma/mocha/chai设置了测试环境。以及它的工作。但当我从Ezyme导入并使用该函数时,浏览器中出现了错误(Chrome中的人类可读错误): 据我所知,模块227…232(内部DomUtils文件)在使用前未加载 也许我忘了什么?或者有人知道变通方法吗 抱歉,配置太多: 网页包配置: var webpack = require("webpack"), path = require("path"), E
var webpack = require("webpack"),
path = require("path"),
ExtractTextPlugin = require("extract-text-webpack-plugin"),
precss = require('precss'),
autoprefixer = require('autoprefixer');
module.exports = {
entry: [
path.resolve(__dirname, "app/app.tsx")
],
output: {
filename: "bundle.js",
publicPath: "/build/",
path: path.resolve(__dirname, "build")
},
module: {
loaders: [
{test: /\.json$/, loader: 'json'},
{test: /\.tsx$/, exclude: /node_modules/, loader: 'es3ify!ts'},
{test: /\.s?css$/, loader: ExtractTextPlugin.extract('style', 'css!postcss')},
{test: /\.svg|eot|ttf|woff|woff2|ico|png|gif|jpg($|\?)/, loader: 'file'}
]
},
postcss: function () {
return [precss, autoprefixer];
},
resolve: {
root: path.resolve(__dirname, "app"),
extensions: ["", ".js", ".ts", ".tsx", ".json"]
},
plugins: [
new ExtractTextPlugin("bundle.css")
]
};
业力配置:
var webpack = require('webpack');
var webpackConfig = require('./webpack.config');
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai', 'sinon'],
files: [
'app/**/*-test.tsx'
],
exclude: [],
preprocessors: {
'app/**/*.tsx': ['webpack']
},
webpack: {
resolve: webpackConfig.resolve,
module: webpackConfig.module,
externals: {
'cheereo': 'window',
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
}
},
reporters: ['progress', 'spec'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['PhantomJS'],
singleRun: true,
concurrency: Infinity
})
}
测试文件:
import * as React from 'react';
import { shallow } from 'enzyme';
describe('Dashboard', () => {
it('should be OK', () => {
const instance = shallow(<div />);
expect(true).to.equal(true, 'true === true');
});
});
import*as React from'React';
从“酶”导入{shall};
描述('仪表板',()=>{
它('应该可以',()=>{
const instance=shallow();
expect(true).to.equal(true,'true==true');
});
});
网页包导入链:酶->…->干杯->…->多穆蒂尔斯
StackOverflow是我解决这个问题的最后一次机会,Google不知道答案。我也遇到过同样的问题,对我来说,将
domutils
作为extrenal放在网页包配置中是有帮助的。根据您的配置,尝试以下操作:
webpack: {
resolve: webpackConfig.resolve,
module: webpackConfig.module,
externals: {
'domutils': 'true',
'cheereo': 'window',
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
}
}
webpack: {
resolve: webpackConfig.resolve,
module: webpackConfig.module,
externals: {
'domutils': 'true',
'cheereo': 'window',
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
}
}