Build sometimes processes CoffeeScript script tags as JS. (Always as JS on Vercel/Netlify).

[Leftium]

Describe the bug

Building my SvelteKit project (sometimes) results in a syntax error like: Unexpected "load" in the file index.svelte.

"Sometimes" meaning:

• 100% on Vercel/Netlify
• Intermittently in local dev environment

My best guess is the build doesn't always recognize the script is written in CoffeeScript, so Svelte/Vite sometimes process the scripts as JavaScript. (or TypeScript?)

Update/Workaround

I was able to fix this by changing lang="coffee" to the deprecated type="text/coffeescript" syntax. With the newer lang attribute, some part of build sometimes doesn't recognize the script is written in CoffeeScript.

Old description:

I can fix the error in the local dev environment by removing the script tags until build succeeds, then adding them again (verbatim). See this screen shot of the diff that fixes the error locally ("binary same").

This same fix does not work in the Vercel/Netlify build environments. However, I did confirm the build succeeds if I remove all the script tags and variable references from the svelte.index. (However then the app is obviously broken.)

Note the exact location of the error changes as parts of the script tags are removed, until the entire script tags are removed. (If I remove the lines around "load" a new (syntax) error happens at a different point in the script tags.)

Reproduction

https://github.com/Leftium/convert-crypto

Logs

(I modified the script to fix build warnings. The error is no longer unexpected "load", but it is a similar syntax error.)

Full Vercel build log:

Cloning github.com/Leftium/convert-crypto (Branch: main, Commit: 5d279ed)
Cloning completed: 820.42ms
Analyzing source code...
Installing build runtime...
Build runtime installed: 2.354s
Looking up build cache...
Build cache downloaded [10.06 MB]: 633.950ms
Detected package.json
Installing dependencies...
yarn install v1.22.17
warning package.json: No license field
warning convert-kit@0.0.1: No license field
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.20s.
Running "yarn run build"
yarn run v1.22.17
warning package.json: No license field
$ svelte-kit build
vite v2.6.14 building for production...
transforming...
[svelte-preprocess] Deprecation notice: using the "type" attribute is no longer recommended and will be removed in the next major version. Please use the "lang" attribute instead.
✓ 18 modules transformed.
rendering chunks...
.svelte-kit/output/client/_app/manifest.json                               1.30 KiB
.svelte-kit/output/client/_app/pages/__layout.svelte-0272ae1b.js           0.53 KiB / gzip: 0.36 KiB
.svelte-kit/output/client/_app/error.svelte-a43ff4c9.js                    1.56 KiB / gzip: 0.75 KiB
.svelte-kit/output/client/_app/pages/index.svelte-a60188cd.js              4.76 KiB / gzip: 2.11 KiB
.svelte-kit/output/client/_app/assets/start-61d1577b.css                   0.16 KiB / gzip: 0.15 KiB
.svelte-kit/output/client/_app/start-27ade52d.js                           18.48 KiB / gzip: 6.85 KiB
.svelte-kit/output/client/_app/chunks/vendor-48c87291.js                   7.41 KiB / gzip: 3.03 KiB
.svelte-kit/output/client/_app/assets/pages/__layout.svelte-2562d9df.css   0.24 KiB / gzip: 0.20 KiB
.svelte-kit/output/client/_app/assets/pages/index.svelte-eb39aba5.css      1.12 KiB / gzip: 0.42 KiB
vite v2.6.14 building SSR bundle for production...
 > html:/vercel/path0/src/routes/index.svelte:2:45: error: Unexpected ">"
    2 │     _load = ({page, fetch, session, stuff}) ->
      ╵                                              ^
