`@parcel/transformer-elm: Unexpected token` when using Elm and Browserslist

[Disco-Dave]

🐛 bug report

When bundling an elm application with parcel and you have a browserslist defined either in your package.json or .browserslistrc file, then you receive the following error:

🚨 Build failed.

@parcel/transformer-elm: Unexpected token + in JSON at position 0

  SyntaxError: Unexpected token + in JSON at position 0
      at JSON.parse (<anonymous>)
      at Object.transform (/home/david/Code/elm-parcel-browserslist-bug/node_modules/@parcel/transformer-elm/lib/ElmTransformer.js:145:38)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async Transformation.runTransformer (/home/david/Code/elm-parcel-browserslist-bug/node_modules/@parcel/core/lib/Transformation.js:653:5)
      at async Transformation.runPipeline (/home/david/Code/elm-parcel-browserslist-bug/node_modules/@parcel/core/lib/Transformation.js:402:36)
      at async Transformation.runPipelines (/home/david/Code/elm-parcel-browserslist-bug/node_modules/@parcel/core/lib/Transformation.js:265:40)
      at async Transformation.run (/home/david/Code/elm-parcel-browserslist-bug/node_modules/@parcel/core/lib/Transformation.js:183:21)
      at async Child.handleRequest (/home/david/Code/elm-parcel-browserslist-bug/node_modules/@parcel/workers/lib/child.js:216:9)

🎛 Configuration (.babelrc, package.json, cli command)

You may find all of the configuration to reproduce this error at https://gitlab.com/Disco-Dave/elm-parcel-browserslist-bug

In this case the package.json is the following:

{
  "name": "elm-parcel-browserslist-bug",
  "license": "ISC",
  "private": true,
  "scripts": {
    "build": "rm -rf dist && parcel build src/index.html",
    "clean": "rm -rf .parcel-cache dist elm-stuff node_modules",
    "serve": "parcel serve src/index.html",
    "test": "elm-test"
  },
  "browserslist": "defaults",
  "devDependencies": {
    "@parcel/transformer-elm": "^2.7.0",
    "elm": "^0.19.1-5",
    "elm-test": "^0.19.1-revision9",
    "parcel": "^2.7.0"
  }
}

🤔 Expected Behavior

If it worked successfully you should see the bundle in the dist folder and the following from the output when running npm run build:

✨ Built in 2.32s

dist/index.html                 471 B    762ms
dist/favicon.bc13b3aa.ico    15.04 KB     34ms
dist/index.67a04405.css          92 B     24ms
dist/index.a1a9ea38.js       18.14 KB    574ms
dist/index.7d406490.js       18.11 KB    565ms

😯 Current Behavior

After running npm install and npm run build, I get the following:

🚨 Build failed.

@parcel/transformer-elm: Unexpected token + in JSON at position 0

  SyntaxError: Unexpected token + in JSON at position 0
      at JSON.parse (<anonymous>)
      at Object.transform (/home/david/Code/elm-parcel-browserslist-bug/node_modules/@parcel/transformer-elm/lib/ElmTransformer.js:145:38)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async Transformation.runTransformer (/home/david/Code/elm-parcel-browserslist-bug/node_modules/@parcel/core/lib/Transformation.js:653:5)
      at async Transformation.runPipeline (/home/david/Code/elm-parcel-browserslist-bug/node_modules/@parcel/core/lib/Transformation.js:402:36)
      at async Transformation.runPipelines (/home/david/Code/elm-parcel-browserslist-bug/node_modules/@parcel/core/lib/Transformation.js:265:40)
      at async Transformation.run (/home/david/Code/elm-parcel-browserslist-bug/node_modules/@parcel/core/lib/Transformation.js:183:21)
      at async Child.handleRequest (/home/david/Code/elm-parcel-browserslist-bug/node_modules/@parcel/workers/lib/child.js:216:9)

Weirdly enough, if I simply try running npm run build again without changing anything, it works:

✨ Built in 2.16s

dist/index.html                 471 B    562ms
dist/favicon.bc13b3aa.ico    15.04 KB     33ms
dist/index.67a04405.css          92 B     79ms
dist/index.a1a9ea38.js       18.14 KB    581ms
dist/index.7d406490.js       18.11 KB    376ms

💁 Possible Solution

The current workaround is to run npm run build more than once.

🔦 Context

I'd like to build my application inside of a CI/CD pipeline, and to do so I have to account for parcel build failing on its first invocation.

💻 Code Sample

https://gitlab.com/Disco-Dave/elm-parcel-browserslist-bug

🌍 Your Environment

Software	Version(s)
Parcel	2.7.0
Node	16.16.0
npm/Yarn	8.19.1 (npm)
Operating System	Arch Linux

[mischnic]

It's apparently not JSON in this case:

https://github.com/parcel-bundler/parcel/blob/527e477d15441219216ed05b220cf8d48fa2d258/packages/transformers/elm/src/ElmTransformer.js#L36

https://github.com/parcel-bundler/parcel/blob/527e477d15441219216ed05b220cf8d48fa2d258/packages/transformers/elm/src/ElmTransformer.js#L59-L63

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

[Disco-Dave]

I updated the code sample to use parcel 2.8.3, and the problem still persists.

[fintara]

I had export GHCRTS=-xp and the elm binary did not understand this, so it was printing a RTS error.

Does the elm binary work fine for you? :thinking: You can check with PATH=$PWD/node_modules/.bin:$PATH elm --help

For some reason it prints "+ ..." on your first run. For me the error was "Unexpected token e in JSON", because it was printing "elm: unknown RTS option..."

[greglearns]

I had to run parcel build twice as well to guarantee that it works the first time. See "scripts" > "build" below:

{
  "name": "elm_template",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "source": "src/index.html",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build; rm -r dist/; rm -r dist_prod/; parcel build --dist-dir dist_prod",
  },
  "devDependencies": {
    "@parcel/packager-raw-url": "^2.8.3",
    "@parcel/service-worker": "^2.8.3",
    "@parcel/transformer-elm": "^2.8.3",
    "@parcel/transformer-webmanifest": "^2.8.3",
    "@playwright/test": "^1.35.0",
    "html5-qrcode": "^2.3.8",
    "parcel": "^2.8.3",
    "playwright": "^1.35.0",
    "postcss": "^8.4.23",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.1.13",
    "pwa-asset-generator": "^6.3.0",
    "tailwindcss": "^3.3.2",
    "tailwindcss-rtl": "^0.9.0"
  },
  "dependencies": {
    "@github/clipboard-copy-element": "^1.1.2",
    "leaflet": "^1.9.4",
    "leaflet-geometryutil": "^0.10.2",
    "workbox-cacheable-response": "^6.5.4",
    "workbox-expiration": "^6.5.4",
    "workbox-precaching": "^6.5.4",
    "workbox-routing": "^6.1.2",
    "workbox-strategies": "^6.1.2"
  }
}