Meteor, react and elm problem

help
1

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:

image
image719×169 12.2 KB

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:

image

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

image
image1241×128 19.1 KB

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 …

2

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">
        <div>
          <h1>Chart: </h1>
          <REC src={Elm.Main} />
        </div>
      </div>
    );
  }
}

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
3

Thank you very much! – works as you described.

Updated exampled source:

Screen shot of app:

image
image716×977 39.4 KB

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

1 Like
4

You’re very welcome! :slight_smile: