{"id":19460,"library":"elm-hot-webpack-loader","title":"elm-hot-webpack-loader","description":"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.","status":"active","version":"1.1.8","language":"javascript","source_language":"en","source_url":"https://github.com/klazuka/elm-hot-webpack-loader","tags":["javascript","Elm","HMR","hot","reload","loader","webpack"],"install":[{"cmd":"npm install elm-hot-webpack-loader","lang":"bash","label":"npm"},{"cmd":"yarn add elm-hot-webpack-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add elm-hot-webpack-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required to compile Elm code; elm-hot-webpack-loader only handles hot reloading, not compilation.","package":"elm-webpack-loader","optional":false}],"imports":[{"note":"Order matters: elm-hot-loader must come before elm-webpack-loader in the use array.","wrong":"use: [{ loader: 'elm-webpack-loader' }, { loader: 'elm-hot-webpack-loader' }]","symbol":"elm-hot-webpack-loader","correct":"use: [{ loader: 'elm-hot-webpack-loader' }, { loader: 'elm-webpack-loader' }]"},{"note":"elm-hot is a transitive dependency; do not install or import it directly.","wrong":"npm install elm-hot and import it manually","symbol":"elm-hot (runtime)","correct":"No explicit import; loader injects HMR code automatically."},{"note":"In webpack-dev-server v4+, hot is enabled by default; older versions may need the --hot flag.","wrong":"Explicitly requiring webpack.HotModuleReplacementPlugin","symbol":"Webpack HotModuleReplacementPlugin","correct":"devServer: { hot: true } or --hot flag"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  mode: 'development',\n  module: {\n    rules: [\n      {\n        test: /\\.elm$/,\n        exclude: [/elm-stuff/, /node_modules/],\n        use: [\n          { loader: 'elm-hot-webpack-loader' },\n          {\n            loader: 'elm-webpack-loader',\n            options: {\n              cwd: __dirname\n            }\n          }\n        ]\n      }\n    ]\n  },\n  devServer: {\n    static: './dist',\n    hot: true\n  }\n};\n\n// Main.elm (basic Elm app)\nmodule Main exposing (main)\nimport Browser\nmain = Browser.sandbox { init = 0, update = \\\\_ model -> model, view = \\\\_ -> Html.text \"Hello\" }","lang":"javascript","description":"Demonstrates correct Webpack configuration using elm-hot-webpack-loader before elm-webpack-loader, with hot module replacement enabled in devServer."},"warnings":[{"fix":"Use elm-hot-loader@0.5.x for Elm 0.18 projects.","message":"Elm 0.18 is not supported. Use fluxxu/elm-hot-loader@0.5.x instead.","severity":"deprecated","affected_versions":">=0.9.2"},{"fix":"Swap loader order so that elm-hot-webpack-loader is first.","message":"The loader order is critical: elm-hot-webpack-loader must appear before elm-webpack-loader in the use array.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use CLI flag --hot or set devServer.hot: true in config.","message":"webpack-dev-server --hot flag is required for older versions; newer versions may enable HMR by default.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install --save-dev elm-hot-webpack-loader","cause":"The package is not installed or not in node_modules.","error":"Module not found: Error: Can't resolve 'elm-hot-webpack-loader'"},{"fix":"Add --hot to webpack-dev-server command or set devServer.hot: true in webpack config.","cause":"Hot module replacement is not enabled.","error":"Error: You must run webpack-dev-server with --hot flag"},{"fix":"Swap the loader order so that elm-hot-webpack-loader is first.","cause":"elm-hot-webpack-loader must be placed before elm-webpack-loader in the webpack config.","error":"Uncaught TypeError: Cannot read properties of null (reading 'register')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}