> Build failed with 1 error:
html:/vercel/path0/src/routes/index.svelte:2:45: error: Unexpected ">"
Error: Build failed with 1 error:
html:/vercel/path0/src/routes/index.svelte:2:45: error: Unexpected ">"
    at failureErrorWithLog (/vercel/path0/node_modules/esbuild/lib/main.js:1493:15)
    at /vercel/path0/node_modules/esbuild/lib/main.js:1151:28
    at runOnEndCallbacks (/vercel/path0/node_modules/esbuild/lib/main.js:941:63)
    at buildResponseToResult (/vercel/path0/node_modules/esbuild/lib/main.js:1149:7)
    at /vercel/path0/node_modules/esbuild/lib/main.js:1258:14
    at /vercel/path0/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/vercel/path0/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/vercel/path0/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (events.js:400:28)
    at addChunk (internal/streams/readable.js:293:12)
    at readableAddChunk (internal/streams/readable.js:267:9)
    at Socket.Readable.push (internal/streams/readable.js:206:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:188:23)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1

Full Netlify build log:

10:36:48 AM: Build ready to start
10:36:50 AM: build-image version: 8925038cf853b22d6397cdcb9904ac88b66bb383 (focal)
10:36:50 AM: build-image tag: v4.5.0
10:36:50 AM: buildbot version: c0e8ffa453e19757f422ac0b6b14bc1b57e53b59
10:36:50 AM: Fetching cached dependencies
10:36:50 AM: Failed to fetch cache, continuing with build
10:36:50 AM: Starting to prepare the repo for build
10:36:51 AM: No cached dependencies found. Cloning fresh repo
10:36:51 AM: git clone https://github.com/Leftium/convert-crypto
10:36:51 AM: Preparing Git Reference refs/heads/main
10:36:52 AM: Parsing package.json dependencies
10:36:52 AM: Starting build script
10:36:52 AM: Installing dependencies
10:36:52 AM: Python version set to 2.7
10:36:53 AM: v16.13.0 is already installed.
10:36:53 AM: Now using node v16.13.0 (npm v8.1.0)
10:36:54 AM: Started restoring cached build plugins
10:36:54 AM: Finished restoring cached build plugins
10:36:54 AM: Attempting ruby version 2.7.2, read from environment
10:36:55 AM: Using ruby version 2.7.2
10:36:55 AM: Using PHP version 8.0
10:36:55 AM: Started restoring cached yarn cache
10:36:55 AM: Finished restoring cached yarn cache
10:36:56 AM: No yarn workspaces detected
10:36:56 AM: Started restoring cached node modules
10:36:56 AM: Finished restoring cached node modules
10:36:56 AM: Installing NPM modules using Yarn version 1.22.10
10:36:57 AM: yarn install v1.22.10
10:36:57 AM: warning package.json: No license field
10:36:57 AM: warning convert-kit@0.0.1: No license field
10:36:57 AM: [1/4] Resolving packages...
10:36:57 AM: [2/4] Fetching packages...
10:37:02 AM: info esbuild-android-arm64@0.13.15: The platform "linux" is incompatible with this module.
10:37:02 AM: info "esbuild-android-arm64@0.13.15" is an optional dependency and failed compatibility check. Excluding it from installation.
10:37:02 AM: info esbuild-android-arm64@0.13.15: The CPU architecture "x64" is incompatible with this module.
10:37:02 AM: info esbuild-darwin-64@0.13.15: The platform "linux" is incompatible with this module.
10:37:02 AM: info "esbuild-darwin-64@0.13.15" is an optional dependency and failed compatibility check. Excluding it from installation.
10:37:02 AM: info esbuild-darwin-arm64@0.13.15: The platform "linux" is incompatible with this module.
10:37:02 AM: info "esbuild-darwin-arm64@0.13.15" is an optional dependency and failed compatibility check. Excluding it from installation.
10:37:02 AM: info esbuild-darwin-arm64@0.13.15: The CPU architecture "x64" is incompatible with this module.
10:37:02 AM: info esbuild-freebsd-64@0.13.15: The platform "linux" is incompatible with this module.
10:37:02 AM: info "esbuild-freebsd-64@0.13.15" is an optional dependency and failed compatibility check. Excluding it from installation.
10:37:02 AM: info esbuild-freebsd-arm64@0.13.15: The platform "linux" is incompatible with this module.
10:37:02 AM: info "esbuild-freebsd-arm64@0.13.15" is an optional dependency and failed compatibility check. Excluding it from installation.
10:37:02 AM: info esbuild-freebsd-arm64@0.13.15: The CPU architecture "x64" is incompatible with this module.
10:37:02 AM: info esbuild-linux-32@0.13.15: The CPU architecture "x64" is incompatible with this module.
10:37:02 AM: info "esbuild-linux-32@0.13.15" is an optional dependency and failed compatibility check. Excluding it from installation.
10:37:02 AM: info esbuild-linux-arm@0.13.15: The CPU architecture "x64" is incompatible with this module.
10:37:02 AM: info "esbuild-linux-arm@0.13.15" is an optional dependency and failed compatibility check. Excluding it from installation.
10:37:02 AM: info esbuild-linux-arm64@0.13.15: The CPU architecture "x64" is incompatible with this module.
10:37:02 AM: info "esbuild-linux-arm64@0.13.15" is an optional dependency and failed compatibility check. Excluding it from installation.
10:37:02 AM: info esbuild-linux-mips64le@0.13.15: The CPU architecture "x64" is incompatible with this module.
10:37:02 AM: info "esbuild-linux-mips64le@0.13.15" is an optional dependency and failed compatibility check. Excluding it from installation.
10:37:02 AM: info esbuild-linux-ppc64le@0.13.15: The CPU architecture "x64" is incompatible with this module.
10:37:02 AM: info "esbuild-linux-ppc64le@0.13.15" is an optional dependency and failed compatibility check. Excluding it from installation.
10:37:02 AM: info esbuild-netbsd-64@0.13.15: The platform "linux" is incompatible with this module.
10:37:02 AM: info "esbuild-netbsd-64@0.13.15" is an optional dependency and failed compatibility check. Excluding it from installation.
10:37:02 AM: info esbuild-openbsd-64@0.13.15: The platform "linux" is incompatible with this module.
10:37:02 AM: info "esbuild-openbsd-64@0.13.15" is an optional dependency and failed compatibility check. Excluding it from installation.
10:37:02 AM: info esbuild-sunos-64@0.13.15: The platform "linux" is incompatible with this module.
10:37:02 AM: info "esbuild-sunos-64@0.13.15" is an optional dependency and failed compatibility check. Excluding it from installation.
10:37:02 AM: info esbuild-windows-32@0.13.15: The platform "linux" is incompatible with this module.
10:37:02 AM: info "esbuild-windows-32@0.13.15" is an optional dependency and failed compatibility check. Excluding it from installation.
10:37:02 AM: info esbuild-windows-32@0.13.15: The CPU architecture "x64" is incompatible with this module.
10:37:02 AM: info esbuild-windows-64@0.13.15: The platform "linux" is incompatible with this module.
10:37:02 AM: info "esbuild-windows-64@0.13.15" is an optional dependency and failed compatibility check. Excluding it from installation.
10:37:02 AM: info esbuild-windows-arm64@0.13.15: The platform "linux" is incompatible with this module.
10:37:02 AM: info "esbuild-windows-arm64@0.13.15" is an optional dependency and failed compatibility check. Excluding it from installation.
10:37:02 AM: info esbuild-windows-arm64@0.13.15: The CPU architecture "x64" is incompatible with this module.
10:37:02 AM: info fsevents@2.3.2: The platform "linux" is incompatible with this module.
10:37:02 AM: info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
10:37:02 AM: [3/4] Linking dependencies...
10:37:03 AM: [4/4] Building fresh packages...
10:37:03 AM: Done in 6.48s.
10:37:03 AM: NPM modules installed using Yarn
10:37:03 AM: warning package.json: No license field
10:37:04 AM: Started restoring cached go cache
10:37:04 AM: Finished restoring cached go cache
10:37:04 AM: go version go1.16.5 linux/amd64
10:37:04 AM: go version go1.16.5 linux/amd64
10:37:04 AM: Installing missing commands
10:37:04 AM: Verify run directory
10:37:05 AM: ​
10:37:05 AM: ────────────────────────────────────────────────────────────────
10:37:05 AM:   Netlify Build                                                 
10:37:05 AM: ────────────────────────────────────────────────────────────────
10:37:05 AM: ​
10:37:05 AM: ❯ Version
10:37:05 AM:   @netlify/build 19.0.6
10:37:05 AM: ​
10:37:05 AM: ❯ Flags
10:37:05 AM:   baseRelDir: true
10:37:05 AM:   buildId: 61a03a30fbb6b40007fbce53
10:37:05 AM:   deployId: 61a03a30fbb6b40007fbce55
10:37:05 AM: ​
10:37:05 AM: ❯ Current directory
10:37:05 AM:   /opt/build/repo
10:37:05 AM: ​
10:37:05 AM: ❯ Config file
10:37:05 AM:   No config file was defined: using default values.
10:37:05 AM: ​
10:37:05 AM: ❯ Context
10:37:05 AM:   production
10:37:05 AM: ​
10:37:05 AM: ────────────────────────────────────────────────────────────────
10:37:05 AM:   1. Build command from Netlify app                             
10:37:05 AM: ────────────────────────────────────────────────────────────────
10:37:05 AM: ​
10:37:05 AM: $ yarn build
10:37:05 AM: yarn run v1.22.10
10:37:05 AM: warning package.json: No license field
10:37:05 AM: $ svelte-kit build
10:37:06 AM: vite v2.6.14 building for production...
10:37:06 AM: transforming...
10:37:07 AM: [svelte-preprocess] Deprecation notice: using the "type" attribute is no longer recommended and will be removed in the next major version. Please use the "lang" attribute instead.
10:37:07 AM: ✓ 18 modules transformed.
10:37:07 AM: rendering chunks...
10:37:07 AM: .svelte-kit/output/client/_app/manifest.json                               1.30 KiB
10:37:07 AM: .svelte-kit/output/client/_app/pages/__layout.svelte-0272ae1b.js           0.53 KiB / gzip: 0.36 KiB
10:37:07 AM: .svelte-kit/output/client/_app/error.svelte-a43ff4c9.js                    1.56 KiB / gzip: 0.75 KiB
10:37:07 AM: .svelte-kit/output/client/_app/pages/index.svelte-a60188cd.js              4.76 KiB / gzip: 2.11 KiB
10:37:07 AM: .svelte-kit/output/client/_app/assets/start-61d1577b.css                   0.16 KiB / gzip: 0.15 KiB
10:37:07 AM: .svelte-kit/output/client/_app/assets/pages/__layout.svelte-2562d9df.css   0.24 KiB / gzip: 0.20 KiB
10:37:07 AM: .svelte-kit/output/client/_app/start-27ade52d.js                           18.48 KiB / gzip: 6.85 KiB
10:37:07 AM: .svelte-kit/output/client/_app/assets/pages/index.svelte-eb39aba5.css      1.12 KiB / gzip: 0.42 KiB
10:37:07 AM: .svelte-kit/output/client/_app/chunks/vendor-48c87291.js                   7.41 KiB / gzip: 3.03 KiB
10:37:07 AM: vite v2.6.14 building SSR bundle for production...
10:37:07 AM:  > html:/opt/build/repo/src/routes/index.svelte:2:45: error: Unexpected ">"
10:37:07 AM:     2 │     _load = ({page, fetch, session, stuff}) ->
10:37:07 AM:       ╵                                              ^
10:37:07 AM: > Build failed with 1 error:
10:37:07 AM: html:/opt/build/repo/src/routes/index.svelte:2:45: error: Unexpected ">"
10:37:07 AM: Error: Build failed with 1 error:
10:37:07 AM: html:/opt/build/repo/src/routes/index.svelte:2:45: error: Unexpected ">"
10:37:07 AM:     at failureErrorWithLog (/opt/build/repo/node_modules/esbuild/lib/main.js:1493:15)
10:37:07 AM:     at /opt/build/repo/node_modules/esbuild/lib/main.js:1151:28
10:37:07 AM:     at runOnEndCallbacks (/opt/build/repo/node_modules/esbuild/lib/main.js:941:63)
10:37:07 AM:     at buildResponseToResult (/opt/build/repo/node_modules/esbuild/lib/main.js:1149:7)
10:37:07 AM:     at /opt/build/repo/node_modules/esbuild/lib/main.js:1258:14
10:37:07 AM:     at /opt/build/repo/node_modules/esbuild/lib/main.js:629:9
10:37:07 AM:     at handleIncomingPacket (/opt/build/repo/node_modules/esbuild/lib/main.js:726:9)
10:37:07 AM:     at Socket.readFromStdout (/opt/build/repo/node_modules/esbuild/lib/main.js:596:7)
10:37:07 AM:     at Socket.emit (node:events:390:28)
10:37:07 AM:     at addChunk (node:internal/streams/readable:315:12)
10:37:07 AM:     at readableAddChunk (node:internal/streams/readable:289:9)
10:37:07 AM:     at Socket.Readable.push (node:internal/streams/readable:228:10)
10:37:07 AM:     at Pipe.onStreamRead (node:internal/stream_base_commons:199:23)
10:37:07 AM: 
10:37:07 AM: error Command failed with exit code 1.
10:37:07 AM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
10:37:07 AM: ​
10:37:07 AM: ────────────────────────────────────────────────────────────────
10:37:07 AM:   "build.command" failed                                        
10:37:07 AM: ────────────────────────────────────────────────────────────────
10:37:07 AM: ​
10:37:07 AM:   Error message
10:37:07 AM:   Command failed with exit code 1: yarn build
10:37:07 AM: ​
10:37:07 AM:   Error location
10:37:07 AM:   In Build command from Netlify app:
10:37:07 AM:   yarn build
10:37:07 AM: ​
10:37:07 AM:   Resolved config
10:37:07 AM:   build:
10:37:07 AM:     command: yarn build
10:37:07 AM:     commandOrigin: ui
10:37:07 AM:     publish: /opt/build/repo/build
10:37:07 AM:     publishOrigin: ui
10:37:07 AM: Caching artifacts
10:37:07 AM: Started saving node modules
10:37:07 AM: Finished saving node modules
10:37:07 AM: Started saving build plugins
10:37:07 AM: Finished saving build plugins
10:37:07 AM: Started saving yarn cache
10:37:08 AM: Finished saving yarn cache
10:37:08 AM: Started saving pip cache
10:37:08 AM: Finished saving pip cache
10:37:08 AM: Started saving emacs cask dependencies
10:37:08 AM: Finished saving emacs cask dependencies
10:37:08 AM: Started saving maven dependencies
10:37:08 AM: Finished saving maven dependencies
10:37:08 AM: Started saving boot dependencies
10:37:08 AM: Finished saving boot dependencies
10:37:08 AM: Started saving rust rustup cache
10:37:08 AM: Finished saving rust rustup cache
10:37:08 AM: Started saving go dependencies
10:37:08 AM: Finished saving go dependencies
10:37:10 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
10:37:10 AM: Creating deploy upload records
10:37:10 AM: Failing build: Failed to build site
10:37:10 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2
10:37:10 AM: Finished processing build request in 19.924277979s

Local build log (without the error):

yarn run v1.22.15
warning package.json: No license field
$ svelte-kit build
vite v2.6.14 building for production...
transforming (9) node_modules\svelte\store\index.mjs[svelte-preprocess] Deprecation notice: using the "type" attribute is no longer recomm
ended and will be removed in the next major version. Please use the "lang" attribute instead.
✓ 18 modules transformed.
.svelte-kit/output/client/_app/manifest.json                               1.30 KiB
.svelte-kit/output/client/_app/pages/__layout.svelte-605808d6.js           0.53 KiB / gzip: 0.36 KiB
.svelte-kit/output/client/_app/error.svelte-5671f2b3.js                    1.56 KiB / gzip: 0.75 KiB
.svelte-kit/output/client/_app/pages/index.svelte-b608fbdc.js              4.76 KiB / gzip: 2.11 KiB
.svelte-kit/output/client/_app/assets/pages/__layout.svelte-2562d9df.css   0.24 KiB / gzip: 0.20 KiB
.svelte-kit/output/client/_app/start-ab238ea1.js                           18.48 KiB / gzip: 6.85 KiB
.svelte-kit/output/client/_app/assets/start-61d1577b.css                   0.16 KiB / gzip: 0.15 KiB
.svelte-kit/output/client/_app/chunks/vendor-48c87291.js                   7.41 KiB / gzip: 3.03 KiB
.svelte-kit/output/client/_app/assets/pages/index.svelte-eb39aba5.css      1.12 KiB / gzip: 0.42 KiB
vite v2.6.14 building SSR bundle for production...
✓ 18 modules transformed.
.svelte-kit/output/server/app.js                        0.07 KiB
.svelte-kit/output/server/chunks/app-137016d7.js        50.99 KiB
.svelte-kit/output/server/chunks/__layout-a89a6604.js   0.24 KiB
.svelte-kit/output/server/chunks/error-30bfae35.js      0.71 KiB
.svelte-kit/output/server/chunks/index-77dbef6e.js      5.23 KiB
Run npm run preview to preview your production build locally.

