Giter Club home page Giter Club logo

elm-webpack-loader's People

Contributors

dependabot[bot] avatar dosarf avatar eeue56 avatar halfzebra avatar heyakyra avatar igrep avatar ja-be avatar jwashton avatar lukewestby avatar marcosccm avatar mbylstra avatar mrmurphy avatar mstruebing avatar opsb avatar rapind avatar reiner-dolp avatar robinheghan avatar roebuk avatar ronanyeah avatar rtfeldman avatar ryantd avatar simonh1000 avatar smucode avatar sporto avatar svoynow avatar tcoopman avatar terakilobyte avatar unindented avatar vic avatar xtian avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

elm-webpack-loader's Issues

Specify main modules for elm make

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.

`output` option not passing down to the elm-make

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

Update to support Electron target

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.

Webpack Dev mode error: Final loader didn't return a Buffer or String

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.

The refactor 22 days ago fixes a bug in current npm version.

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.

Unwanted files generated and not removed

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

screen shot 2017-01-09 at 3 07 25 pm

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.

UPDATE:

If I run just webpack instead of webpack-dev-server the files are writed to /tmp.

UPDATE

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.

Suggestion for Example

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.

Warning when compiling and ReferenceError

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?

Debug Option

Would it be possible to add a debug option for the loader? #71

emitting module code in wrong order

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:

  • Name beginning with a letter before J, and
  • does not have a declared dependency on Json.Decode

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.

Can't send messages to elm ports

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".

Changes only detected in Main.elm with cache option enabled

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!)

Elmx support?

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?

Watch doesn't recompile when changing modules other than Main elm file.

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.

Sweet, but how to make it work?

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?

Error on line 96 of worker.js

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 " ?

Load image from inline-style or img tag

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).

Hot reload not working with webpack-dev-middleware/webpack-hot-middleware on express server

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.

Resolve Directory

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

watch functionality fails silently if project has multiple elm-package `source-directories`

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!

Loader is not picking up changes when running webpack-dev-server programmatically

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?

Watch for changes in multiple folders

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.

Cannot detect a change in imported module from other directory

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.

Webpack 2 - doesn't pick up changes in any file, unless explicitly required in JS

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.

elm-deep-load.tar.gz

4.0.0: Only Main module can trigger re-compile

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.

console error: Uncaught SyntaxError: Unexpected token import

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:
screen shot 2016-04-27 at 3 51 08 pm
screen shot 2016-04-27 at 4 06 11 pm

I'd really love to use this. Please let me know if you have any ideas as to how I could track this down!

New errors don't update in the console

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
},
...

Doesn’t notice the local `elm-make` when called outside npm

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.

Example webpack config file

Would be great to have an sample webpack config file or point to a project that uses elm-webpack-loader.

Thanks!

Watch doesn't recompile when changing nested modules deeper than 2 levels.

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

Kill bower.json

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?

Loader doesn't pick up changes in library src folder

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

Warnings don't get reported to Webpack

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?

Elm log lost colours

Webpack is displaying elm log without the colours, is there a way to remedy this?

Recursive reloading breaks with a port Main module

When declaring port module Main exposing (..) in Main.elm you end up with:

  • A working application.
  • No errors from elm-make or elm-reactor.

However when editing and saving files other than the Main.elm file nothing is reloaded.

Multiple environments

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!

Use latest working build rather than latest build

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

Update npm package

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.

Doesn't recompile after error unless Main is changed

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:

  1. Open a module that is imported in Main
  2. Make a change that will break the code (which will cause the compiler to throw an error)
  3. Fix the the error and save

And it will not recompile until I resave Main which have had no changes.

Elm-ports doesn't expose {Main.worker}

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.