vite-plugin-elm

3.0.1 verified Mon Apr 27 auth: no javascript

Seamlessly integrate Elm into Vite projects. Current stable version is 3.0.1, with pre-releases up to 3.1.0-2. This plugin compiles .elm files during Vite's build and dev server, supporting HMR. Key differentiators: minimal configuration, supports Elm’s default compiler and custom via node-elm-compiler. ESM-only since v3, requiring Vite 5+. Active development with occasional pre-releases.

Common errors

error Cannot find module 'vite-plugin-elm' ↓

cause Package not installed or import path incorrect.

fix

Run npm install -D vite-plugin-elm and ensure import statement uses default import.

error require() of ES Module not supported ↓

cause Using CommonJS require() on an ESM-only package.

fix

Switch to import syntax, or set "type": "module" in package.json.

Warnings

breaking vite-plugin-elm v3 drops support for Vite 2, 3, and 4. Only Vite 5+ is supported. ↓

fix Upgrade Vite to >=5.0.0, see https://vitejs.dev/guide/migration.html

breaking vite-plugin-elm v3 is ESM-only. No CommonJS build is provided. ↓

fix Set "type": "module" in package.json or use .mjs extension for config files. Do not use require().

gotcha The plugin expects an Elm compiler to be installed (via npm or globally). If missing, the plugin will fail silently or produce empty output. ↓

fix Install elm as a dev dependency: npm install -D elm

Install

npm install vite-plugin-elm

yarn add vite-plugin-elm

pnpm add vite-plugin-elm

Imports

elm
wrong
```
const elm = require('vite-plugin-elm')
```
correct
```
import elm from 'vite-plugin-elm'
```
Default export. Since v3, package is ESM-only, so require() fails.
default
wrong
```
import { elm } from 'vite-plugin-elm'
```
correct
```
import elm from 'vite-plugin-elm'
```
The plugin is a default export, not a named export. Named import will be undefined.
vite-plugin-elm
wrong
```
import ElmPlugin from 'vite-plugin-elm'
```
correct
```
import elm from 'vite-plugin-elm'
```
Any name works for default import, but elm is conventional.

Quickstart

Sets up Vite to compile Elm files using vite-plugin-elm. Import the default export and add it to the plugins array.

// vite.config.js
import { defineConfig } from 'vite';
import elm from 'vite-plugin-elm';

export default defineConfig({
  plugins: [elm()]
});