# A novice trying to print hello world in elm

**URL:** <https://discourse.elm-lang.org/t/a-novice-trying-to-print-hello-world-in-elm/8886>\
**Category:** Learn\
**Created:** [January 13, 2023, 5:00pm UTC](https://discourse.elm-lang.org/t/a-novice-trying-to-print-hello-world-in-elm/8886 "2023-01-13T17:00:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![carlotm](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carlotm/32/4785_2.png) [@carlotm](https://discourse.elm-lang.org/u/carlotm)\
**Post date:** [January 13, 2023, 5:00pm UTC](https://discourse.elm-lang.org/t/a-novice-trying-to-print-hello-world-in-elm/8886/1 "2023-01-13T17:00:39Z")

</div>

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:

```auto
module Gallery exposing (main)

import Html exposing (text)

main =
  text "Hello!"

```

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

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

```

And I got this error:

```auto
Uncaught TypeError: _elm_Gallery_elm __WEBPACK_IMPORTED_MODULE_0___ default().main is not a function

```

Instead, if Iuse this script:

```auto
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

---

<div class="post-metadata">

**Author:** ![Carsten\_Konig](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carsten_konig/32/4063_2.png) [@Carsten\_Konig](https://discourse.elm-lang.org/u/Carsten_Konig)\
**Post date:** [January 13, 2023, 5:23pm UTC](https://discourse.elm-lang.org/t/a-novice-trying-to-print-hello-world-in-elm/8886/2 "2023-01-13T17:23:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![wolfadex](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/wolfadex/32/2461_2.png) [@wolfadex](https://discourse.elm-lang.org/u/wolfadex)\
**Post date:** [January 13, 2023, 6:54pm UTC](https://discourse.elm-lang.org/t/a-novice-trying-to-print-hello-world-in-elm/8886/3 "2023-01-13T18:54:15Z")

</div>

With JS bundlers I typically import the Elm code like so

```javascript
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.

---

<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:** [January 23, 2023, 6:54pm UTC](https://discourse.elm-lang.org/t/a-novice-trying-to-print-hello-world-in-elm/8886/4 "2023-01-23T18:54:44Z")

</div>

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