# Contact Manager Tutorial webpack WARNING in Conflict

**URL:** <https://discourse.aurelia.io/t/contact-manager-tutorial-webpack-warning-in-conflict/4274>\
**Category:** Help Requests\
**Created:** [June 24, 2021, 4:34pm UTC](https://discourse.aurelia.io/t/contact-manager-tutorial-webpack-warning-in-conflict/4274 "2021-06-24T16:34:19Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![psnider](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/psnider/32/2098_2.png) [@psnider](https://discourse.aurelia.io/u/psnider)\
**Post date:** [June 24, 2021, 4:34pm UTC](https://discourse.aurelia.io/t/contact-manager-tutorial-webpack-warning-in-conflict/4274/1 "2021-06-24T16:34:19Z")

</div>

**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](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:

```auto
% 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

```

---

<div class="post-metadata">

**Author:** ![psnider](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/psnider/32/2098_2.png) [@psnider](https://discourse.aurelia.io/u/psnider)\
**Post date:** [June 24, 2021, 5:22pm UTC](https://discourse.aurelia.io/t/contact-manager-tutorial-webpack-warning-in-conflict/4274/2 "2021-06-24T17:22:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![psnider](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/psnider/32/2098_2.png) [@psnider](https://discourse.aurelia.io/u/psnider)\
**Post date:** [June 25, 2021, 10:51pm UTC](https://discourse.aurelia.io/t/contact-manager-tutorial-webpack-warning-in-conflict/4274/3 "2021-06-25T22:51:59Z")

</div>

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

I found [brandonseydel/aurelia-snowpack](https://github.com/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.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [June 26, 2021, 1:35am UTC](https://discourse.aurelia.io/t/contact-manager-tutorial-webpack-warning-in-conflict/4274/4 "2021-06-26T01:35:45Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![psnider](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/psnider/32/2098_2.png) [@psnider](https://discourse.aurelia.io/u/psnider)\
**Post date:** [June 26, 2021, 2:28am UTC](https://discourse.aurelia.io/t/contact-manager-tutorial-webpack-warning-in-conflict/4274/5 "2021-06-26T02:28:28Z")

</div>

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

It contains:

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

```

---

<div class="post-metadata">

**Author:** ![lancelot316](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/lancelot316/32/527_2.png) [@lancelot316](https://discourse.aurelia.io/u/lancelot316)\
**Post date:** [June 26, 2021, 3:16pm UTC](https://discourse.aurelia.io/t/contact-manager-tutorial-webpack-warning-in-conflict/4274/6 "2021-06-26T15:16:54Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![psnider](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/psnider/32/2098_2.png) [@psnider](https://discourse.aurelia.io/u/psnider)\
**Post date:** [June 26, 2021, 10:00pm UTC](https://discourse.aurelia.io/t/contact-manager-tutorial-webpack-warning-in-conflict/4274/7 "2021-06-26T22:00:37Z")

</div>

FWIW, I created this issue: [several differences between this example and the code generated by "au new" · Issue #2 · brandonseydel/aurelia-snowpack · GitHub](https://github.com/brandonseydel/aurelia-snowpack/issues/2)

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

---

<div class="post-metadata">

**Author:** ![lancelot316](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/lancelot316/32/527_2.png) [@lancelot316](https://discourse.aurelia.io/u/lancelot316)\
**Post date:** [June 29, 2021, 12:50am UTC](https://discourse.aurelia.io/t/contact-manager-tutorial-webpack-warning-in-conflict/4274/8 "2021-06-29T00:50:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![psnider](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/psnider/32/2098_2.png) [@psnider](https://discourse.aurelia.io/u/psnider)\
**Post date:** [June 29, 2021, 5:06pm UTC](https://discourse.aurelia.io/t/contact-manager-tutorial-webpack-warning-in-conflict/4274/9 "2021-06-29T17:06:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![psnider](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/psnider/32/2098_2.png) [@psnider](https://discourse.aurelia.io/u/psnider)\
**Post date:** [June 29, 2021, 5:34pm UTC](https://discourse.aurelia.io/t/contact-manager-tutorial-webpack-warning-in-conflict/4274/10 "2021-06-29T17:34:39Z")

</div>

@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:

- [http://aurelia.io/docs/tutorials/creating-a-todo-app](http://aurelia.io/docs/tutorials/creating-a-todo-app)
- [http://aurelia.io/docs/tutorials/creating-a-contact-manager](http://aurelia.io/docs/tutorials/creating-a-contact-manager)

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:

```console
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:

```Global
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”.