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

Daichi Mizuno

3年前

　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',
    }
  },

　以上です。