webpack2 code split error with import
when use extract-text-webpack-plugin #406
Description
when use code split with import in webpack2 , we can get the error, when remove import and use synchronous method to load page, the error disapper
envrioment
extract-text-webpack-plugin: 2.0.0-rc.3
webpack: 2.2.1
os: mac os 10
node:6.4
webpack.config.js
const webpackBaseConfig = {
context: basePath,
entry: entriesConfig,
output: {
filename: "[name].[hash:8].js",
//publicPath:'/'
},
plugins: [
new ExtractTextPlugin({
filename: '[name].[contenthash].css',
allChunks: true,
disable: false
}),
//Enables Hot Modules Replacement
new webpack.HotModuleReplacementPlugin(),
new TransferWebpackPlugin([
{from: 'static/static/images', to: 'static/images'},
{from: 'static/static/js', to: 'static/js'},
{from: 'static/static/html', to: 'static/html'},
{from: 'static/static/views', to: 'static/views'}
], sourcePath),
new webpack.LoaderOptionsPlugin({
debug: false
}),
new webpack.NamedModulesPlugin()
],
resolve: {
modules: [
basePath,
"node_modules"
],
extensions: [".js", ".json", ".jsx", ".css"],
},
module: {
rules: [
{
test: /\.js$/,
exclude: [nodeModulesPath],
include:[sourcePath],
loader: 'babel-loader',
options: {
presets: ['react', ['es2015', { "modules": false }], 'stage-0']
}
},
{
test: /\.css$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}]
},
{
test: /\.(png|jpg|eot|svg|ttf|woff|woff2)$/,
use: [{
loader: 'url-loader',
options: {
limit: 4000
}
}]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: 'css-loader'
}, {
loader: 'sass-loader'
}]
})
}
]
},
};
routes.js
/**
* @file index route for index.js
*/
import React from 'react'
import {Router, Route, IndexRoute} from 'react-router'
import App from '../pages/app'
import Main from '../pages/main'
const getComponentLazily = (importor, name = 'default') => {
return (location, cb) => {
importor.then((module) => {
//如果是默认模块,则是 module.default
cb(null, module[name]);
})
.catch((err) => {
console.error(`动态路由加载失败:${err}`)
});
}
};
var getRouters = (props) =>{
return (
<Router {...props} >
<Route path="/" component={App}>
<IndexRoute component={Main}/>
<Route path="/organization" getComponent={getComponentLazily(import('../../public_module/pages/organization'))}/>
</Route>
</Router>
)
}
export default getRouters;
result
TypeError: Cannot read property 'isInitial' of undefined
at ExtractTextPlugin. (/testuser/node_modules/extract-text-webpack-plugin/index.js:28:8)
at Array.forEach (native)
at ExtractTextPlugin.mergeNonInitialChunks (/testuser/node_modules/extract-text-webpack-plugin/index.js:27:16)
at ExtractTextPlugin. (/testuser/node_modules/extract-text-webpack-plugin/index.js:295:12)
at Array.forEach (native)
at ExtractTextPlugin. (/testuser/node_modules/extract-text-webpack-plugin/index.js:293:21)
at /testuser/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:356:16
at iteratorCallback (/testuser/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:936:13)
at /testuser/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:840:16
at /testuser/node_modules/extract-text-webpack-plugin/index.js:289:6
at /testuser/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:356:16
at iteratorCallback (/testuser/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:936:13)
at /testuser/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:840:16
at /testuser/node_modules/extract-text-webpack-plugin/index.js:286:13
at /testuser/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:3025:16
at eachOfArrayLike (/testuser/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:941:9)