Contact Manager Tutorial webpack WARNING in Conflict

Problem

Upon working through the first portion of the tutorial, up though " Building Out the Default Route", npm start works fine.
See http://aurelia.io/docs/tutorials/creating-a-contact-manager#building-out-the-default-route

But npm run build produces these webpack errors:

WARNING in Conflict: Multiple assets emit different content to the same filename vendors~203e0718.fdc25451d6f8881a8672.bundle.map

WARNING in Conflict: Multiple assets emit different content to the same filename vendors~7274e1de.2a59b0d566198477210c.bundle.map

I’m fairly new to webpack, but it seems like this should not be ignored.

I’d appreciate knowing whether this warning is serious. (I found it while building a larger practice app built on the tutorial.)
And I’d also appreciate any advice to track down the cause of any such problems.

Steps to Reproduce

I’m running on a modern Macbook, with OSX 11.2.1.
And with node v16.1.0, and npm 7.11.2.

When creating the project using au new, I selected the option for typescript, and I installed the dependencies using npm.

I made the edits from the first portion of the tutorial, up though " Building Out the Default Route".

Here is the full output from running npm run build:

% npm run build

> contact-manager-ts@0.1.0 build
> webpack --env.production --extractCss

Hash: 95402619a0f474899b79
Version: webpack 4.46.0
Time: 3719ms
Built at: 06/24/2021 9:20:31 AM
                                           Asset      Size  Chunks                                Chunk Names
            1e59d2330b4c6deb84b340635ed36249.ttf   162 KiB          [emitted] [immutable]
          20fd1704ea223900efa9fd4e869efb08.woff2  75.4 KiB          [emitted] [immutable]
            8b43027f47b20503057dfbbaa9401fef.eot   162 KiB          [emitted] [immutable]
    app~f075b844.f367243a79c3f6d6b2e0.bundle.map  1.44 KiB       0  [emitted] [dev]               app~f075b844
      app~f075b844.f367243a79c3f6d6b2e0.chunk.js  3.71 KiB       0  [emitted] [immutable]         app~f075b844
            c1e38fd9e0e74ba58f7a2b77ef29fdd3.svg   434 KiB          [emitted] [immutable]  [big]
           f691f37e57f04c152e2315ab7dbad881.woff  95.7 KiB          [emitted] [immutable]
                                     favicon.ico  14.7 KiB          [emitted]
                                      index.html  1.01 KiB          [emitted]
      runtime~app.c0aa0ff0556ffbb1d080.bundle.js  1.52 KiB       1  [emitted] [immutable]         runtime~app
     runtime~app.c0aa0ff0556ffbb1d080.bundle.map  2.89 KiB       1  [emitted] [dev]               runtime~app
vendors~0ba1d959.3f129000e36a28166cb5.bundle.map   109 KiB       2  [emitted] [dev]               vendors~0ba1d959
  vendors~0ba1d959.3f129000e36a28166cb5.chunk.js  92.1 KiB       2  [emitted] [immutable]         vendors~0ba1d959
 vendors~203e0718.b7f500b91c9c5315fbbd.chunk.css  36.6 KiB       3  [emitted] [immutable]         vendors~203e0718
vendors~203e0718.fdc25451d6f8881a8672.bundle.map  3.42 KiB    3, 3  [emitted] [dev]               vendors~203e0718, vendors~203e0718
  vendors~203e0718.fdc25451d6f8881a8672.chunk.js  2.28 KiB       3  [emitted] [immutable]         vendors~203e0718
vendors~50e8d500.6bb2b049e73291b21f2f.bundle.map  65.3 KiB       4  [emitted] [dev]               vendors~50e8d500
  vendors~50e8d500.6bb2b049e73291b21f2f.chunk.js  46.7 KiB       4  [emitted] [immutable]         vendors~50e8d500
vendors~556c66f2.bad39e25b2f6596882f5.bundle.map  61.3 KiB       5  [emitted] [dev]               vendors~556c66f2
  vendors~556c66f2.bad39e25b2f6596882f5.chunk.js  48.7 KiB       5  [emitted] [immutable]         vendors~556c66f2
vendors~5ea1390f.ffb5b997fe37300c2a35.bundle.map   100 KiB       6  [emitted] [dev]               vendors~5ea1390f
  vendors~5ea1390f.ffb5b997fe37300c2a35.chunk.js  76.2 KiB       6  [emitted] [immutable]         vendors~5ea1390f
vendors~7274e1de.2a59b0d566198477210c.bundle.map  2.98 KiB    7, 7  [emitted] [dev]               vendors~7274e1de, vendors~7274e1de
  vendors~7274e1de.2a59b0d566198477210c.chunk.js  1.99 KiB       7  [emitted] [immutable]         vendors~7274e1de
 vendors~7274e1de.4b52ac07e99a7b731ca2.chunk.css   191 KiB       7  [emitted] [immutable]         vendors~7274e1de
