Error: Conflict: Multiple chunks emit assets to the same filename app.js (chunks polyfills and main)

Question

I'm trying to package a manually created polyfills.ts with webpack because apparently it's not automatically emitted. Before adding my custom polyfills.ts (just remove the one line in the webconfig below) I currently get this error in the js console of the browser

main.ts?cd49:7 Error: NG0908: In this configuration Angular requires Zone.js
    at new NgZone (core.mjs?305e:24111:1)
    at getNgZone (core.mjs?305e:25100:1)
    at PlatformRef.bootstrapModuleFactory (core.mjs?305e:24967:1)
    at eval (core.mjs?305e:25023:1)

After adding the entry in the webconfig I get this:

<e> [webpack-dev-middleware] Error: Conflict: Multiple chunks emit assets to the same filename app.js (chunks polyfills and main)

with this webconfig

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// environment dependent configuration
const PUBLIC_PATH = '/assets';
const ENTRY_POINT = './src/index.html';

module.exports = {
  mode: 'development',
  devtool: 'eval-source-map',
  entry: {
    polyfills: './src/polyfills.ts',
    main: './src/main.ts',
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: PUBLIC_PATH,
  },
  resolve: {
    extensions: [ '', '.ts', '.js' ]
  },
  module: {
    rules: [
      {
        test: /\.(css)$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
          { loader: 'sass-loader' },
        ],
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      },
      {
        test: /\.html$/i,
        use: 'html-loader',
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ]
  },
  devServer:
    {
      historyApiFallback: true, // 404 gets routed back to index.html
      port: 9090,
      headers: {
        'Content-Security-Policy': 'font-src \'self\' data:; img-src \'self\' data:', // allows delivery of elements from same origin
      },
      devMiddleware: {
        index: true,
        mimeTypes: { phtml: 'text/html' },
        publicPath: PUBLIC_PATH,
        serverSideRender: true,
        writeToDisk: true,
      },
    },
  plugins: [
    new HtmlWebpackPlugin({ template: ENTRY_POINT }),
    new CleanWebpackPlugin({}), // clean local dist folder
  ],
};

and these dependencies. Webpack 5.x and Angular 15 build and then some.

{
  "name": "dev",
  "version": "0.1",
  "scripts": {
    "dev": "npx webpack serve --config webpack.dev.js",
    "prod": "npx webpack serve --config webpack.prod.js",
    "build": "webpack --config webpack.dev.js",
    "start": "http-server dist"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.1.0",
    "@angular/common": "^15.1.0",
    "@angular/compiler": "^15.1.0",
    "@angular/core": "^15.1.0",
    "@angular/forms": "^15.1.0",
    "@angular/platform-browser": "^15.1.0",
    "@angular/platform-browser-dynamic": "^15.1.0",
    "@angular/router": "^15.1.0",
    "html-webpack-plugin": "^5.5.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "webpack": "^5.75.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.1.3",
    "@angular/cli": "~15.1.3",
    "@angular/compiler-cli": "^15.1.0",
    "@types/jasmine": "~4.3.0",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.3",
    "html-loader": "^4.2.0",
    "http-server": "^14.1.1",
    "install": "^0.13.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "npm": "^9.5.0",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.4.2",
    "typescript": "~4.9.4",
    "webpack-cli": "^5.0.1"
  }
}

As far as I understand from the webpack API I can use entries to replace emitted resources. So this should work quite nicely.

  entry: {
    polyfills: './src/polyfills.ts',
    main: './src/main.ts',
  },

So I'm confused. What is the proper way to configure webpack to bundle my polyfills.ts for access in the bundle?

Error: Conflict: Multiple chunks emit assets to the same filename app.js (chunks polyfills and main)

0 Answers0