# Weird compile error when using two elm apps with webpack

**URL:** <https://discourse.elm-lang.org/t/weird-compile-error-when-using-two-elm-apps-with-webpack/5632>\
**Category:** Learn\
**Created:** [April 24, 2020, 4:23am UTC](https://discourse.elm-lang.org/t/weird-compile-error-when-using-two-elm-apps-with-webpack/5632 "2020-04-24T04:23:34Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![DullBananas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dullbananas/32/3709_2.png) [@DullBananas](https://discourse.elm-lang.org/u/DullBananas)\
**Post date:** [April 24, 2020, 4:23am UTC](https://discourse.elm-lang.org/t/weird-compile-error-when-using-two-elm-apps-with-webpack/5632/1 "2020-04-24T04:23:35Z")

</div>

The source code is [here](https://github.com/dullbananas/editsc/tree/364bc7fed53b793998d1669764fe9b65993c894e/editsc/js). The main file is main.ts. I have been using a single Elm app named Main, and now I’m adding another one named Css which controls a \<style\> element in \<head\>. When I run webpack, I see this error message:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/4/4751b541c1983ce2fe09125063834c00b5f2d55e.jpeg)

This is how I am importing the Elm applications:

```javascript
var M = require('./Main.elm');
var C = require('./Css.elm');

let app = M.Elm.Main.init({
	node: document.getElementById('ui'),
});

let cssApp = C.Elm.Css.init({
	node: document.getElementById('style'),
});

```

But when I run this, it successfully compiles:

```bash
$ elm make src/Css.elm --output=/dev/null

```

Maybe I should build both apps into a single file and import that, but I’m not sure how to do that with Webpack.

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [April 24, 2020, 6:37am UTC](https://discourse.elm-lang.org/t/weird-compile-error-when-using-two-elm-apps-with-webpack/5632/2 "2020-04-24T06:37:43Z")

</div>

> [@DullBananas](#):
>
> Maybe I should build both apps into a single file and import that, but I’m not sure how to do that with Webpack.

You can use elm-webpack-loader to do this.

> **[GitHub - elm-community/elm-webpack-loader: Webpack loader for the Elm...](https://github.com/elm-community/elm-webpack-loader)**
>
> Webpack loader for the Elm programming language. Contribute to elm-community/elm-webpack-loader development by creating an account on GitHub.

See this section: [GitHub - elm-community/elm-webpack-loader: Webpack loader for the Elm programming language.](https://github.com/elm-community/elm-webpack-loader#files-default---path-to-required-file).

---

<div class="post-metadata">

**Author:** ![DullBananas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dullbananas/32/3709_2.png) [@DullBananas](https://discourse.elm-lang.org/u/DullBananas)\
**Post date:** [April 29, 2020, 2:46am UTC](https://discourse.elm-lang.org/t/weird-compile-error-when-using-two-elm-apps-with-webpack/5632/3 "2020-04-29T02:46:18Z")

</div>

@dmy it still doesn’t work. I now have this in my webpack config:

```javascript
{
	test: /\.elm$/,
	include: path.resolve(__dirname, 'src'),
	exclude: path.resolve(__dirname, 'node_modules'),
	use: {
		loader: 'elm-webpack-loader',
		options: {
			files: [
				'src/Main.elm',
				'src/Css.elm',
			].map(name => path.resolve(__dirname, name)),
		},
	},
}

```

And I now have this in main.ts:

```javascript
let Elm = require('./Main.elm');

let app = Elm.Main.init({
	node: document.getElementById('ui'),
});

let cssApp = Elm.Css.init({
	node: document.getElementById('style'),
});

```

I still get the exact same error.

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [April 29, 2020, 7:36am UTC](https://discourse.elm-lang.org/t/weird-compile-error-when-using-two-elm-apps-with-webpack/5632/4 "2020-04-29T07:36:15Z")

</div>

This has nothing to do with compiling two apps. You can reproduce by just running:

```auto
elm make src/Css.elm

```

Your second module is named `Css.elm` but you have `rtfeldman/elm-css` installed that also has a `Css` module actually imported in your own module:

> <https://github.com/dullbananas/editsc/blob/364bc7fed53b793998d1669764fe9b65993c894e/editsc/js/src/Css.elm#L4>

There is a conflict, and unfortunately, a regression in Elm 0.19.1 makes the error really not obvious:

> <https://github.com/elm/compiler/issues/2018>
>
> Quick Summary: Colliding module name (Fuzz vs elm-explorations/test's Fuzz) makes compiler crash instead of reporting a nice error
> \> Error from \`Fuzz\`...

Just rename your `Css.elm` module to something else.

---

<div class="post-metadata">

**Author:** ![DullBananas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dullbananas/32/3709_2.png) [@DullBananas](https://discourse.elm-lang.org/u/DullBananas)\
**Post date:** [April 30, 2020, 1:56am UTC](https://discourse.elm-lang.org/t/weird-compile-error-when-using-two-elm-apps-with-webpack/5632/5 "2020-04-30T01:56:10Z")

</div>

Thank you so much @dmy, it works now!  
  
  
I apparently have  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/c/c7f8720d9b1b065b84f9bf42d927a82065d66821.png)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [May 10, 2020, 2:11am UTC](https://discourse.elm-lang.org/t/weird-compile-error-when-using-two-elm-apps-with-webpack/5632/6 "2020-05-10T02:11:09Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.