Question

我的代码遇到了错误

ReferenceError: System is not defined

排队

<IndexRoute getComponent={(nextState, cb) => System.import('./containers/Home').then(module => cb(null, module))} />

如何定义System。它与我的webpack设置有关吗？我在这里怎么说

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var stylus = require('stylus');

module.exports = {
    debug: true,
    devtool: 'eval',
    entry: {
        "vendor": ["react", "react-router", 'react-dom'],
        "app": ['webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', './app/App.js']
    },
    output: {
        pathinfo: true,
        path: path.resolve(__dirname, 'public'),
        filename: '[name].js',
        publicPath: 'http://localhost:3000/'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Welcome!',
            template: './index_template.ejs',
            inject: 'body'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            output: {
                comments: false
            },
            compress: {
                warnings: false
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',
          minChunks: Infinity,
          filename: 'vendor.bundle.js'
        })
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loaders: ['react-hot', 'babel']
            },
            {
                test: /\.styl$/,
                exclude: /(node_modules|bower_components)/,
                // loader: 'style!css?resolve url?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]!postcss!stylus-loader'
                loader: 'style!css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]!postcss!stylus-loader'
            },
            {
                test: /\.(png|jpg)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'url-loader?name=images/[name].[ext]&limit=8192'
            },
            {
                test: /\.(ttf|otf|eot)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'url-loader?name=fonts/[name].[ext]&limit=8192'
            },
            {
                test: /\.css$/,
                loader:  'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
            },
            {
                test: /\.scss$/,
                loader:  'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?resolve url'
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            }, 
            {
                test: /\.js$/,
                include: path.resolve('node_modules/mapbox-gl-shaders/index.js'),
                loader: 'transform/cacheable?brfs'
            }
        ]
    },
    resolve: {
        root: path.join(__dirname, '..', 'app'),
        alias: {
            'react': path.join(__dirname, 'node_modules', 'react')
        },
        extensions: ['', '.js', '.jsx', '.json', '.css', '.styl', '.png', '.jpg', '.jpeg', '.gif']
    },
    stylus: {
        'resolve url': true
    },
    postcss: function () {
        return [autoprefixer];
    }
};

（免责声明：我是React-Router和webpack的新手，所以这可能是对于更熟悉的人来说很明显）

Answer 1

您的webpack构建堆栈可能没有配置System.import。我认为您使用的是webpack 1，System.import的支持仅限于webpack 2。

您可以将现有代码更改为当前流行的代码拆分解决方案：

<IndexRoute 
    getComponent={(nextState, cb) => {
        require.ensure([], require => {
            // default import is not supported in CommonJS standard
            cb(null, require('./containers/Home').default) 
        });
    }}
/>

请注意，如果要在CommonJS标准中使用默认导入，则必须指定.default。

Code Splitting~ReferenceError：未定义系统

1 个答案: