Develop Reference

Rails, Webpacker, and Elm: How dow I correctly import files?

I'm having trouble correctly importing the Elm modules I'm writing in my Rails 5.1.4 app using the default conventions from Webpacker.
Here's my current directory structure for my app/javascript directory:
tree
.
├── heritage_survey
│ ├── Language.elm
│ ├── Languages.elm
│ ├── Main.elm
│ └── index.js
├── packs
│ └── heritage_survey.js
└── util
├── Maybe.elm
└── String.elm
packs/heritage_survey.js contents:
import 'heritage_survey'
heritage_survey/index.js contents:
import Elm from './Main'
import './Language'
import './Languages'
import 'util/String'
import 'util/Maybe'
document.addEventListener('turbolinks:load', () => {
const target = document.getElementById('heritage-survey')
Elm.Main.embed(target);
});
And finally, here's the import statements from heritage_survey/Main.elm:
import Html exposing (Html, h1, text, form, div, input, label, select, option, button)
import Html.Attributes exposing (class, for, value, type_, disabled, selected, multiple, checked)
import Html.Events exposing (on, onCheck, onInput)
import Json.Decode
import Language exposing (Languages, Language)
import Util.Maybe as May
Unfortunately, I get the following webpack compile error:
14:39:59 webpack.1 | webpack: Compiling...
14:39:59 webpack.1 | 10% building modules 0/1 modules 1 active ...p/javascript/heritage_survey/Main.elmRunning /Users/mueller.128/repos/asctech/multicat/node_modules/.bin/elm-make /Users/mueller.128/repos/asctech/multicat/app/javascript/heritage_survey/Main.elm --yes --warn --debug --output /var/folders/lw/nfv4jfkj1tg1q0r9tt7n6yrcgknvck/T/117108-49541-128p571.4v28.js
Hash: 29154e6aed5cde6dc2e8
14:39:59 webpack.1 | Version: webpack 3.8.1
14:39:59 webpack.1 | Time: 417ms
14:39:59 webpack.1 | Asset Size Chunks Chunk Names
14:39:59 webpack.1 | heritage_survey-4b40cb19cfb9f25f7791.js 2.19 MB 0 [emitted] [big] heritage_survey
14:39:59 webpack.1 | manifest.json 76 bytes [emitted]
14:39:59 webpack.1 | [2] multi (webpack)-dev-server/client?http://0.0.0.0:3035 ./app/javascript/packs/heritage_survey.js 40 bytes {0}
14:39:59 webpack.1 | [3] (webpack)-dev-server/client?http://0.0.0.0:3035 7.95 kB {0}
14:39:59 webpack.1 | [4] ./node_modules/url/url.js 23.3 kB {0}
14:39:59 webpack.1 | [5] ./node_modules/punycode/punycode.js 14.7 kB {0}
14:39:59 webpack.1 | [11] ./node_modules/strip-ansi/index.js 161 bytes {0}
14:39:59 webpack.1 | [12] ./node_modules/ansi-regex/index.js 135 bytes {0}
14:39:59 webpack.1 | [13] ./node_modules/loglevel/lib/loglevel.js 7.74 kB {0}
14:39:59 webpack.1 | [14] (webpack)-dev-server/client/socket.js 1.05 kB {0}
14:39:59 webpack.1 | [16] (webpack)-dev-server/client/overlay.js 3.73 kB {0}
14:39:59 webpack.1 | [21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
14:39:59 webpack.1 | [23] (webpack)/hot/emitter.js 75 bytes {0}
14:39:59 webpack.1 | [25] ./app/javascript/packs/heritage_survey.js 25 bytes {0}
14:39:59 webpack.1 | [26] ./app/javascript/heritage_survey/index.js 261 bytes {0}
14:39:59 webpack.1 | [30] ./app/javascript/util/String.elm 81 kB {0}
14:39:59 webpack.1 | [31] ./app/javascript/util/Maybe.elm 80.8 kB {0}
14:39:59 webpack.1 | + 17 hidden modules
14:39:59 webpack.1 |
14:39:59 webpack.1 | ERROR in ./app/javascript/heritage_survey/Main.elm
14:39:59 webpack.1 | Module build failed: Error: Compiler process exited with error Compilation failed
14:39:59 webpack.1 | I cannot find module 'Language'.
14:39:59 webpack.1 |
14:39:59 webpack.1 | Module 'Main' is trying to import it.
14:39:59 webpack.1 |
14:39:59 webpack.1 | Potential problems could be:
14:39:59 webpack.1 | * Misspelled the module name
14:39:59 webpack.1 | * Need to add a source directory or new dependency to elm-package.json
14:39:59 webpack.1 |
14:39:59 webpack.1 | at ChildProcess.<anonymous> (/Users/mueller.128/repos/asctech/multicat/node_modules/node-elm-compiler/index.js:141:27)
14:39:59 webpack.1 | at emitTwo (events.js:126:13)
14:39:59 webpack.1 | at ChildProcess.emit (events.js:214:7)
14:39:59 webpack.1 | at maybeClose (internal/child_process.js:925:16)
14:39:59 webpack.1 | at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14:39:59 webpack.1 | # ./app/javascript/heritage_survey/index.js 1:0-25
14:39:59 webpack.1 | # ./app/javascript/packs/heritage_survey.js
14:39:59 webpack.1 | # multi (webpack)-dev-server/client?http://0.0.0.0:3035 ./app/javascript/packs/heritage_survey.js
14:39:59 webpack.1 | webpack: Failed to compile.

As it turns out, I also need to update source-directories in elm-package.json in the root of my application. I tried to only include ./app/javascript but that didn't seem to work. I had also had to include ./app/javascript/heritage_survey.
UPDATE:
Okay, I'm getting the hang of it now. Here's my final directory structure, their contents, and elm-package.json configuration.
app/javascript directory structure:
tree
.
├── HeritageSurvey
│   ├── Language.elm
│   ├── Languages.elm
│   ├── Main.elm
│   └── index.js
├── packs
│   └── heritage_survey.js
└── util
├── Maybe.elm
└── String.elm
app/javascript/packs/heritage_survey.js contents:
import 'HeritageSurvey'
app/javascripts/HeritageSurvey/index.js contents:
import Elm from './Main'
import './Language'
import './Languages'
import 'util/String'
import 'util/Maybe'
document.addEventListener('turbolinks:load', () => {
const target = document.getElementById('heritage-survey')
Elm.Main.embed(target);
});
app/javascript/HeritageSurvey/Main.elm import statements:
import Html exposing (Html, h1, text, form, div, input, label, select, option, button)
import Html.Attributes exposing (class, for, value, type_, disabled, selected, multiple, checked)
import Html.Events exposing (on, onCheck, onInput)
import Json.Decode
import HeritageSurvey.Language as Language exposing (Languages, Language)
source-directories in my elm-package.json configuration file:
"source-directories": [
"./app/javascript",
"./app/javascript/packs"
],

Webpack-dev-server — HMR Not receive update signal from WDS

HMR Not receive update signal from WDS
Operating System: MacOS 10.12.6
Node Version: 8.5.0
NPM Version: 5.3.0
webpack Version: 3.6.0
webpack-dev-server Version: 2.8.2
Code
// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
devServer: {
contentBase: './dist',
hot: true,
inline: true
},
entry: {
main: [
'./test/main.js'
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '__[name].js'
},
module: {
rules: [
{
test: /\.js?$/,
use: [
{
loader: 'babel-loader'
}
],
exclude: /\/(node_modules|bower_components)/
}
]
},
devtool: 'cheap-module-source-map',
plugins: [
new HtmlWebpackPlugin({
title: 'Hot Module Replacement'
}),
new webpack.HotModuleReplacementPlugin()
]
}
// ./test/main.js
console.log('Test')
if (module.hot) {
module.hot.accept()
}
Terminal output
webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
Hash: 07cd69bf3e44cc2f62fe
Version: webpack 3.6.0
Time: 990ms
Asset Size Chunks Chunk Names
__main.js 357 kB 0 [emitted] [big] main
__main.js.map 425 kB 0 [emitted] main
index.html 193 bytes [emitted]
[36] ./node_modules/webpack/hot/log.js 1.04 kB {0} [built]
[37] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./test/main.js 52 bytes {0} [built]
[38] (webpack)-dev-server/client?http://localhost:8080 7.27 kB {0} [built]
[39] (webpack)/node_modules/url/url.js 23.3 kB {0} [built]
[45] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {0} [built]
[47] (webpack)-dev-server/node_modules/loglevel/lib/loglevel.js 7.74 kB {0} [built]
[48] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
[80] (webpack)-dev-server/client/overlay.js 3.71 kB {0} [built]
[81] (webpack)-dev-server/node_modules/ansi-html/index.js 4.26 kB {0} [built]
[85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[87] (webpack)/hot/emitter.js 77 bytes {0} [built]
[88] ./node_modules/webpack/hot/dev-server.js 1.61 kB {0} [built]
[89] ./node_modules/webpack/hot/log-apply-result.js 1.31 kB {0} [built]
[90] ./node_modules/webpack/hot/emitter.js 77 bytes {0} [built]
[91] ./test/main.js 62 bytes {0} [built]
+ 77 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs 538 bytes {0} [built]
[1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Compiled successfully.
Generated html on http://localhost:8080/ by HtmlWebpackPlugin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hot Module Replacement</title>
</head>
<body>
<script type="text/javascript" src="__main.js"></script></body>
</html>
Chrome Console
log.js:23 [HMR] Waiting for update signal from WDS...
main.js:1 >>>
client:77 [WDS] Hot Module Replacement enabled.
Then change main.js — console.log('>>>>') to console.log('Changed')
Chrome Console after changed main.js
log.js:23 [HMR] Waiting for update signal from WDS...
main.js:1 >>>
client:77 [WDS] Hot Module Replacement enabled.
client:80 [WDS] App updated. Recompiling...
client:213 [WDS] App hot update...

I try your config on Ubuntu via Docker:
Operating System: Ubuntu 17.04 Zesty
Docker: 17.06.2-ce, build cec0b72
Node image: 8.5.0
My Dockerfile:
FROM node:latest
### Configuration
RUN mkdir -p /code
COPY ./webpack.config.js /code
### Requirements
RUN npm install -g webpack-dev-server#2.8.2
RUN npm install babel-loader babel-core babel-preset-env
RUN npm install html-webpack-plugin
RUN npm install webpack#3.6.0
### Application
WORKDIR /code
EXPOSE 8080
All works fine:
I think your problem in MacOS environment.
I hope my answer help you find problem.

Why does Webpack build of React web app fail when project is built in a different folder?

I have a React project which was built using Webpack. The weird issue is when I run the React app in my original folder it builds and runs without any error. However when I copy all the files in the folder, paste it in a new folder and then try to build the same project it fails. I have tried changing the folder name, changing the config files to reflect the new folder name, however it always fails in app.js and points to an error in render method. Few points to note:
I havent hardcoded any paths
I have cleaned the node modules and rebuilt the project from groundup including cleaning npm cache.
The same project works in my original folder without any errors.
The error I get is as follows:
Version: webpack 2.2.1
Time: 1520ms
Asset Size Chunks Chunk Names
app.js 219 kB 0 [emitted] main
index.html 636 bytes [emitted]
chunk {0} app.js (main) 208 kB [entry] [rendered]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[32] ./src/app.js 783 bytes {0} [built] [failed] [1 error]
[33] (webpack)-dev-server/client?http://0.0.0.0:8080 4.16 kB {0}
[built]
[34] ./~/ansi-regex/index.js 135 bytes {0} [built]
[35] ./~/punycode/punycode.js 14.7 kB {0} [built]
[36] ./~/querystring-es3/decode.js 2.51 kB {0} [built]
[38] ./~/querystring-es3/index.js 127 bytes {0} [built]
[40] ./~/sockjs-client/lib/entry.js 244 bytes {0} [built]
[47] ./~/sockjs-client/lib/main.js 11.9 kB {0} [built]
[49] ./~/sockjs-client/lib/transport-list.js 613 bytes {0}
[built]
[66] ./~/strip-ansi/index.js 161 bytes {0} [built]
[68] ./~/url/url.js 23.3 kB {0} [built]
[69] ./~/url/util.js 314 bytes {0} [built]
[70] (webpack)-dev-server/client/socket.js 897 bytes {0} [built]
[72] multi (webpack)-dev-server/client?http://0.0.0.0:8080
./src/app.js
40 bytes {0} [built]
+ 58 hidden modules
ERROR in ./src/app.js
Module build failed: SyntaxError: Unexpected token (39:2)
37 | // });
38 | ReactDOM.render(
> 39 | <div>Hello</div>,
| ^
40 | document.getElementById('content'),
41 | );
42 |
# multi (webpack)-dev-server/client?http://0.0.0.0:8080
./src/app.js
Child html-webpack-plugin for "index.html":
chunk {0} index.html 542 kB [entry] [rendered]
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 1.32
kB
{0} [built]
webpack: Failed to compile.
The above error doesn't happen when running in my original folder. What is the issue here?

Your .babelrc file is in the root of your project directory, and thats where webpack looks for it to use your loaders and presets. You can workaround by using the following config
{
use: [
{
loader: 'babel-loader',
options: {
babelrc: false,
presets: [require.resolve('babel-preset-react-app')], // <- Whatever preset you wish
cacheDirectory: true,
}
}
],
test: /\.js$/,
exclude: /node_modules/
},

resolving ts-loader in a path using webpack 2.2.1 in a script

Given the following gulp task.
I get error output
Module not found: Error: Can't resolve 'app.ts' in 'wwwroot/js/admin'
gulp.task("admin:js", function (done) {
module.exports = {
context: "wwwroot/js/admin",
entry: ["app.ts", "zippy.ts"],
output: {
filename: "admin.js"
},
devtool: "source-map",
module: {
rules: [
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
webpack(module.exports).run(onBuild(done));
});
with directory structure
wwwroot\js\admin\app.ts
wwwroot\js\admin\zippy.ts
I am getting this error:
Version: webpack 2.2.1
Time: 31ms
Asset Size Chunks Chunk Names
admin.js 2.87 kB 0 [emitted] main
admin.js.map 2.61 kB 0 [emitted] main
chunk {0} admin.js, admin.js.map (main) 40 bytes [entry] [rendered]
[0] multi app.ts zippy.ts 40 bytes {0} [built]
ERROR in multi app.ts zippy.ts
Module not found: Error: Can't resolve 'app.ts' in 'wwwroot/js/admin'
# multi app.ts zippy.ts
ERROR in multi app.ts zippy.ts
Module not found: Error: Can't resolve 'zippy.ts' in 'wwwroot/js/admin'
# multi app.ts zippy.ts
It's a path issue, as if I execute webpack from the command line, in the wwwroot\js\admin directory, without the context path, the files get bundled correctly and it all works.
When I use the API script, and execute from the project root (relative to .\wwwroot\js\admin) I get the error output.

webpack does not support the use of relative paths in the context configuration entry.
changing context as follows:
module.exports = {
context: __dirname + "/wwwroot/js/admin",
...
corrected the output.
Version: webpack 2.2.1
Time: 2337ms
Asset Size Chunks Chunk Names
admin.js 1.24 MB 0 [emitted] [big] main
admin.js.map 1.48 MB 0 [emitted] main
chunk {0} admin.js, admin.js.map (main) 1.24 MB [entry] [rendered]
[0] ./~/angular/index.js 48 bytes {0} [built]
[1] ./wwwroot/js/admin/app.ts 408 bytes {0} [built]
[2] ./wwwroot/js/admin/zippy.ts 1.16 kB {0} [built]
[3] ./~/angular/angular.js 1.24 MB {0} [built]
[4] multi ./app.ts ./zippy.ts 40 bytes {0} [built]
[10:30:37] Finished 'admin:js' after 2.43 s

Webpack extreme slow build

I use webpack + typescript + react.
webpack.config.js is:
var webpack = require('webpack');
var path = require('path');
var node_modules_dir = path.join(__dirname, 'node_modules');
var deps = [
'react/react.js',
'react-dom/react-dom.js',
];
var config = {
devtool: 'source-map',
context: __dirname + '/Scripts/ts',
entry: {
server: "./server.js",
client: "./client.ts"
},
output: {
path: path.resolve(__dirname, "Scripts/public/"),
filename: '[name].bundle.js'
},
resolve: {
alias: {},
modulesDirectories: ["node_modules"],
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
noParse: [],
// Use the expose loader to expose the minified React JS
// distribution. For example react-router requires this
loaders: [ {
test: /\.ts(x?)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader?presets[]=es2015&presets[]=react!ts-loader'
},
{
test: path.resolve(node_modules_dir, deps[0]),
loader: "expose?React"
},
]
},
watch: true
};
deps.forEach(function (dep) {
var depPath = path.resolve(node_modules_dir, dep);
config.resolve.alias[dep.split(path.sep)[0]] = depPath;
config.module.noParse.push(depPath);
});
module.exports = config;
My problem is build speed. An initial process takes about 25s and incremental - 5-6 s. The result of:
webpack --profile --display-modules
is:
ts-loader: Using typescript#1.8.0-dev.20160104 and C:\Users\rylkov.i\Documents\Visual Studio 2013\Projects\react_test_app\react_test_app\tsconfig.json
Hash: d6d85b30dfc16f19f4a6
Version: webpack 1.12.9
Time: 25547ms
Asset Size Chunks Chunk Names
client.bundle.js 1.14 MB 0 [emitted] client
server.bundle.js 1.14 MB 1 [emitted] server
client.bundle.js.map 1.31 MB 0 [emitted] client
server.bundle.js.map 1.31 MB 1 [emitted] server
[0] ./client.ts 80 bytes {0} [built]
factory:38ms building:21905ms dependencies:1ms = 21944ms
[0] ./server.js 70 bytes {1} [built]
factory:14ms building:19ms = 33ms
[1] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/expose-loader?Components!./components/index.js 179 bytes {0} {1} [built]
[0] 33ms -> factory:2078ms building:8ms = 2119ms
[2] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/index.js 210 bytes {0} {1} [built]
[0] 33ms -> [1] 2086ms -> factory:19832ms building:4ms = 21955ms
[3] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/main.tsx 4.78 kB {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:26ms building:331ms dependencies:1ms = 22313ms
[4] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/react/react.js 172 bytes {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> [3] 357ms -> factory:315ms building:0ms = 22627ms
[5] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/react/react.js 641 kB {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> [3] 357ms -> [4] 315ms -> factory:1ms building:86ms = 22714ms
[6] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/todoItem.tsx 2.81 kB {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:28ms building:576ms dependencies:70ms = 22629ms
[7] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/selectControl.tsx 3.44 kB {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:27ms building:428ms dependencies:218ms = 22628ms
[8] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/react-dom/react-dom.js 1.17 kB {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> [7] 455ms -> factory:215ms building:4ms = 22629ms
[9] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ts/components/selectItem.tsx 2.63 kB {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> factory:28ms building:502ms dependencies:144ms = 22629ms
[10] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/imports-loader?$=jquery!C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/Scripts/ui-select.js 99.6 kB {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> [7] 455ms -> factory:150ms building:145ms = 22705ms
[11] C:/Users/rylkov.i/Documents/Visual Studio 2013/Projects/react_test_app/react_test_app/~/jquery/dist/jquery.js 348 kB {0} {1} [built]
[0] 33ms -> [1] 2086ms -> [2] 19836ms -> [7] 455ms -> [10] 295ms -> factory:10ms building:211ms = 22926ms
I think that this is extremely slow. react.js and react-dom.js are already compiled js files without extra require. My components are simply examples.
One more problem with webpack is:
watch:true
attribute of config. I can't understand why is works not always. But maybe this is because slow build process. Thanks!

One thing, specifically in development, make sure to set the mode:
module.exports = {
mode: "development"
// Other options...
}
If not set at all (looks like it's not in the shared webpack config), it will default to "production". This is ideal since you'll want your code ran in production mode for deploying because it minifies, does dead code elimination, some packages (eg: React) ship different builds depending on the environment, among other things.
However, if you're in development, running in production mode can add some build time cost because doing this minification, dead code elimination, etc. add to the overall build time. This is unavoidable for the actual production built so this won't help that build time, but assuming you're building significantly more in development it should save some time.
Additionally, consider changing the devtool option to a cheaper option such as cheap-module-eval-source-map or one of the other options in the docs: https://webpack.js.org/configuration/devtool/. The docs explain the differences and build time costs. The current option source-map is one of the slowest options.
module.exports = {
devtool: "eval-cheap-module-source-map"
// Other options...
}

You could try:
devtool: 'eval',
It will produce a considerably larger file but in half the time. Not recomended for production.

Removing dev-tool: source-maps should speed up the compilation time. Also it's important to note that your files are on the larger side as the output is over 1mb.
You could also add the cacheDirectory: true flag to babel-loader. I found that this greatly sped up my builds at my company. Reference - https://webpack.js.org/loaders/babel-loader/#options
Also I personally use the --watch flag for when I want webpack to run in watch mode. This lets me have more control over when I want it to actually run.