Contact Manager Tutorial webpack WARNING in Conflict

Help Requests
1

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
2

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
3

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.

2 Likes
4

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?

5

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

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?

7

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.

8

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.

9

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

10

@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”.