首页 > 解决方案 > .Net Core MVC + ReactJS,Safari 浏览器中的 Webpack 问题

问题描述

我被这个奇怪的问题困住了。我的应用程序在 Chrome、Firefox、Edge、IE11 中运行良好。但是在 Safari 中出现了一些问题,我什至在控制台中都看不到确切的错误。控制台中的消息是通用的,要求我不要丑化/缩小脚本以查看确切的错误。

错误:*消息:“缩小的 React 错误 #130;访问http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=获取完整消息或使用用于完整错误和其他有用警告的非缩小开发环境。”

名称:“不变违规”*

确切的问题:如果我评论 JSON.stringify 插件,应用程序甚至不会打开。控制台给出以下错误。

“TypeError:'未定义'不是函数(评估'(0,d.render)')”

Uglify 插件没有影响,如果我评论它,该应用程序仍然可以工作,而不会 uglify 我的 JS。

以下是我的 webpack 文件。

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('allstyles.css');

module.exports = {
    entry: {
        'common': ['react-datepicker', 'babel-polyfill', 'react', 'react-dom', 'react-redux', 'redux', 'isomorphic-fetch', 'es6-promise'],
        'home': './ClientApp/pages/Home.js',
        'header': './ClientApp/components/shared/Header.js',
        'footer': './ClientApp/components/shared/Footer.js',
        'game': './ClientApp/pages/Game.js',
        'gamesbsport': './ClientApp/pages/GameSBSport.js',
        'gamesbesport': './ClientApp/pages/GameSBESport.js',
        'gamegbkeno': './ClientApp/pages/GameGBkeno.js',
        'gamegbkthree': './ClientApp/pages/GameGBkTHREE.js',
        'gamegblotto': './ClientApp/pages/GameGBlotto.js',
        'gamegbpkten': './ClientApp/pages/GameGBpkTEN.js',
        'gamegbsports': './ClientApp/pages/GameGBsports.js',
        'gamegbssc': './ClientApp/pages/GameGBssc.js',
        'casino': './ClientApp/pages/Casino.js',
        'about': './ClientApp/components/About.js',
        'info': './ClientApp/pages/member/info.js',
        'trade': './ClientApp/pages/member/trade.js',        
        'bonus': './ClientApp/pages/member/bonus.js'        
    },
    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename: '[name].js',
        publicPath: '/dist/'
    },
    plugins: [
        extractCSS,
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default']
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: ["header", "common", "runtime"],
            minChunks: Infinity
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        //new webpack.DefinePlugin({
        //     'process.env': {
        //         'NODE_ENV': JSON.stringify('production')
        //     }
        // }),
         new webpack.optimize.UglifyJsPlugin()
    ],
    module: {
        rules: [
            { test: /\.css$/, use: extractCSS.extract(['css-loader?minimize']) },
            {
                test: /\.js?$/, use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react', '@babel/preset-env'],
                        plugins: [require('@babel/plugin-proposal-object-rest-spread'),
                        require('@babel/plugin-proposal-class-properties')],
                        babelrc: true
                    }
                }
            },
            {
                test: /\.js?$/,
                loader: 'webpack-module-hot-accept',
                exclude: /node_modules/,
            },
            {
                test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
                loader: 'url-loader?limit=100000'
            }
        ]
    }
};

标签: .netreactjsasp.net-core-mvcwebpack-dev-server

解决方案


推荐阅读