ERROR in SplitChunksPlugin Cache group “default” conflicts with existing chunk

wrong-way エラー集

 React,Typescript,webpackで開発をしているときに、タイトルのエラーが起きました。Webpack周りの知見があまりなかったので、解消した方法を紹介します。エラーの全文は下記になります。

ERROR in SplitChunksPlugin
Cache group “default” conflicts with existing chunk.
Both have the same name “vendor” and existing chunk is not a parent of the selected modules.
Use a different name for the cache group or make sure that the existing chunk is a parent (e. g. via dependOn).
HINT: You can omit “name” to automatically create a name.
BREAKING CHANGE: webpack < 5 used to allow to use an entrypoint as splitChunk. This is no longer allowed when the entrypoint is not a parent of the selected modules.
Remove this entrypoint and add modules to cache group’s ‘test’ instead. If you need modules to be evaluated on startup, add them to the existing entrypoints (make them arrays). See migration guide of more info.

 

 私のwebpack.common.jsは下記のような感じでした。※公開できない情報は消しています。

module.exports = {
  entry: {
    app: path.join(srcDir, "app.ts"),
  },
  output: {
    path: path.join(__dirname, "../dist/js"),
    filename: "[name].js",
  },
  optimization: {
    splitChunks: {
      name: "vendor",
      chunks:'initial',
    }
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  plugins: [
    new CopyPlugin({
      patterns: [{ from: ".", to: "../", context: "public" }],
      options: {},
    }),
  ],
};

 原因としては、Webpack 5以上からSplitChunksPluginのCache groupでデフォルトで、nameが”vendor”となっているので、重複して書いていたことが原因でしたので、optimization.splitChunks.nameを消すことで解消されます。下記のような感じです。

  optimization: {
    splitChunks: {
      chunks:'initial',
    }
  },

 

 以上です。

最後まで読んで頂きありがとうございます!

面白かった、参考になった、と少しでも感じて頂けましたら
ブログランキング上位になるための応援をして頂けないでしょうか!
今後も面白い記事を更新していきますので、ぜひ宜しくおねがいします!
エラー集

コメント