vendors~ecff2e3d.3923d8482c497bf7824a.bundle.map  68.9 KiB       8  [emitted] [dev]               vendors~ecff2e3d
  vendors~ecff2e3d.3923d8482c497bf7824a.chunk.js  54.1 KiB       8  [emitted] [immutable]         vendors~ecff2e3d
Entrypoint app [big] = runtime~app.c0aa0ff0556ffbb1d080.bundle.js runtime~app.c0aa0ff0556ffbb1d080.bundle.map vendors~0ba1d959.3f129000e36a28166cb5.chunk.js vendors~0ba1d959.3f129000e36a28166cb5.bundle.map vendors~556c66f2.bad39e25b2f6596882f5.chunk.js vendors~556c66f2.bad39e25b2f6596882f5.bundle.map vendors~50e8d500.6bb2b049e73291b21f2f.chunk.js vendors~50e8d500.6bb2b049e73291b21f2f.bundle.map vendors~5ea1390f.ffb5b997fe37300c2a35.chunk.js vendors~5ea1390f.ffb5b997fe37300c2a35.bundle.map vendors~ecff2e3d.3923d8482c497bf7824a.chunk.js vendors~ecff2e3d.3923d8482c497bf7824a.bundle.map vendors~7274e1de.4b52ac07e99a7b731ca2.chunk.css vendors~7274e1de.2a59b0d566198477210c.chunk.js vendors~7274e1de.2a59b0d566198477210c.bundle.map vendors~7274e1de.2a59b0d566198477210c.bundle.map vendors~203e0718.b7f500b91c9c5315fbbd.chunk.css vendors~203e0718.fdc25451d6f8881a8672.chunk.js vendors~203e0718.fdc25451d6f8881a8672.bundle.map vendors~203e0718.fdc25451d6f8881a8672.bundle.map app~f075b844.f367243a79c3f6d6b2e0.chunk.js app~f075b844.f367243a79c3f6d6b2e0.bundle.map
[0] multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper 52 bytes {0} [built]
[3UD+] (webpack)/buildin/harmony-module.js 573 bytes {3} [built]
[4ysu] ./node_modules/aurelia-router/dist/native-modules/aurelia-router.js + 1 modules 104 KiB {4} [built]
    |    2 modules
[BEPO] ./config/environment.json 31 bytes {0} [built]
[app] ./src/app.ts 571 bytes {0} [built]
[app.html] ./src/app.html 496 bytes {0} [built]
[aurelia-testing] ./node_modules/aurelia-testing/dist/native-modules/aurelia-testing.js + 2 modules 6.85 KiB {6} [built]
    |    3 modules
[contact-detail] ./src/contact-detail.ts 130 bytes {0} [built]
[main] ./src/main.ts 606 bytes {0} [built]
[no-selection] ./src/no-selection.ts 173 bytes {0} [built]
[no-selection.html] ./src/no-selection.html 149 bytes {0} [built]
[resources/index] ./src/resources/index.ts 38 bytes {0} [built]
[styles.css] ./src/styles.css 2.15 KiB {0} [built]
[yLpj] (webpack)/buildin/global.js 472 bytes {3} [built]
    + 32 hidden modules

WARNING in Conflict: Multiple assets emit different content to the same filename vendors~203e0718.fdc25451d6f8881a8672.bundle.map