Using @sveltejs/adapter-auto

Could not detect a supported production environment. See https://kit.svelte.dev/docs#adapters to learn how to configure your app to run

on the platform of your choosing

✔ done

Done in 2.79s.

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 11.71 GB / 23.86 GB
  Binaries:
    Node: 14.16.0 - D:\dropbox\a\nodejs\64v14.16.0\node.EXE
    Yarn: 1.22.15 - D:\dropbox\home\.yarn\bin\yarn.CMD
    npm: 6.14.11 - D:\dropbox\a\nodejs\64v14.16.0\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (96.0.1054.34)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.3
    @sveltejs/kit: next => 1.0.0-next.200
    svelte: ^3.44.0 => 3.44.2

Severity

serious, but I can work around it

Additional Information

It is possible this bug is related to its use of CoffeeScript.

[Leftium]

This might be a problem with svelte-preprocess, so I opened this bug: sveltejs/svelte-preprocess#436

[bluwy]

This should be a Kit/Vite issue instead of svelte-preprocess. Currently, Vite only supports JS/TS for Svelte components, mainly because of Vite's prebundling scanning phase crawls the script tag of Svelte components in a hardcoded way. With that said, dev mode should fail as well but I'm surprised in sometimes work for you.

Unfortunately, there isn't a workaround for now, this would need to be supported by Vite, at least allowing its scanner to use a different esbuild loader and adding an esbuild plugin for that.

