导入酶后加载模块DomUtils时出现Webpack错误 [英] Webpack error while loading module DomUtils after import enzyme

问题描述

我有一个带有TypeScript和React 0.14的项目.

I have a project with TypeScript and React 0.14.

然后我用业力/摩卡/柴建立了测试环境.及其工作.但是，当我从酶导入并使用函数时，浏览器出现错误(Chrome的人为错误):

And I set-up test enviroment with karma/mocha/chai. And its work. But when I import and use function from enzyme I got error in browser (Human-readable error from Chrome):

Uncaught TypeError: ext[key].bind is not a function

据我了解，模块227 ... 232(内部DomUtils文件)在使用前未加载.

As I understood modules 227...232 (internal DomUtils files) not loaded before using.

也许我忘记了什么?还是有人知道解决方法?

Maybe I forgot something? Or does anyone know workaround?

对不起，大量的配置:

Webpack配置:

Webpack config:

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');
  });
});

Webpack导入链:酶-> ...->优胜劣汰-> ...-> DomUtils

Webpack import chain: enzyme -> ... -> cheerio -> ... -> DomUtils

StackOverflow是我解决问题的最后机会，Google不知道答案.

StackOverflow my last chance to solve the problem, Google don't know answer.

推荐答案

我也遇到过同样的问题，对我来说，将 domutils 作为外部组件放在webpack配置中是有帮助的.根据您的配置，尝试以下操作:

I've faced with same issue, for me it helps to put domutils as extrenal in webpack configuration. Based on your config try this:

webpack: {
    resolve: webpackConfig.resolve,
    module: webpackConfig.module,
    externals: {
      'domutils': 'true',
      'cheereo': 'window',
      'react/addons': true,
      'react/lib/ExecutionEnvironment': true,
      'react/lib/ReactContext': true
    }
}

这篇关于导入酶后加载模块DomUtils时出现Webpack错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！