[Bug]: SyntaxError: Unexpected token 'export' when deploying to Netlify

[jdmedlock]

What happened?

When deploying a Sveltekit application to Netlify the error the following error is produced:

(node:1582) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
11:19:49 AM: /opt/build/repo/node_modules/add-to-calendar-button/npm_dist/mjs/index.js:1667
11:19:49 AM: export { atcb_action, atcb_init };
11:19:49 AM: ^^^^^^
11:19:49 AM: SyntaxError: Unexpected token 'export'
11:19:49 AM:     at Object.compileFunction (node:vm:352:18)
11:19:49 AM:     at wrapSafe (node:internal/modules/cjs/loader:1033:15)
11:19:49 AM:     at Module._compile (node:internal/modules/cjs/loader:1069:27)
11:19:49 AM:     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
11:19:49 AM:     at Module.load (node:internal/modules/cjs/loader:981:32)
11:19:49 AM:     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
11:19:49 AM:     at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
11:19:49 AM:     at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
11:19:49 AM:     at async Promise.all (index 0)
11:19:49 AM:     at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
11:19:49 AM: [SyntaxError: Unexpected token 'export']
11:19:49 AM: [vite-plugin-svelte-kit] Prerendering failed with code 1
11:19:49 AM: error during build:
11:19:49 AM: Error: Prerendering failed with code 1
11:19:49 AM:     at ChildProcess.<anonymous> (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/vite.js:2367:14)
11:19:49 AM:     at ChildProcess.emit (node:events:527:28)
11:19:49 AM:     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)

The application source is in this GitHub repo

atcb is being invoked from the src/routes/events.svelte file as shown below. Everything works fine locally. It's only when deploying to Netlify that the problem is encountered.

<script>
  import { atcb_action } from 'add-to-calendar-button'
 
  let href = "#"

  const handleAddDogwoodToCalendar = (event) => {
    event.preventDefault()
    atcb_action({
      name: "CHS73 50th Reunion - Social Night",
      location: "Drury Inn, 3351 Percy Drive, Cape Girardeau, MO 63701",
      description: "An informal gathering to relax & reconnect!\n\nCash bar & food",
      startDate: "2023-09-15",
      endDate: "2023-09-15",
      startTime:"17:00",
      endTime:"23:30",
      options: ['Apple', 'Google', 'iCal'],
      timeZone: "Europe/Berlin",
      iCalFileName: "CHS73_Reunion_20230915",
    })
  }

  const handleAddDruryToCalendar = (event) => {
    event.preventDefault()
    atcb_action({
      name: "CHS73 50th Reunion - Dinner",
      location: "Drury Inn, 3351 Percy Drive, Cape Girardeau, MO 63701",
      description: "Dinner, music, & sharing of fond memories!\n\n- Dinner + cash bar\n- Discounted room rate of $148/night for Sept. 15 & 16 (includes free breakfast + evening drinks & snacks)\n- Call 1-800-325-0720 before August 28, 2023 and use Group number 10018741 to make your reservation",
      startDate: "2023-09-16",
      endDate: "2023-09-16",
      startTime:"16:00",
      endTime:"23:30",
      options: ['Apple', 'Google', 'iCal'],
      iCalFileName: "CHS73_Reunion_20230916",
    })
  }
</script>

Let me know if there's any additional information I can provide. Thanks

How to reproduce?

To reproduce:

1. Clone the repo to your own Github account
2. npm i to build the app
3. To test locally run the npm run dev command and then open a browser window to localhost:3000 and select the Events menu option to see the Add this to my calendar button
4. To recreate the error locally run npm run build

Screenshots & more

Package.json:

{
	"name": "chs73new",
	"version": "0.0.1",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"package": "svelte-kit package",
		"preview": "vite preview",
		"prepare": "svelte-kit sync",
		"lint": "prettier --check --plugin-search-dir=. .",
		"format": "prettier --write --plugin-search-dir=. ."
	},
	"dependencies": {
		"@cloudinary/url-gen": "^1.8.0",
		"add-to-calendar-button": "^1.14.3"
	},
	"devDependencies": {
		"@playwright/test": "^1.21.0",
		"@sveltejs/adapter-netlify": "next",
		"@sveltejs/kit": "next",
		"autoprefixer": "^10.4.7",
		"eslint": "^8.12.0",
		"eslint-config-prettier": "^8.3.0",
		"eslint-plugin-svelte3": "^4.0.0",
		"postcss": "^8.4.14",
		"prettier": "^2.6.2",
		"prettier-plugin-svelte": "^2.7.0",
		"svelte": "^3.46.0",
		"svelte-check": "^2.2.6",
		"svelte-preprocess": "^4.10.6",
		"tailwindcss": "^3.0.24",
		"typescript": "~4.6.2",
		"vite": "^3.0.0"
	},
	"type": "module",
	"svelte": "src/routes/index.js",
	"files": [
		"build",
		"src"
	]
}