WARNING in Conflict: Multiple assets emit different content to the same filename vendors~7274e1de.2a59b0d566198477210c.bundle.map
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [8XHo] ./node_modules/html-webpack-plugin/lib/loader.js!./index.ejs 715 bytes {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--4-1!node_modules/bootstrap/dist/css/bootstrap.css:
    Entrypoint mini-css-extract-plugin = *
       3 modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--4-1!node_modules/font-awesome/css/font-awesome.css:
                                     Asset      Size  Chunks                                Chunk Names
      1e59d2330b4c6deb84b340635ed36249.ttf   162 KiB          [emitted] [immutable]
    20fd1704ea223900efa9fd4e869efb08.woff2  75.4 KiB          [emitted] [immutable]
      8b43027f47b20503057dfbbaa9401fef.eot   162 KiB          [emitted] [immutable]
      c1e38fd9e0e74ba58f7a2b77ef29fdd3.svg   434 KiB          [emitted] [immutable]  [big]
     f691f37e57f04c152e2315ab7dbad881.woff  95.7 KiB          [emitted] [immutable]
    Entrypoint mini-css-extract-plugin = *
       10 modules
1 Like

FWIW, commenting out the import of font-awesome.css (from src/main.ts) seemed to have got rid of one of the warnings.

1 Like

I’m finding webpack awkward, and have looked at https://www.snowpack.dev/.

I found brandonseydel/aurelia-snowpack, a small project that attempts to use snowpack with aurelia.
But it is hard to understand since it doesn’t match the default app structure produced by running au new.

I think Aurelia looks like it could work well, but I’m having too much trouble beyond the basic tutorials.

1 Like

Maybe there’s something wrong with your output file name? Webpack warnings aren’t easy to resolved, especially without the corresponding configuration. Are you only using the default one from the tutorial?

Yes, the default webpack.config.js from the tutorial.

It contains:

  output: {
    path: outDir,
    publicPath: baseUrl,
    filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
    sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
    chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
  },

I am noticing a similar issue, but I am using bootstrap icons instead of font awesome in the project. I am also using the default webpack.config.js file that is generated with au new One thing I have noticed is that I do not get this warning when using the dev build npm run build:dev Could it be something with the production configuration in the webpack config file? Maybe some sort of hash collision problem?

FWIW, I created this issue: several differences between this example and the code generated by "au new" · Issue #2 · brandonseydel/aurelia-snowpack · GitHub

This issue includes a reference to a git repo with my attempt to make a default Aurelia app work with snowpack.

I am by no means an expert when it comes to Aurelia, so take this for what its worth.
The au new command will scaffold a new Aurelia v1 project, to scaffold a new Aurelia v2 project use npx makes aurelia . The plugin repo you referenced in this thread looks very much to me like a bare bones V2 project that was build without the use of the “makes” command.
I had not heard of snowpack before, so I tried to build a basic Aurelia V1 example using snowpack. I have not been able to get it working yet. I can’t seem to get Aurelia to boot properly. its trying to start but I’m getting an error about “require” is not defined when I try to call the Aurelia bootstrap function directly in my main.ts file(which I am not even sure is the correct way to manually bootstrap Aurelia).
I can push the code that I have so far out to github if you wan to take a look at it. Hope this was in some way helpful.

Thanks, I wasn’t aware that au new creates a v1 project!
I will retry with V2.

@lancelot316 I confirmed you are right about the two methods using different versions of Aurelia.
This V1 vs V2 issue is a problem!

I just checked the tutorial documentation:

Neither one mentions using npx makes aurelia
So I ran both methods of scaffolding new projects, and here is what they output…

npx makes aurelia

outputs:

makes v2.1.5 https://makes.js.org
[makes] Using remote skeleton github:aurelia/new
[makes] Fetching tarball https://codeload.github.com/aurelia/new/tar.gz/master

         #
      ######   xxx
     ########  xxxx   ####         _                  _ _         ____
   x   ########    ########       / \  _   _ _ __ ___| (_) __ _  |___ \
     x  ######  #############    / _ \| | | | '__/ _ \ | |/ _` |   __) |
  xxxxx  ##  ###############    / ___ \ |_| | | |  __/ | | (_| |  / __/
   xxxxx  ###############      /_/   \_\__,_|_|  \___|_|_|\__,_| |_____|
    x ###############  xxx
    ##############  #   xx
 ##############  ######          https://aurelia.io
  ########## x  ########         https://github.com/aurelia
    #####  xxxx   ########       https://twitter.com/aureliaeffect
     #   x  x      ######
                     #

Note that this uses github.com/aurelia/new which describes itself as “The Aurelia 2 scaffolding repo used by our tools to setup new projects.”
Note that the logo (made from characters) shows “Aurelia 2”.

au new

outputs:

makes v2.1.5 https://makes.js.org
[makes] Using remote skeleton github:aurelia/v1
[makes] Fetching tarball https://codeload.github.com/aurelia/v1/tar.gz/master

         #
      ######   xxx
     ########  xxxx   ####         _                  _ _
   x   ########    ########       / \  _   _ _ __ ___| (_) __ _
     x  ######  #############    / _ \| | | | '__/ _ \ | |/ _` |
  xxxxx  ##  ###############    / ___ \ |_| | | |  __/ | | (_| |
   xxxxx  ###############      /_/   \_\__,_|_|  \___|_|_|\__,_|
    x ###############  xxx
    ##############  #   xx
 ##############  ######         https://aurelia.io
  ########## x  ########        https://github.com/aurelia
    #####  xxxx   ########      https://twitter.com/aureliaeffect
     #   x  x      ######
                     #

Note that this uses github.com/aurelia/v1 which describes itself as “The Aurelia 1 scaffolding repo used by our tools to setup new projects.”
Note that the logo (made from characters) shows “Aurelia”.