A novice trying to print hello world in elm

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,

1 Like

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

1 Like

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.

1 Like

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