React配置多页应用打包失败,报错Cannot read property 'filter' of undefined解决方案

再次重逢的时间

react.js.png

起因

最近再做一个react的多页应用,在修改过 webpackentryHtmlWebpackPlugin 等配置后,进行打包测试,运行 npm run build 后控制台报错:

Creating an optimized production build...
Failed to compile.

Cannot read property 'filter' of undefined

分析

因为控制台并没有明确提示错误位置,所以开始在修改的 webpack.config.js 文件中用到 filter方法的地方排查。开始以为是 entry 配置有问题,但经过测试发现问题不在 entry

之后对比了不同版本的 create-react-app 生成的 webpack.config.js文件中所用到 filter方法的地方,发现新的配置文件中 ManifestPlugin 的配置项发生了变化。

// 这是旧版的 ManifestPlugin 配置
new ManifestPlugin({
    fileName: 'asset-manifest.json',
    publicPath: paths.publicUrlOrPath,
}),
      
// 这是新版的 ManifestPlugin 配置
new ManifestPlugin({
    fileName: 'asset-manifest.json',
    publicPath: paths.publicUrlOrPath,
    generate: (seed, files, entrypoints) => {
        const manifestFiles = files.reduce((manifest, file) => {
            manifest[file.name] = file.path;
            return manifest;
        }, seed);
        const entrypointFiles = entrypoints.main.filter(
            fileName => !fileName.endsWith('.map')
        );
        console.log('!!', entrypointFiles)

        return {
            files: manifestFiles,
            entrypoints: entrypointFiles,
        };
    },
}),

可以看到配置项中多了 generate 这一属性,其中就有用到 filter方法。其中 entrypoints.main 调用了 filter方法,经过输出得知 entrypoints.main 的值是与 entry 配置对应的。

默认情况下 entry 的值是一个 Array,因此 entrypoints.main 的值也一个 Array,但是配置多页面时是把其改为了 ObjectObject 没有 filter方法,因此报错。

解决方案

  1. 方案一:删除 generate属性,保持与老版本生成的 create-react-app 生成的 ManifestPlugin 配置一致。
  2. 方案二:修改 entrypoints.main 中的 main 为你在 entry 中配置的项目首页的 key。我的 entry 配置中首页的 keyindex ,因此可改为 entrypoints.index

再次运 npm run build 即可编译成功。

阅读 1.9k
17 声望
2 粉丝
0 条评论
你知道吗?

17 声望
2 粉丝
宣传栏