elm-community / elm-webpack-loader Goto Github PK
View Code? Open in Web Editor NEWWebpack loader for the Elm programming language.
License: BSD 3-Clause "New" or "Revised" License
Webpack loader for the Elm programming language.
License: BSD 3-Clause "New" or "Revised" License
If my understanding is correct it's currently necessary to specify all main modules that will be using ports to elm-make. For example:
elm-make Components/ComponentA/Main.elm Components/ComponentB/Main.elm
If left unspecified, it will result in an build error that says there cannot be multiple main modules. Something like this:
This module has ports, but ports can only appear in the main module.
89β port tasks : Signal (Task Never ())
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Ports in library code would create hidden dependencies where importing a module
could bring in constraints not captured in the public API. Furthermore, if the
module is imported twice, do we send values out the port twice?
I'm not sure what the appropriate solution is. Considering you specify the path to a single Main module via require.
require('Components/ComponentA/Main.elm')
require('Components/ComponentB/Main.elm')
It would seem that if you did this you'd output the entire Elm core run-time with each component.
Using elm-webpack-loader 4.1.1 (from package.json
), webpack 1.14.0
Maybe I am using the tool wrong, but it seems that the output
option in the loader is not properly transmitting the information to elm-make
- it appends to a temp filename generated elsewhere.
I have the following line in the webpack.config.js
file:
...
module: {
loaders: [
...
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
loader: 'elm-webpack?output=/tmp/elm.js',
},
...
And when I run webpack, I get the following message:
ERROR in ./src/Main.elm
Module build failed: Error: Compiler process exited with error ENOENT: no such file or directory, open '/tmp/11707-20012-fp4rvi.9ggr9newmi/tmp/elm.js'
I tried to change this option because when running in a docker container, it kept generating these temp files in my current directory. Is there a misconfiguration from my side? Is it reading something from an environment variable (which would explain the docker weirdness). Sorry if I missed the doc on this.
Thank you in advance for any help
Even locally it times out.
I'm currently working on a side project in Electron using Elm. I had just been manually compiling the Elm code and reloading the page, but then I found this project and was excited. Unfortunately, I have been unable to convince it to work inside of Electron. I get an "Elm is not defined" error at the line this loader's index.js adds to the output.
I believe the issue lies here:
// all the Elm code
if (typeof define === "function" && define['amd'])
{
define([], function() { return Elm; });
return;
}
if (typeof module === "object")
{
module['exports'] = Elm;
return;
}
var globalElm = this['Elm'];
if (typeof globalElm === "undefined")
{
this['Elm'] = Elm;
return;
}
for (var publicModule in Elm)
{
if (publicModule in globalElm)
{
throw new Error('There are two Elm modules called `' + publicModule + '` on this page! Rename one of them.');
}
globalElm[publicModule] = Elm[publicModule];
}
}).call(this);
module.exports = Elm;
In Electron, module
is an object, so the Elm code puts itself into module.exports
and moves on, which means that Elm
is never a thing outside, in the code this loader adds for Webpack.
Any chance we can get a patch to support Electron? I'd be happy to submit a PR.
Hi
I get some troubles when use the webpack-dev-server.
ERROR in ./src/elm/Main.elm
Module build failed: Error: Final loader didn't return a Buffer or String
at NormalModule.onModuleBuild ([some-path]/node_modules/webpack-core/lib/NormalModuleMixin.js:299:42)
at nextLoader ([some-path]/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at [some-path]/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
at context.callback ([some-path]/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
at [some-path]/node_modules/elm-webpack-loader/index.js:138:11
@ ./src/js/index.js 5:12-38
I think you make a wrong assumption at this line index.js:124, in my case the results object contains 2 items and the compilation output is the second item.
elm.zip
Ps: sorry for my bad english.
This is the fixed code in your unreleased refactor.
https://github.com/rtfeldman/elm-webpack-loader/blob/master/index.js#L53
Before refactor this is the fault - 'exitCode' does not exist as a variable.
https://github.com/rtfeldman/elm-webpack-loader/blob/ec48ffd2e150f78094fab916595289fbb95c32d9/index.js#L53
If I fix this by hand locally webpack on windows 7 64bit, will retry compiling on errors, with watch or the webpack-dev-server. Without it any error will stop -watch or the dev server and they both will not try to compile again.
Hi. Thanks to all the contributors of this project.
I'm facing the following inconvenience, each time webpack (dev-server with hot loading) compiles my project a javascript file gets generated and placed at the root of my project (next to the webpack config file).
See this screenshot
The last line shows the unwanted file. As I'm using hot reloading the number of generated files grows fast.
This is my webpack config.
var path = require("path");
module.exports = {
entry: {
app: [
'./src/index.js'
]
},
output: {
path: path.resolve(__dirname + '/dist'),
filename: '[name].js',
},
module: {
loaders: [
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'file?name=[name].[ext]',
},
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
loader: 'elm-hot!elm-webpack?verbose=true&warn=true&cwd=' + __dirname,
},
],
noParse: /\.elm$/,
},
devServer: {
hot: true,
inline: true,
stats: { colors: true },
},
};
This is the entry file src/index.js
'use strict';
require('./index.html');
var Elm = require('./Main.elm');
var mountNode = document.getElementById('main');
var app = Elm.Main.embed(mountNode);
I start the dev server with webpack-dev-server --hot --inline --port 3000 --host 0.0.0.0
inside a docker container.
I've tried almost every config option out there and still can't manage to get rid of those files being generated.
If I run just webpack
instead of webpack-dev-server
the files are writed to /tmp
.
I've tested a couple of similar projects with and without docker and the problem seems to be between docker and npm.
Evidence:
These commands create the compiled files on the respective $TMPDIR
npm run dev
docker run --rm -it -w /code -v (PWD):/code hermes /bin/sh -c 'node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot --inline --port 3000'
docker run --rm -it -v (PWD):/code hermes /bin/sh -c 'cd /code && webpack'
node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot --inline --port 3000
This command create the unwanted files on the project's directory
docker run --rm -it -w /code -v (PWD):/code hermes /bin/sh -c 'npm run dev'
I'll find a solution later and keep using one of the working commands. Closing.
Hi, I'm not sure what's wrong but if Elm runs into an error and it can't compile, it seems that webpack stops picking up changes after that. This happens with the elm-webpack-starter webpack.config and any other ones I try with elm + webpack. Any thoughts?
You can see my current webpack.config.js
here: https://github.com/sircharleswatson/elm-architecture-hop/blob/master/webpack.config.js
I tried to make native elm module, which requires another npm module (client-side).
How I can force postprocessing require
calls into elm-compiled js.
This isn't really an issue but more of a suggestion.
I just cloned this repo so I could test out the example but when I cd'd into the example and did everything like it says, it doesnt work because the webpack config is set to use the main index.js file as the loader. webpack gives errors because lodash
can't be found.
My suggestion is to edit the example's webpack config so that it uses the actual elm-webpack
loader and to also edit the package.json to include elm-webpack-loader
as a dependency. That way the example can be used as more of a boilerplate and doesnt require installation of both the loader's npm packages as well as the examples packages.
If you take a look at this thread, elm/compiler#1473 (comment) you'll find that elm make won't work in almost all CI servers.
And hence running a webpack
, will 100% timeout.
I've pieced together this gulp file:
var Gulp = require('gulp');
var Gutil = require('gulp-util');
var Webpack = require('webpack');
// var CommonsChunkPlugin = Webpack.optimize.CommonsChunkPlugin;
var UglifyJsPlugin = Webpack.optimize.UglifyJsPlugin;
var executionCount = 0;
Gulp.task('webpack', function (callback) {
var config = {
watch: global.isWatching,
entry: {
bingo: './client/pages/bingo/index',
anotherpage: './client/pages/another-page/index'
},
output: {
path: './public/pages',
filename: '[name].min.js'
},
resolve: {
extensions: ['', '.js', '.elm']
},
module: {
loaders: [
{ test: /\.elm$/, exclude: /node_modules/, loader: 'elm-webpack-loader' }
]
}
};
Webpack(config, function (err, stats) {
if (err) {
throw new Gutil.PluginError('webpack', err);
}
Gutil.log('[webpack]', stats.toString({
colors: true,
chunkModules: false
}));
if (executionCount === 0) {
callback();
}
executionCount += 1;
});
});
But I get these warnings:
WARNING in ./client/pages/bingo/index.elm
Critical dependencies:
10399:113-120 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./client/pages/bingo/index.elm 10399:113-120
WARNING in ./client/pages/another-page/index.elm
Critical dependencies:
10399:113-120 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./client/pages/another-page/index.elm 10399:113-120
It appears to compile fine, but then the app doesn't render and I get console log error:
ReferenceError: Elm is not defined
var app = Elm.fullscreen(Elm.Bingo);
Is this an issue with Webpack or is there something I am missing?
Would it be possible to add a debug option for the loader? #71
Hi
I faced an issue with my ports Module. After digging deeper, I found out there is a problem with how ports module code is emitted.
Basically, any port module in Elm has a dependency to Json.Decode as it uses decoders specified in that module for js-elm communications.
So if the project's port module has:
Then the resulting JS will include the port module code before Json.Decode which causes all decoders to be Undefined. This results in all user defined incoming ports to stop throw exceptions.
SSCCE here: https://github.com/adityav/elm-ports-issue
btw, user pdamoc on slack tried this with elm-make. Which, it turns out, emits JS code in correct order. So we concluded this must be a elm-webpack-loader issue.
I accidentally created a module that references itself. While elm-make prints a clear error message, webpack will stall without any feedback. I had to fall back to elm-make to figure out the issue.
Using a standard webpack configuration like the one below:
module :
{ loaders :
[
{ exclude : [/elm-stuff/, /node_modules/]
, loader : "elm-webpack"
, test : /\.elm$/
}
]
}
And the following elm code:
port message_ : (String -> msg) -> Sub msg
main : Program Never
main =
App.program
{ init = (initModel, Cmd.none)
, subscriptions = \_ -> message_ identity
, update = dispatch
, view = view
}
initModel = "NOT WORKING!"
dispatch msg _ = (msg, Cmd.none)
view model = Html.span [] [Html.text model]
The module loaded in the entry script (index.js) is not able to send messages to Elm application:
var Elm = require("./src/Main.elm");
var app = Elm.Main.fullscreen();
app.ports.message_.send("Hello World!");
In the example above, I would expect the webpage to display:
Hello World!
But instead, it's displaying the default message (initial model):
NOT WORKING!
Attached to this thread is a sample configuration to quickly reproduce the issue. Just "npm install" and "npm run build".
With the following config
module: {
loaders: [
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
loader: 'elm-webpack?cache=true'
},
changes aren't detected in any elm files except Main.elm. If I remove the cache
option then they're detected in all elm files.
(BTW the cache option is otherwise awesome, brought my build down from 60s to less than 3s!)
Hey,
I want to use Elmx together with Webpack. As far as I can see, there's no such webpack plugin right now. Judging from the source code of elm-webpack-loader, it shouldn't be to much hassle.
My question is whether that should be integrated into elm-webpack-loader (like babel-loader supports JSX) or whether that should go into a separate loader?
From poking around the error on line 59 seems to be a string, and a recent change is looking for an object. Watching in version 3.0.0 seems to work correctly.
FYI @glenjamin
Not sure if it just requires a configuration change, but you can reproduce this in the example here in the project.
npm run watch
Then make a change in ./src/Hello/World.elm
Webpack's watch won't detect the change. It will update if you change ./src/Main.elm though.
I've tested this with webpack dev server too without any luck.
The workflow will be awesome if we can get this working.
Hi there!
Saw your presentation on ELM, awesome and funny... enthusiastic ;-)
I tried setting this up, but I can not get it to work. I am very unfamiliar with ELM, but like the concepts. I am very familiar with webpack, flux etc. though.
I put the "elm-stuff" directory from the examples into my project, but when I run webpack I get:
Bundling...
(line 31, column 15):
unexpected "e"
Bundled in 365ms!
Did you get it to work?
There is an other webpack loader https://github.com/unindented/ulmus-loader that's more up to date.
This package is more discoverable of course, so I was wondering if it is ok that I merge ulmus-loader into this repo (@rtfeldman has given me acces to this repo, thanks!)
@unindented are you fine with this?
Hi,
I am getting error (see error below) on line 96 of this file -> elm-webpack-loader/node_modules/node-elm-compiler/worker.js
Error:
errorMessage +=
^
Unexpected token ILLEGAL`
Isn't ` suppose to be " ?
I have the following code
div [ class "picture", style [("background-image","url(images/img-example.png)")]][ ]
or
div [ class "picture" ] [
img [ src "images/img-example.png"] []
]
but after build the app with webpack the image is not loaded.. how can accomplish that?
I need the image loaded inline because is dinamyc (comes inside a record attribute).
I can't get this fix mentioned by @gkubisa in #88 to work using webpack-dev-middleware and webpack-hot-middleware with an express server. I made a boilerplate repo to showcase the bug:
https://github.com/marksauter/elm-webpack-express-boilerplate
It's very possible I'm missing something obvious, because I am very new to all this.
I can only get hot reload to work - in the above boilerplate - when I modify the Main.elm file, but I can't get it to work when I modify the Home.elm file. Hot reload worked when I was using elm-webpack-loader v3.x.x.
Running on Windows 10 machine.
I may have missed it in the readme, but is there a way to set the resolve directory for elm-webpack-loader to a custom directory?
It looks like it requires elm-stuff
to be at the same directory level as the webpack config file.
Also, when trying to load another module it requires that at the same level as webpack. I'd like to be able to specify my own directory within my application structure.
wepback.config.js
web/
elm/
elm-stuff/
Main.elm
MainUtils.elm
...
vs.
wepback.config.js
elm-stuff/
MainUtils.elm
web/
elm/
elm-stuff/
Main.elm
MainUtils.elm
A bit of background:
In my project I have the following source directories in my elm-package.json:
"source-directories": [
"src/Lib",
"src/Components",
"src"
],
The reason for this is that I wanted to put my TEA components in a different directory from my utility functions. With just the src
source-directory, my imports would be like (made up example):
import Components.Button as Button
import Components.Table as Table
etc...
It was getting really annoying to type. If "src/Components" is added, then the following will have the same effect:
import Button
import Table
It's much less verbose, but it might be confusing someone reading the code who might expect Button to be at src/Button
, not src/Components/Button
. They'd have to look at elm-package.json to realise this.
This trick was suggested to me by someone in Slack. I'm still undecided if it's a good idea or not. This may well be an anti-pattern, but it's at least valid Elm code that will successfully compile, and elm-package must have source-directories
and not source-directory
for some reason. Unfortunately Elm doesn't have a relative import syntax that I'm aware of, so as things get more deeply nested, typing imports gets more and more annoying.
In any case, I've gone long down that path, and it doesn't work with elm-webpack-loader, as elm-node-compiler assumes a single baseDir. I'm not sure if many other people are using this technique for organising medium to large code bases, but it would be nice, if they are, to get a warning that multiple source directories are not supported, perhaps by reading the elm-package.json? Currently watching of files will fail silently for any dependent files not in the main src directory, which makes it very difficult to work out why things aren't re-compiling (I spent a good number of hours narrowing this one down!)
Judging from the code in node-elm-compiler, it looks like it would be a significant rework to actually support multiple source directories, and it may not be worth the effort, as I may be the only person doing this technique!
The recent patch #80 will make loader pick-up changes only when webpack-dev-server is invoked from CLI.
The following checks only process.argv
but it should be also checking for programmaic use, when webpack-dev-server is used through Node.js API
var hasWebpackDevServer = Array.prototype.filter.call(process.argv, function (arg) {
return arg.indexOf('webpack-dev-server') !== -1;
}).length > 0;
I would love to look in to that, but I'm not quite sure how to detect webpack-dev-server programmatic use. Any hints?
I'm not sure this is a problem with webpack or this module but I work on a project where we want to move some of the models and helper-functions in to separate files as we reuse them across the application. It gets kind of messy to have all the files in the same folder and elm have support for building from multiple folders.
I thought this was working, but empirically it's not.
Hello. First of all, thanks for making the loader π It made my team's life much easier.
While developing OpenIRC, I think I found an error:
webpack --watch
cannot detect a change in imported module from other directory.
webpack.config.js
:
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// Always enabled plugins
const plugs = [
new ExtractTextPlugin('_bundle.css')
];
// Production only plugins
const prod = [
new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }),
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
];
module.exports = {
entry: './main.js',
context: `${__dirname}/src`,
output: {
filename: '_bundle.js',
path: `${__dirname}/../server/public/build`,
publicPath: '/build/',
},
module: {
loaders: [
{ test: /\.txt$/, loader: 'raw' },
{ test: /\.png$/, loader: 'file?name=static/[hash].[ext]' },
{ test: /\.(woff2?|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file?name=static/[hash].[ext]' },
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css') },
{ test: /\.styl$/, loader: ExtractTextPlugin.extract('style', 'css!postcss!stylus') },
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: { presets: ['latest'] }
},
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
loader: 'elm-webpack'
}
]
},
plugins: process.env.NODE_ENV !== 'production' ? plugs : plugs.concat(prod),
devtool: 'source-map',
postcss: _ => [autoprefixer]
};
elm-package.json
:
{
"version": "0.0.0",
"summary": "IRC Client for everyone!",
"repository": "https://github.com/openirc/openirc.git",
"license": "AGPL-3.0",
"source-directories": [
"./src/", "./src/a"
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "5.0.0 <= v < 6.0.0",
"elm-lang/dom": "1.1.1 <= v < 2.0.0",
"elm-lang/html": "2.0.0 <= v < 3.0.0"
},
"elm-version": "0.18.0 <= v < 0.19.0"
}
There is src/App.elm
(which is imported main.js
or something) which imports a module from src/a/View.elm
. When I run webpack --watch
under this condition, initial build proceeds with no problem. However, when I make a change in src/a/View.elm
, automatic re-build doesn't get triggered.
I'm new to elm ecosystem so I'm not sure if this is elm-webpack-loader
's problem, but it's my best guess for now. If it's not, please let me know. Thank you for reading.
OK, so I am using Webpack 2 and latest elm-webpack-loader. Tried cwd parameter, tried without it. If I do
const main = require('../elm/Main')
// const child = require('../elm/Sub/Child')
the one required will be reloaded once I save changes to the file. The one not required won't be reloaded. I have a complex application with dozens of files and this is becoming a problem.
I use Elm with Phoenix back-end and this is the webpack command used to watch for changes:
webpack --progress --watch-stdin --debug
A very small example that reproduces the problem is attached. If I correctly understand intention behind elm-webpack-loader, it should watch for all subfolders without cwd parameter, only for specific ones listed in elm-package.json with cwd parameter. Can't get it to work.
https://www.elm-tutorial.org/en/04-starting/04-webpack-2.html
The tutorial above works as of elm-webpack-loader 3.0.3 but all releases 3.0.4 and greater caused a build error with index.js
Reproduction:
git clone https://github.com/fluxxu/elm-webpack-test
npm install
npm start
If I change Main.elm, app get recompiled and reloaded.
If I change View.elm, nothing happens.
Hi,
Following the directions, I get a install and build with no errors and then this error when loading.
I'm using node v5.0.0 - just wiped it all away and reinstalled with nvm to eliminate node isues.
I'm using chrome and osx for what it's worth. Below are some screen shots:
I'd really love to use this. Please let me know if you have any ideas as to how I could track this down!
Please forgive me if this is not technically an issue or if its something webpack related instead of elm as I am new to both.
in webpack --watch
mode, when compiling elm, if there is an error I see the error in the console which is great, when I fix the error and save the file, elm re-compiles and everything works perfectly.
However, if after fixing the error there is other error in the elm files, I do not see an updated error in the console, the console does not update at all and I only the first error. To see the new error I have to terminate webpack --watch
and restart it again.
Is that by design?
My webpack loader:
...
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
loader: 'elm-webpack?cwd=' + elmSource
},
...
Hi, if I run node_modules/.bin/webpack-dev-server
directly from the shell without a global elm-make
installed, I get into trouble:
$ git clone [email protected]:magnificat/ditty-songbook
$ cd ditty-songbook && git checkout fca2d10
$ npm install
$ scripts/start
http://localhost:9111/
webpack result is served from /
content is served from /home/tomekwi/Web/magnificat/ditty-songbook/static
Could not find Elm compiler "elm-make". Is it installed?
When I call it from an npm script, npm adjusts the PATH
and everything is alright.
Itβs no problem for me to adjust the PATH
manually. But this sounds like an implicit dependency on npm β you probably donβt want that.
Would be great to have an sample webpack config file or point to a project that uses elm-webpack-loader.
Thanks!
Depends on rtfeldman/node-elm-compiler#21.
This may seem contrived, but for larger apps I end up with lots of small components (at least with React, so I suspect Elm as well).
A change to the root module, or a direct dependent recompiles great:
Main.elm -> Hello.World.elm = π
A change to a dependent of a dependent however does not kick off a recompile:
Main.elm -> Hello.World.elm -> Hello.Again.elm = π
I made a quick fork to test it out.
https://github.com/rapind/elm-webpack-loader/tree/master/example/src/Hello
I was under the impression that Bower was used for managing browser libraries. I've never seen a webpack loader loaded through anything other than npm.
Does it make sense to maintain the bower.json
file then?
Hi, I'm developing a few libraries using elm-webpack-loader
for the examples.
The loader works fine for code in the main example, but it doesn't pick changes in the library code.
I made a branch with minium code that shows the issue:
https://github.com/sporto/elm-select/tree/webpack-loader
When I change code in
https://github.com/sporto/elm-select/blob/webpack-loader/example/src/Example1.elm
The loader works fine
But when I change code in the library, the loader doesnt pick up the changes. e.g.
https://github.com/sporto/elm-select/blob/webpack-loader/src/Select.elm
I need to kill and restart webpack.
This is how my elm-package.json looks like https://github.com/sporto/elm-select/blob/webpack-loader/example/elm-package.json
Thanks
If the Elm compiler spits out some warnings, they should go to Webpack - but I don't think they do. The webpack stats.hasWarnings()
is always false, even though there are warnings. I don't know much about the internals of Webpack plugins but can we detect when warnings are produced and pass them onto Webpack so stats.warnings
isn't just always an empty array?
Webpack is displaying elm log without the colours, is there a way to remedy this?
When declaring port module Main exposing (..)
in Main.elm
you end up with:
However when editing and saving files other than the Main.elm
file nothing is reloaded.
Hi,
What's the recommended way for dealing with multiple environments? i.e. development, production. The reason I ask this is because I want to have, for example, an Env
module that holds a base url with a different scheme/host/port depending on the environment.
Something along the lines of the following:
module Env exposing (..)
apiBaseUrl =
if process.env.NODE_ENV == "development" then
"http://localhost:3000/api/v1"
else
"https://api.example.com/api/v1"
Since process.env.NODE_ENV
isn't available (as far as I know) in Elm, how can do something like this?
Thanks!
Elm normally lets you access your webpage when the build failed by loading the latest working build. With elm-webpack-loader once the build fail the page will load the failed build.
Is there a way around that?
It's blocking me from using the hot feature
I just ran down the rabbit hole trying to work out why elm-webpack-loader wasn't working on El Capitan. Turns out I was using the old version of this package - v0.2.0 (the bug was fixed in Elm 0.15.1). I know you can reference the git repo directly with npm, but it would be great if you could update it so that others don't get confused.
If I make any change to a module that causes a compiler error, my code won't recompile when I save the module that caused the error again.
I usually have to resave the Main.elm file in order for the loader to pick it up and recompile. Not sure if this is an issue with the loader or webpack, but since it works fine unless you get any errors I figured I might as well bring it up here to start with.
In short, steps to reproduce:
And it will not recompile until I resave Main which have had no changes.
I have my Elm file correctly compiled by original elm-compiler, but as I try to compile it with elm-webpack-loader and try to import it on JS-side, it reports error.
My files are imported like this:
const Elm = require("elmmodule.js")
console.log(Elm)
// returns {} (compiled by elm-webpack-loader)
// returns {Main} (compiled by original elm-compiler)
My configuration looks like this:
const webpack = require('webpack');
const path = require('path');
const elmSource = __dirname + '/src/elm/'
module.exports = {
context: path.join(__dirname, "src"),
devtool: "inline-sourcemap",
...
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: [
'react', 'es2015', 'stage-0'
],
plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties']
}
}, {
test: /\.elm$/,
exclude: [/(elm-stuff|node_modules)/],
loader: 'elm-webpack?cwd=' + elmSource
}
]
},
...
Is there something I am doing wrong?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.