elm-webpack-loader

8.0.0 verified Mon Apr 27 auth: no javascript

Webpack loader for the Elm programming language. Version 8.0.0 supports Webpack 5. Actively maintained by elm-community. Tracks Elm dependencies and watches them in watch mode. Recommended to set cwd option to the directory containing elm.json. Supports debug and optimize modes, runtime options for profiling, and multiple file bundling. Peer dependency on Elm 0.19.1-3 or 0.19.0-no-deps.

Common errors

error Error: 'elm' is not recognized as an internal or external command ↓

cause Elm compiler not installed globally or in project dependencies.

fix

Run 'npm install --save-dev elm' to install elm package.

error Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. ↓

cause Webpack not configured to process .elm files.

fix

Add the elm-webpack-loader rule to webpack configuration.

error Cannot find module 'elm' ↓

cause Elm package is not installed as a dependency.

fix

Install elm as a dev dependency: 'npm install --save-dev elm'.

Warnings

breaking Version 8.0.0 drops Webpack 4 support. Webpack 5 is required. ↓

fix Upgrade to Webpack 5.

deprecated The 'pathToElm' option is deprecated and will be removed. Use 'cwd' instead. ↓

fix Replace pathToElm with cwd option.

gotcha If you don't set the 'cwd' option, the loader may not find elm.json and will compile from the current working directory. ↓

fix Set cwd to the directory containing elm.json.

gotcha The 'files' option only works when using object-style loader configuration, not inline or CLI. ↓

fix Use object-style configuration for loader options.

gotcha Using the 'runtimeOptions' requires a custom Elm binary built with -rtsopts enabled. Default Elm binary doesn't support it. ↓

fix Build elm-make from source with -rtsopts flag.

Install

npm install elm-webpack-loader

yarn add elm-webpack-loader

pnpm add elm-webpack-loader

Imports

Elm
wrong
```
import { Elm } from './Main.elm'
```
correct
```
import Elm from './Main.elm'
```
Default import returns the Elm object with module initializers.

Elm.Main

wrong

import { Main } from './Main.elm'

correct

import Elm from './Main.elm'; Elm.Main.init({node: document.getElementById('main')})

default (import)

wrong

const { Elm } = require('./Main.elm')

correct

const Elm = require('./Main.elm')

CommonJS require returns the default object.

Quickstart

Minimal webpack configuration to process Elm files using elm-webpack-loader with the recommended cwd option.

// webpack.config.js
const path = require('path');
module.exports = {
  module: {
    rules: [{
      test: /\.elm$/,
      exclude: [/elm-stuff/, /node_modules/],
      use: {
        loader: 'elm-webpack-loader',
        options: {
          cwd: path.resolve(__dirname, 'src')
        }
      }
    }]
  },
  resolve: {
    extensions: ['.elm']
  }
};