Problem with Phoenix and Elm with Webpack [SOLVED]

Phoenix Forum Questions / Help
, ,
1

Hi, I try to use Elm with Phoenix .
In files I have
package.json :

"dependencies": {
    "elm": "^0.19.1-3",
    "elm-webpack-loader": "^6.0.1",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  },

in webpack.config.js

{
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        use: {
           loader: 'elm-webpack-loader',
           options: {
              cwd: path.resolve(__dirname, 'elm')
           }
        }
      }

in js/app.js

import { ELm } from "../elm/src/Main.elm";
  
Elm.Main.init({
    node: document.getElementById('elm-main')
})

Elm file (in asset/elm/src/Main.elm) :

module Main exposing (main)
import Html exposing (text)
main =
    text "Hello Elm and Phoenix!"

and in index.html.eex

<div id="elm-main"></div>

All is compiled well ,

[./elm/src/Main.elm] 86.6 KiB {./js/app.js} [built]
[./js/app.js] 611 bytes {./js/app.js} [built]
   [0] multi ./js/app.js 28 bytes {./js/app.js} [built]
    + 2 hidden modules

but I’ve got error in JS console on website:

Elm.Main.init({
  node: document.getElementById('elm-main')
})
Uncaught ReferenceError: Elm is not defined

so ELM is not working. I have no idea where the problem is . Thanks in advance for help.

2

I’m away from my laptop for the next few days, but I recommend this book on combining Electron and Elm. I coded along with the book with the latest versions of Elm and Elixir (as of last month) and everything working perfectly with webpack. Maybe see if the book’s code is on Github.

3

PS: Note that you wrote “ELm” in one of the code snippets. The capitalization looks like low hanging (debugging) fruit…

4

I’v got code from book you recommended. But doesn’t work.

5

I’ve changed :

import { Elm } from "../elm/src/Main.elm";
    
Elm.Main.init({
    node: document.getElementById('elm-main')
})

to :

import { elm } from "../elm/src/Main.elm";
    
elm.Main.init({
    node: document.getElementById('elm-main')
})

got error , but when I restored previous code , now works . Strange but now works .