Netlify build settings:

Netlify deployment log:

11:19:30 AM: Build ready to start
11:19:33 AM: build-image version: 1ac2360cf8aee6cb2695dd2682b312fefc908a7f (xenial)
11:19:33 AM: build-image tag: v3.15.0
11:19:33 AM: buildbot version: fe73f8149ecfb48a56018180267e65cf6d92c423
11:19:33 AM: Fetching cached dependencies
11:19:33 AM: Starting to download cache of 231.6MB
11:19:35 AM: Finished downloading cache in 2.036104629s
11:19:35 AM: Starting to extract cache
11:19:37 AM: Finished extracting cache in 1.160816786s
11:19:37 AM: Finished fetching cache in 3.260491755s
11:19:37 AM: Starting to prepare the repo for build
11:19:37 AM: Preparing Git Reference pull/114/head
11:19:37 AM: Parsing package.json dependencies
11:19:38 AM: Different functions path detected, going to use the one specified in the Netlify configuration file: 'functions' versus '' in the Netlify UI
11:19:38 AM: Starting build script
11:19:38 AM: Installing dependencies
11:19:38 AM: Python version set to 2.7
11:19:39 AM: Started restoring cached node version
11:19:40 AM: Finished restoring cached node version
11:19:40 AM: v16.16.0 is already installed.
11:19:40 AM: Now using node v16.16.0 (npm v8.11.0)
11:19:40 AM: Started restoring cached build plugins
11:19:41 AM: Finished restoring cached build plugins
11:19:41 AM: Attempting ruby version 2.7.1, read from environment
11:19:41 AM: Started restoring cached ruby version
11:19:41 AM: Finished restoring cached ruby version
11:19:42 AM: Using ruby version 2.7.1
11:19:42 AM: Using PHP version 5.6
11:19:43 AM: No npm workspaces detected
11:19:43 AM: Started restoring cached node modules
11:19:43 AM: Finished restoring cached node modules
11:19:43 AM: Installing NPM modules using NPM version 8.11.0
11:19:43 AM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
11:19:43 AM: npm WARN config location in the cache, and they are managed by
11:19:43 AM: npm WARN config     [`cacache`](http://npm.im/cacache).
11:19:43 AM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
11:19:43 AM: npm WARN config location in the cache, and they are managed by
11:19:43 AM: npm WARN config     [`cacache`](http://npm.im/cacache).
11:19:44 AM: > [email protected] prepare
11:19:44 AM: > svelte-kit sync
11:19:44 AM: added 1 package, and audited 201 packages in 667ms
11:19:44 AM: 31 packages are looking for funding
11:19:44 AM:   run `npm fund` for details
11:19:44 AM: found 0 vulnerabilities
11:19:44 AM: NPM modules installed
11:19:44 AM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
11:19:44 AM: npm WARN config location in the cache, and they are managed by
11:19:44 AM: npm WARN config     [`cacache`](http://npm.im/cacache).
11:19:44 AM: Started restoring cached go cache
11:19:44 AM: Finished restoring cached go cache
11:19:44 AM: go version go1.14.4 linux/amd64
11:19:44 AM: go version go1.14.4 linux/amd64
11:19:44 AM: Installing missing commands
11:19:44 AM: Verify run directory
11:19:45 AM: ​
11:19:45 AM: ────────────────────────────────────────────────────────────────
11:19:45 AM:   Netlify Build                                                 
11:19:45 AM: ────────────────────────────────────────────────────────────────
11:19:45 AM: ​
11:19:45 AM: ❯ Version
11:19:45 AM:   @netlify/build 27.9.1
11:19:45 AM: ​
11:19:45 AM: ❯ Flags
11:19:45 AM:   baseRelDir: true
11:19:45 AM:   buildId: 62f52c1201dec90008f0b4dc
11:19:45 AM:   deployId: 62f52c1201dec90008f0b4de
11:19:45 AM:   systemLogFile: 3
11:19:45 AM: ​
11:19:45 AM: ❯ Current directory
11:19:45 AM:   /opt/build/repo
11:19:45 AM: ​
11:19:45 AM: ❯ Config file
11:19:45 AM:   /opt/build/repo/netlify.toml
11:19:45 AM: ​
11:19:45 AM: ❯ Context
11:19:45 AM:   deploy-preview
11:19:45 AM: ​
11:19:45 AM: ────────────────────────────────────────────────────────────────
11:19:45 AM:   1. build.command from netlify.toml                            
11:19:45 AM: ────────────────────────────────────────────────────────────────
11:19:45 AM: ​
11:19:45 AM: $ npm run build
11:19:45 AM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
11:19:45 AM: npm WARN config location in the cache, and they are managed by
11:19:46 AM: npm WARN config     [`cacache`](http://npm.im/cacache).
11:19:46 AM: > [email protected] build
11:19:46 AM: > vite build
11:19:46 AM: vite v3.0.3 building for production...
11:19:46 AM: transforming...
11:19:48 AM: 4:19:48 PM [vite-plugin-svelte] /opt/build/repo/src/components/BackToTop.svelte:31:2 Unused CSS selector "hidden"
11:19:48 AM: 29:
11:19:48 AM: 30: <style>
11:19:48 AM: 31:   hidden {
11:19:48 AM:       ^
11:19:48 AM: 32:     opacity: 0;
11:19:48 AM: 33:     visibility: hidden;
11:19:49 AM: ✓ 291 modules transformed.
11:19:49 AM: rendering chunks...
11:19:49 AM: .svelte-kit/output/client/manifest.json                                           5.75 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/error.svelte-6ca208f4.js                 1.56 KiB / gzip: 0.74 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/pages/__layout.svelte-759db35c.js        7.58 KiB / gzip: 2.89 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/pages/classmate.svelte-601ef98c.js       4.99 KiB / gzip: 1.92 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/pages/faculty.svelte-73857b1f.js         7.54 KiB / gzip: 2.68 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/pages/facultymember.svelte-5cab22ed.js   5.47 KiB / gzip: 2.08 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/pages/classmates.svelte-a56bf20f.js      17.52 KiB / gzip: 5.37 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/start-52c90e39.js                        26.54 KiB / gzip: 9.30 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/pages/memoriam.svelte-d47c1c33.js        8.90 KiB / gzip: 3.10 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/pages/tigerhunt.svelte-f33cb8b7.js       6.99 KiB / gzip: 2.78 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/chunks/index-d53b7bc0.js                 0.43 KiB / gzip: 0.30 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/chunks/index-5a02abfc.js                 7.58 KiB / gzip: 3.08 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/chunks/singletons-eca981c1.js            0.05 KiB / gzip: 0.07 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/chunks/navigation-75a744b1.js            0.17 KiB / gzip: 0.15 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/chunks/classmates-ce39c23f.js            0.13 KiB / gzip: 0.13 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/pages/index.svelte-d7de32bc.js           31.15 KiB / gzip: 9.20 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/pages/updatecontact.svelte-954ecab1.js   19.31 KiB / gzip: 5.80 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/chunks/createPersonGroups-de02cabd.js    0.85 KiB / gzip: 0.31 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/chunks/faculty-1ed40048.js               0.12 KiB / gzip: 0.13 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/chunks/LetterIndex-dfe59598.js           2.77 KiB / gzip: 1.38 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/chunks/validators-abdbc29c.js            1.21 KiB / gzip: 0.68 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/chunks/getCloudinaryPhoto-5251ecf2.js    19.91 KiB / gzip: 6.35 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/assets/__layout-5ba75782.css             32.39 KiB / gzip: 6.61 KiB
11:19:49 AM: .svelte-kit/output/client/_app/immutable/pages/events.svelte-a934eaef.js          58.40 KiB / gzip: 18.52 KiB
11:19:49 AM: vite v3.0.3 building SSR bundle for production...
11:19:49 AM: transforming...
11:19:49 AM: 4:19:49 PM [vite-plugin-svelte] /opt/build/repo/src/components/BackToTop.svelte:31:2 Unused CSS selector "hidden"
11:19:49 AM: 29:
11:19:49 AM: 30: <style>
11:19:49 AM: 31:   hidden {
11:19:49 AM:       ^
11:19:49 AM: 32:     opacity: 0;
11:19:49 AM: 33:     visibility: hidden;
11:19:49 AM: ✓ 41 modules transformed.
11:19:49 AM: Generated an empty chunk: "hooks"
11:19:49 AM: rendering chunks...
11:19:49 AM: .svelte-kit/output/server/manifest.json                                          4.18 KiB
11:19:49 AM: .svelte-kit/output/server/index.js                                               77.55 KiB
11:19:49 AM: .svelte-kit/output/server/entries/pages/__layout.svelte.js                       4.71 KiB
11:19:49 AM: .svelte-kit/output/server/entries/fallbacks/error.svelte.js                      0.74 KiB
11:19:49 AM: .svelte-kit/output/server/entries/pages/classmate.svelte.js                      3.44 KiB
11:19:49 AM: .svelte-kit/output/server/entries/pages/classmates.svelte.js                     5.02 KiB
11:19:49 AM: .svelte-kit/output/server/entries/pages/events.svelte.js                         8.25 KiB
11:19:49 AM: .svelte-kit/output/server/entries/pages/faculty.svelte.js                        4.75 KiB
11:19:49 AM: .svelte-kit/output/server/entries/pages/facultymember.svelte.js                  3.76 KiB
11:19:49 AM: .svelte-kit/output/server/entries/pages/index.svelte.js                          15.45 KiB
11:19:49 AM: .svelte-kit/output/server/entries/pages/memoriam.svelte.js                       5.04 KiB
11:19:49 AM: .svelte-kit/output/server/entries/pages/tigerhunt.svelte.js                      4.01 KiB
11:19:49 AM: .svelte-kit/output/server/entries/pages/updatecontact.svelte.js                  9.02 KiB
11:19:49 AM: .svelte-kit/output/server/_app/immutable/chunks/index-e1dad9ab.js                3.49 KiB
11:19:49 AM: .svelte-kit/output/server/_app/immutable/chunks/getCloudinaryPhoto-ff5e2635.js   0.66 KiB
11:19:49 AM: .svelte-kit/output/server/_app/immutable/chunks/classmates-34fc5b58.js           0.28 KiB
11:19:49 AM: .svelte-kit/output/server/_app/immutable/chunks/LetterIndex-ff8523fc.js          2.31 KiB
11:19:49 AM: .svelte-kit/output/server/_app/immutable/chunks/createPersonGroups-de02cabd.js   1.67 KiB
11:19:49 AM: .svelte-kit/output/server/_app/immutable/chunks/index-6c7ddbaf.js                1.18 KiB
11:19:49 AM: .svelte-kit/output/server/_app/immutable/chunks/faculty-820b34d8.js              0.26 KiB
11:19:49 AM: .svelte-kit/output/server/_app/immutable/chunks/hooks-bced8853.js                0.00 KiB
11:19:49 AM: (node:1582) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
11:19:49 AM: (Use `node --trace-warnings ...` to show where the warning was created)
11:19:49 AM: (node:1582) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
11:19:49 AM: /opt/build/repo/node_modules/add-to-calendar-button/npm_dist/mjs/index.js:1667
11:19:49 AM: export { atcb_action, atcb_init };
11:19:49 AM: ^^^^^^
11:19:49 AM: SyntaxError: Unexpected token 'export'
11:19:49 AM:     at Object.compileFunction (node:vm:352:18)
11:19:49 AM:     at wrapSafe (node:internal/modules/cjs/loader:1033:15)
11:19:49 AM:     at Module._compile (node:internal/modules/cjs/loader:1069:27)
11:19:49 AM:     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
11:19:49 AM:     at Module.load (node:internal/modules/cjs/loader:981:32)
11:19:49 AM:     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
11:19:49 AM:     at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
11:19:49 AM:     at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
11:19:49 AM:     at async Promise.all (index 0)
11:19:49 AM:     at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
11:19:49 AM: [SyntaxError: Unexpected token 'export']
11:19:49 AM: [vite-plugin-svelte-kit] Prerendering failed with code 1
11:19:49 AM: error during build:
11:19:49 AM: Error: Prerendering failed with code 1
11:19:49 AM:     at ChildProcess.<anonymous> (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/vite.js:2367:14)
11:19:49 AM:     at ChildProcess.emit (node:events:527:28)
11:19:49 AM:     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
11:19:50 AM: ​
11:19:50 AM: ────────────────────────────────────────────────────────────────
11:19:50 AM:   "build.command" failed                                        
11:19:50 AM: ────────────────────────────────────────────────────────────────
11:19:50 AM: ​
11:19:50 AM:   Error message
11:19:50 AM:   Command failed with exit code 1: npm run build (https://ntl.fyi/exit-code-1)
11:19:50 AM: ​
11:19:50 AM:   Error location
11:19:50 AM:   In build.command from netlify.toml:
11:19:50 AM:   npm run build
11:19:50 AM: ​
11:19:50 AM:   Resolved config
11:19:50 AM:   build:
11:19:50 AM:     command: npm run build
11:19:50 AM:     commandOrigin: config
11:19:50 AM:     environment:
11:19:50 AM:       - NODE_VERSION
11:19:50 AM:       - REVIEW_ID
11:19:50 AM:       - VITE_BE_URL
11:19:50 AM:       - VITE_CLOUDINARY_NAME
11:19:50 AM:     publish: /opt/build/repo/build
11:19:50 AM:     publishOrigin: config
11:19:50 AM:   functions:
11:19:50 AM:     '*':
11:19:50 AM:       node_bundler: esbuild
11:19:50 AM:   functionsDirectory: /opt/build/repo/functions
11:19:50 AM: Caching artifacts
11:19:50 AM: Started saving node modules
11:19:50 AM: Finished saving node modules
11:19:50 AM: Started saving build plugins
11:19:50 AM: Finished saving build plugins
11:19:50 AM: Started saving pip cache
11:19:50 AM: Finished saving pip cache
11:19:50 AM: Started saving emacs cask dependencies
11:19:50 AM: Finished saving emacs cask dependencies
11:19:50 AM: Started saving maven dependencies
11:19:50 AM: Finished saving maven dependencies
11:19:50 AM: Started saving boot dependencies
11:19:50 AM: Finished saving boot dependencies
11:19:50 AM: Started saving rust rustup cache
11:19:50 AM: Finished saving rust rustup cache
11:19:50 AM: Started saving go dependencies
11:19:50 AM: Finished saving go dependencies
11:19:50 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
11:19:50 AM: Creating deploy upload records
11:19:50 AM: Failing build: Failed to build site
11:19:50 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
11:19:50 AM: Finished processing build request in 17.222468495s

System & Environment

1. Device & OS: MacBook Pro running MacOS Monterey Version 12.5
2. Browser: Brave - Version 1.42.88 Chromium: 104.0.5112.81 (Official Build) (x86_64)
3. Application version: My app version 0.0.1, add-to-calendar-button version 1.14.3

[jdmedlock]

I hope this bit of info is useful in finding a solution.

I modified node_modules/add-to-calendar-button/package.json and added a "type": "module" and them ran npm run build and the problem went away. However, I don't know if this would have any unintended effects on non-Svelte apps using this package.

[jekuer]

@jdmedlock , Thanks for bringing this up. Will look into it.

Since we are using a commonJS/ESModule hybrid approach, defining the type in the main package.json would not work - but the solution misses a part. I will add additional package.json files to the npm_dist sub directories. There, we then can savely define the module type. This should fix your issue in a universal way. Will keep you posted.

For now, in your case, you could stick to your manual workaround for the moment.

Best, Jens

[jekuer]

Should be fixed with the latest release :)

[jdmedlock]

Thank you! I'll test it out today and I appreciate your quick response on this issue.

Thanks, Jim

Please consider the environment before printing this email

On Wed, Aug 17, 2022 at 4:24 PM Jens Kuerschner @.***> wrote:

Should be fixed with the latest release :)

— Reply to this email directly, view it on GitHub https://github.com/add2cal/add-to-calendar-button/issues/123#issuecomment-1218504265, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJ2HIGYSXANVWRRVP4FCELVZVKBFANCNFSM56I43INQ . You are receiving this because you were mentioned.Message ID: @.***>