elm-hot-webpack-loader

1.1.8 verified Sat Apr 25 auth: no javascript

Webpack loader that enables hot module replacement (HMR) for Elm 0.19 applications, preserving application state across code changes during development. Current stable version is 1.1.8, released on a maintenance cadence. Requires elm-webpack-loader ^7.0.1 as a peer dependency. Unlike alternatives (e.g., elm-hot without Webpack), it integrates seamlessly into existing Webpack setups, requiring only a single loader addition. Does not support Elm 0.18.

Common errors

error Module not found: Error: Can't resolve 'elm-hot-webpack-loader' ↓

cause The package is not installed or not in node_modules.

fix

npm install --save-dev elm-hot-webpack-loader

error Error: You must run webpack-dev-server with --hot flag ↓

cause Hot module replacement is not enabled.

fix

Add --hot to webpack-dev-server command or set devServer.hot: true in webpack config.

error Uncaught TypeError: Cannot read properties of null (reading 'register') ↓

cause elm-hot-webpack-loader must be placed before elm-webpack-loader in the webpack config.

fix

Swap the loader order so that elm-hot-webpack-loader is first.

Warnings

deprecated Elm 0.18 is not supported. Use fluxxu/elm-hot-loader@0.5.x instead. ↓

fix Use elm-hot-loader@0.5.x for Elm 0.18 projects.

gotcha The loader order is critical: elm-hot-webpack-loader must appear before elm-webpack-loader in the use array. ↓

fix Swap loader order so that elm-hot-webpack-loader is first.

gotcha webpack-dev-server --hot flag is required for older versions; newer versions may enable HMR by default. ↓

fix Use CLI flag --hot or set devServer.hot: true in config.

Install

npm install elm-hot-webpack-loader

yarn add elm-hot-webpack-loader

pnpm add elm-hot-webpack-loader

Imports

elm-hot-webpack-loader

wrong

use: [{ loader: 'elm-webpack-loader' }, { loader: 'elm-hot-webpack-loader' }]

correct

use: [{ loader: 'elm-hot-webpack-loader' }, { loader: 'elm-webpack-loader' }]

Order matters: elm-hot-loader must come before elm-webpack-loader in the use array.

elm-hot (runtime)

wrong

npm install elm-hot and import it manually

correct

No explicit import; loader injects HMR code automatically.

elm-hot is a transitive dependency; do not install or import it directly.

Webpack HotModuleReplacementPlugin
wrong
```
Explicitly requiring webpack.HotModuleReplacementPlugin
```
correct
```
devServer: { hot: true } or --hot flag
```
In webpack-dev-server v4+, hot is enabled by default; older versions may need the --hot flag.

Quickstart

Demonstrates correct Webpack configuration using elm-hot-webpack-loader before elm-webpack-loader, with hot module replacement enabled in devServer.

// webpack.config.js
module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        use: [
          { loader: 'elm-hot-webpack-loader' },
          {
            loader: 'elm-webpack-loader',
            options: {
              cwd: __dirname
            }
          }
        ]
      }
    ]
  },
  devServer: {
    static: './dist',
    hot: true
  }
};

// Main.elm (basic Elm app)
module Main exposing (main)
import Browser
main = Browser.sandbox { init = 0, update = \\_ model -> model, view = \\_ -> Html.text "Hello" }