Can't compile Elm file - Githubissues

madsflensted / elm-brunch

Brunch plugin to compile Elm code

MIT License

74 stars 31 forks source link

Can't compile Elm file #48

Closed mickeyvip closed 5 years ago

mickeyvip commented 5 years ago

Problem

Information

[x] elm-brunch version - 0.12.0
[x] brunch version - 2.10.17
[x] nodejs version - 10.15.0

[x] content of brunch-config.js

// See http://brunch.io for documentation.
module.exports = {
files: {
javascripts: {
  joinTo: {
    'libraries.js': /^(?!app\/)/,
    'app.js': /^app\//,
  },
},
stylesheets: { joinTo: 'app.css' },
},
plugins: {
elmBrunch: {
  mainModules: 'app/elm/Main.elm',
},
},
};

[x] content of elm.json (Elm 0.19)

{
"type": "application",
"source-directories": ["app/elm"],
"elm-version": "0.19.0",
"dependencies": {
"direct": {
  "elm/browser": "1.0.1",
  "elm/core": "1.0.2",
  "elm/html": "1.0.0"
},
"indirect": {
  "elm/json": "1.1.3",
  "elm/time": "1.0.0",
  "elm/url": "1.0.0",
  "elm/virtual-dom": "1.0.2"
}
},
"test-dependencies": {
"direct": {},
"indirect": {}
}
}

[x] file layout for your elm files relative to root of project.
[x] Operating System - MacOS HighSierra

mickeyvip commented 5 years ago

Found 1 of my problems - mainModules should be an array.

Now the file compiles:

But when requiring it - it gets only an empty object:

madsflensted commented 5 years ago

Good to hear that you solved the compilation problem. Beware that the elm brunch plugin does not pass the generated code on down the brunch pipeline, as other to-js-transpilers do. So you will need to either include the generated js in your html use other means to get it into the main bundle.

mickeyvip commented 5 years ago

@madsflensted , thank you.

Following your advice, I have added <script src="js/main.js"></script> to the index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Simple Brunch Demo</title>
    <link rel="stylesheet" href="app.css" />
  </head>

  <body>
    <main id="root"></main>
    <h1>
      Brunch
      <small>• A simple demo</small>
    </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <script src="libraries.js"></script>
    <script src="js/main.js"></script>
    <script src="app.js"></script>
    <script>
      require('application').init();
    </script>
  </body>
</html>

removed the const Elm = require('./elm/Main.elm'); from the application.js.

'use strict';
const Greeter = require('./greeter');
const App = {
  init() {
    console.log('App initialized.');
    const g = new Greeter();
    g.greet();
    Elm.Main.init({ node: document.getElementById('root') });
  },
};

module.exports = App;

and now it is working:

mickeyvip commented 5 years ago

Maybe it's worth to mention this in the docs? Or did I miss this?