[Leftium]

I was able to fix this by changing lang="coffee" to the deprecated type="text/coffeescript" syntax. With the newer lang attribute, some part of build sometimes doesn't recognize the script is written in CoffeeScript.

Does this change your opinion about whether it's a Kit/Vite issue? It's a work-around, anyways.

[bluwy]

The lang to type workaround is still a Kit/Vite issue, as the scanner has special handling for the lang attribute, so setting type only bypasses it.

[bluwy]

To wrap up the state of CoffeeScript with SvelteKit/Vite. Currently, VIte handles pre-bundling scans for HTML-ish files, like Vue and Svelte, and they have a hardcoded way to transform them into JS. This however only works for JS/TS scripts which is based on esbuild's default loader. To have Vite support CoffeeScript, it'd need to have an esbuild plugin for it and interprets the script through the plugin. Otherwise, Vite would need to rework how it handles this case generically. And both aren't trivial tasks.

I'm commenting here to link this to the docs. And closing this as there's not much to fix in SvelteKit side. Feel free to open an issue over at VIte to support this feature though.

[Leftium]

A work-around is to move the CoffeeScript outside the index.svelte file into its own _index.coffee file. Then use an external script tag like:

<script src='./_index.coffee'></script>

I confirmed this works with the latest SvelteKit on Vercel:

• https://feh-shing-m8frybxpj-leftium.vercel.app/
• Leftium/FEHshing@1b69676

(The version with inline coffeescript still results in a build error on Vercel, even though there was none locally):

• Leftium/FEHshing@dfae535