Разделение кода ~ ReferenceError: Система не определена

reactjs webpack react-router

883 просмотра

1 ответ

748 Репутация автора

Мой код попал в ошибку

ReferenceError: System is not defined

В линию

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

Как мне определить System. Это связано с моими настройками веб-пакета? Вот как я это выразил

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 и веб-пакете, так что это может быть очевидно для кого-то с большим количеством знакомых)

Автор: Muhaimin Источник Размещён: 12.07.2016 04:03

Ответы (1)


0 плюса

9079 Репутация автора

Решение

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

Обратите внимание, что вы должны указать .default, хотите ли вы использовать импорт по умолчанию в стандарте CommonJS.

Автор: Everettss Размещён: 28.07.2016 09:32
Вопросы из категории :
32x32