React + Webpack："RuntimeError:内存访问越界“

Question

我最近开发了一个使用AWS Amplify部署的react + webpack应用程序。我在Sentry上收到了一个奇怪的错误，但是找不到复制这个bug的方法。

RuntimeError: memory access out of bounds

我怀疑这与我的webpack配置有关，但我不知道出了什么问题。我从未使用过wasm，但它似乎与它有关。

这是我的生产级的webpack配置。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const env = require('../environment/prod.env');
const commonPaths = require('./paths');
const webpack = require('webpack');
const SentryWebpackPlugin = require('@sentry/webpack-plugin');

module.exports = {
    mode: 'production',
    devtool: 'source-map',
    output: {
        filename: `${commonPaths.jsFolder}/[name].[hash].js`,
        path: commonPaths.outputPath,
        chunkFilename: `${commonPaths.jsFolder}/[name].[chunkhash].js`,
    },
    optimization: {
        minimizer: [
            new TerserPlugin({
                parallel: true,
                cache: true,
                sourceMap: true,
            }),
            new OptimizeCSSAssetsPlugin(),
        ],

        splitChunks: {
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'initial',
                },
                async: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'async',
                    chunks: 'async',
                    minChunks: 4,
                },
            },
        },
        runtimeChunk: true,
    },

    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': env,
        }),
        new MiniCssExtractPlugin({
            filename: `${commonPaths.cssFolder}/[name].css`,
            chunkFilename: `${commonPaths.cssFolder}/[name].css`,
        }),
    ],
};

下面也是我常用的webpack配置

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const commonPaths = require('./paths');

module.exports = {
    context: commonPaths.srcPath,
    entry: commonPaths.entryPath,
    output: {
        path: commonPaths.outputPath,
        filename: 'js/[name].js',
    },
    resolve: {
        extensions: ['.ts', '.js', '.html', '.vue'],
        alias: {
            '~': commonPaths.srcPath,
        },
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                include: commonPaths.srcPath,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    plugins: ['react-hot-loader/babel'],
                },
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'assets/img/[name].[hash:8].[ext]',
                            publicPath: '/',
                        },
                    },
                ],
            },
            {
                test: /\.(mp3)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'assets/audio/[name].[hash:8].[ext]',
                            publicPath: '/',
                        },
                    },
                ],
            },
            {
                test: /\.(ttc|ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'assets/fonts/[name].[hash:8].[ext]',
                            publicPath: '/',
                        },
                    },
                ],
            },
        ],
    },
    serve: {
        content: commonPaths.entryPath,
        dev: {
            publicPath: commonPaths.outputPath,
        },
        open: true,
    },
    resolve: {
        modules: ['src', 'node_modules', 'bower_components', 'shared', '/shared/vendor/modules'],
        extensions: ['*', '.js', '.jsx'],
    },
    plugins: [
        new webpack.ProgressPlugin(),
        new HtmlWebpackPlugin({
            favicon: './icon.png',
            template: commonPaths.templatePath,
        }),
        new ScriptExtHtmlWebpackPlugin({
            defaultAttribute: 'async',
        }),
    ],
};

任何帮助都会很有帮助。谢谢。

Answer 1

尝试重新启动服务器，并确保重新安装节点模块。