A novice trying to print hello world in elm

[carlotm]

Hi all,
I have an existing Django project which uses webpack to bundle the javascript.

I want to print Hello! from an elm file inside one of my templates.

What I did so far:

• Added <div id="app"></div> to the Django template
• Added webpack elm loader to the config, running webpack seems working fine
• Added an elm module called Gallery.elm with this content:

module Gallery exposing (main)

import Html exposing (text)


main =
  text "Hello!"

• Added a javascript script to the template with this content:

import Gallery from "../elm/Gallery.elm";
Gallery.main({ node: document.getElementById("app") });

And I got this error:

Uncaught TypeError: _elm_Gallery_elm__WEBPACK_IMPORTED_MODULE_0___default().main is not a function

Instead, if Iuse this script:

import Gallery from "../elm/Gallery.elm";
Gallery.Elm.Gallery.init({ node: document.getElementById("app")});

It works fine. But it seems wrong, Gallery.Elm.Gallery... and the init function is not in the module…

I have 2 question:

• is the working approach really correct or is that just a coincidence?
• if that is a coincidence, what’s the correct approach?

Kind Regards,
Carlo

[Carsten_Konig]

I think you did all right - init is but there by the elm-compiler

[wolfadex]

With JS bundlers I typically import the Elm code like so

import { Elm } from "../elm/Gallery.elm";

Elm.Gallery.init({ node: document.getElementById("app")});

With Elm in general, the Elm object gets wrapped in a “top” level scope. Typically this is window, but with a JS bundler this becomes an un-named object.