Weird compile error when using two elm apps with webpack

The source code is here. 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:

This is how I am importing the Elm applications:

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:

$ 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.

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

See this section:

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

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

And I now have this in main.ts:

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.

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

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:

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

Just rename your Css.elm module to something else.

1 Like

Thank you so much @dmy, it works now!

I apparently have

1 Like

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