Meteor, react and elm problem

Hi, I’m trying to use meteor, react, and elm together. A test app is located:

The generated elm source is: imports/ui/elm/LineChart.js

When I tried to run the app, I get the following error:

I created a very similar demo using parcel, react and elm at:

This example runs fine.

If I inspect the parcel example, the Elm generated javascript module contains an Elm object:


Using a Elm generated js file in a meteor project looks like this:

Note, the Elm object is missing. I’ve tried the exact same Elm generated js file in both projects.

So it appears that Meteor is doing something to the Elm generated js file that makes the Elm object disappear.

I’m probably doing something simple wrong – appreciate any pointers …

Hi! I had the same problem.

As soon as you import your LineChart.js module you are importing the Elm runtime as a global. This should work for you:

import React, { Component } from "react";
import REC from 'react-elm-components'

import LineChart from "./elm/LineChart";

export default class Graph extends React.Component {
  render() {
    return (
      <div className="time-container">
          <h1>Chart: </h1>
          <REC src={Elm.Main} />

When you have multiple elm applications you should compile them into one file:
elm make LineChart.elm BarChart.elm PieChart.elm --output=MainElm.js.

Also name your elm applications according to the filenames:
module LineChart exposing ... so you can refer to them as Elm.LineChart and Elm.BarChart in your react components <REC src={Elm.LineChart} />.

1 Like

Thank you very much! – works as you described.

Updated exampled source:

Screen shot of app:

Now to expand the example to show how to get meteor data in/out using ports …

1 Like

You’re very welcome! :slight_smile: