Webpack-Fehler beim Laden des Moduls DomUtils nach dem Import-Enzym

Question

Ich habe ein Projekt mit TypeScript und React 0.14.

Und ich Setup-Test-Umgebung mit Karma/Mocha/Chai. Und seine Arbeit. Aber als ich und verwenden Sie die Funktion von Enzyme importieren habe ich Fehler in Browser (Human lesbarer Fehler von Chrome):

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

Wie ich Module 227 verstanden ... 232 (internen DomUtils-Dateien) nicht vor der Verwendung geladen.

Vielleicht habe ich etwas vergessen? Oder kennt jemand Workaround?

Sorry für große configs:

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") 
    ] 
}; 

Karma config:

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

Testdatei:

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 Import Kette: Enzym -> ... -> cheerio ->. .. -> DomUtils

StackOverflow meine letzte Chance, das Problem zu lösen, weiß Google Antwort nicht.

Answer 1

Ich habe mit dem gleichen Problem konfrontiert, für mich hilft es, domutils als externe Webpack-Konfiguration zu setzen. Basierend auf Ihrer Konfiguration versuchen Sie dies:

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