Parcel Elm Bundle Resolver

1.0.2 · active · verified Tue Apr 21

parcel-resolver-elm-bundle is a Parcel resolver designed to streamline the compilation and bundling of multiple Elm source files into a single JavaScript output. It simplifies the process that would otherwise require manually listing all Elm entry points for `elm make`. The package is currently at version 1.0.2, indicating a stable, actively maintained release. While release cadence isn't explicitly stated, its integration with Parcel's resolver system suggests updates would align with major Parcel releases or significant Elm compiler changes. Its key differentiator is the custom `elm-bundle:` import syntax, allowing developers to define Elm bundles within their `package.json` and reference them abstractly, enhancing modularity and build system clarity for Elm projects within Parcel. This approach mimics the `elm make MainA.elm MainB.elm` command but integrates it directly into the JavaScript import graph, providing a seamless development experience for larger Elm applications.

Common errors

```
Module not found: Can't resolve 'elm-bundle:widget-a'
```
cause The Parcel resolver for `elm-bundle` is not correctly configured or active, or the bundle name (`widget-a`) is misspelled or not defined in `package.json`.

fix Verify `parcel-resolver-elm-bundle` is in your `.parcelrc` before `...`, and ensure the `elm-bundle` section in `package.json` correctly defines `widget-a` with valid paths to Elm entry files.
```
Error: Could not find Elm executable. Please install Elm: elm install
```
cause The `elm` peer dependency is missing or not correctly installed/accessible in the project environment.

fix Install Elm globally or locally: `npm install -g elm` or `npm install --save-dev elm` (if using `npx elm`). Ensure it's available in your system's PATH or `node_modules/.bin`.
```
Error: Failed to resolve entry point "./src/Main.elm" (or similar path error)
```
cause A file path specified in the `elm-bundle` array in `package.json` is incorrect, or the file does not exist at the specified relative path.

fix Double-check all file paths within your `package.json` `elm-bundle` definitions. Paths must be relative to the `package.json` file itself.

Warnings

gotcha Incorrect resolver order in `.parcelrc` can prevent `parcel-resolver-elm-bundle` from being invoked, leading to 'Module not found' errors or incorrect Elm compilation.
Fix: Ensure `parcel-resolver-elm-bundle` is listed before other generic resolvers (like `...`) in your `.parcelrc` resolvers array: `"resolvers": ["parcel-resolver-elm-bundle", "..."]`.
gotcha Using an older Parcel version than specified in `engines` may cause compatibility issues or build failures, as Parcel's internal resolver APIs can change significantly between major versions.
Fix: Upgrade Parcel to `^2.6.2` or higher to ensure compatibility with the resolver. Run `npm install parcel@latest` or `yarn add parcel@latest`.
gotcha The resolver depends on the `elm` compiler being available. If `elm` is not installed or discoverable in the system's PATH, compilation will fail.
Fix: Install Elm globally via `npm install -g elm` or as a dev dependency `npm install --save-dev elm`, ensuring it's accessible to your build environment.

Install

npm install parcel-resolver-elm-bundle npm
yarn add parcel-resolver-elm-bundle yarn
pnpm add parcel-resolver-elm-bundle pnpm

Imports

Elm
wrong:
```
const { Elm } = require('elm-bundle:widget-a');
```
correct:
```
import { Elm } from 'elm-bundle:widget-a';
```
This is a custom Parcel resolver import syntax. 'elm-bundle:widget-a' refers to a bundle defined in your `package.json`, not a direct file path. Parcel 2+ primarily uses ESM.
Elm_Type
```
import type { Elm } from 'elm-bundle:widget-a';
```
When using TypeScript, if you need to reference the type of the Elm application object, use a type-only import.

Quickstart

This quickstart demonstrates how to configure Parcel to use the `elm-bundle` resolver via `.parcelrc`, define an Elm bundle named 'widget-a' in `package.json`, and then import the compiled bundle into a JavaScript entry point for initialization.

{
  "extends": "@parcel/config-default",
  "resolvers": ["parcel-resolver-elm-bundle", "..."]
}

// package.json
{
  "name": "my-elm-app",
  "version": "1.0.0",
  "description": "My Elm application bundled with Parcel",
  "main": "index.js",
  "source": "index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "elm-bundle": {
    "widget-a": [
      "./src/Main.elm",
      "./src/MainB.elm",
      "./src/MainC.elm"
    ]
  },
  "devDependencies": {
    "parcel": "^2.6.2",
    "parcel-resolver-elm-bundle": "^1.0.0"
  },
  "peerDependencies": {
    "elm": "^0.19.1-5"
  }
}

// src/index.js
import { Elm } from 'elm-bundle:widget-a';

const app = Elm.Main.init({
  node: document.getElementById('elm-app')
});

// Example: Interact with Elm ports (if defined in Main.elm)
// app.ports.fromElm.subscribe(message => {
//   console.log('Received from Elm:', message);
// });

// app.ports.toElm.send('Hello from JavaScript!');

view raw JSON →