Node App builds locally but fails in GitlabCI - node.js

Question

I have a svelte app that is built with SvelteKit. It runs fine locally and local Docker image, but it fails in the Gitlab CI.
This is my gitlab-ci.yml:
image: node:16.15.0-alpine
stages:
- build
- lint
- test
install:
stage: build
script:
- cd frontend/
- npm ci
artifacts:
paths:
- frontend/
only:
- merge_requests
format-and-lint:
stage: lint
needs: [install]
script:
- cd frontend/
- npm run format
- npm run lint
artifacts:
paths:
- frontend/
only:
- merge_requests
# --------------- This step always fails ---------------
cypress:
stage: test
needs: [format-and-lint]
script:
- cd frontend/
- npm run build
- npm run preview
- npx cypress run --spec "cypress/integration/lehrenden-eintragung/*"
artifacts:
paths:
- frontend/
only:
- merge_requests
# -----------------------------------------------------
vitest:
stage: test
needs: [format-and-lint]
script:
- cd frontend/
- npm run test
artifacts:
paths:
- frontend/
only:
- merge_requests
My package.json looks like this:
{
"bezeichnungLang": "llp-frontend",
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "svelte-kit dev",
"build": "svelte-kit build",
"package": "svelte-kit package",
"preview": "svelte-kit preview",
"prepare": "svelte-kit sync",
"check": "svelte-check --tsconfig ./tsconfig.json --compiler-warnings \"css-unused-selector:ignore\"",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
"test": "vitest run",
"coverage": "vitest run --coverage"
},
"devDependencies": {
"#sveltejs/adapter-auto": "^1.0.0-next.40",
"#sveltejs/kit": "^1.0.0-next.323",
"#testing-library/jest-dom": "^5.16",
"#testing-library/svelte": "^3.1",
"#testing-library/user-event": "^14.0",
"#tsconfig/svelte": "^3.0",
"#types/bootstrap": "^5.1.9",
"#types/jest": "^27.4",
"#types/testing-library__jest-dom": "^5.14",
"#typescript-eslint/eslint-plugin": "^5.18",
"#typescript-eslint/parser": "^5.18",
"bootstrap": "^5.1",
"cypress": "^9.6.1",
"eslint": "^8.14",
"eslint-config-prettier": "^8.5",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-svelte3": "^3.4",
"jsdom": "^19.0",
"popper.js": "^1.16",
"prettier": "^2.6",
"prettier-plugin-svelte": "^2.7",
"purgecss-from-svelte": "^2.0",
"simple-svelte-autocomplete": "^2.4.0",
"source-map-support": "^0.5",
"svelte": "^3.46",
"svelte-check": "^2.4",
"svelte-preprocess": "^4.10",
"ts-node": "^10.7",
"ts-replace-all": "^1.0",
"tslib": "^2.3",
"typescript": "^4.6.4",
"vitest": "^0.10",
"vitest-svelte-kit": "^0.0"
},
"babel": {
"plugins": [
"#babel/plugin-proposal-class-properties"
],
"presets": [
[
"#babel/preset-env"
]
]
},
"browserslist": [
"since 2017-06"
],
"dependencies": {
"sass": "^1.52.2",
"vite": "^2.9.9"
}
}
The GitlabCI fails with the following error:
Using docker image sha256:e5065cc780745864eeee3280fe347b33e90961c98c7d3e14d5b660e16aef24ce for node:16.15.0-alpine with digest node#sha256:1a9a71ea86aad332aa7740316d4111ee1bd4e890df47d3b5eff3e5bded3b3d10 ...
$ cd frontend/
$ ls
convertTestData.js
cypress
cypress.json
node_modules
package-lock.json
package.json
setupTestEnvironment.ts
src
static
svelte.config.js
tsconfig.json
vite.config.ts
vitest.config.js
$ npm run build
> build
> svelte-kit build
8:59:30 PM [vite-plugin-svelte] hmr is enabled but compilerOptions.dev is false, forcing it to true
8:59:30 PM [vite-plugin-svelte] options.hot is enabled but does not work on production build, forcing it to false
8:59:30 PM [vite-plugin-svelte] you are building for production but compilerOptions.dev is true, forcing it to false
vite v2.9.12 building for production...
transforming...
✓ 1 modules transformed.
[vite-plugin-svelte] /builds/llp/llp/frontend/src/routes/__layout.svelte:32:1 The keyword 'let' is reserved
file: /builds/llp/llp/frontend/src/routes/__layout.svelte:32:1
30 |
31 | function create_fragment(ctx) {
32 | let div3;
^
33 | let div2;
34 | let div0;
> /builds/llp/llp/frontend/src/routes/__layout.svelte:32:1 The keyword 'let' is reserved
at error (file:///builds/llp/llp/frontend/node_modules/svelte/compiler.mjs:17716:19)
at Parser$1.error (file:///builds/llp/llp/frontend/node_modules/svelte/compiler.mjs:17792:9)
at Parser$1.acorn_error (file:///builds/llp/llp/frontend/node_modules/svelte/compiler.mjs:17786:14)
at read_expression (file:///builds/llp/llp/frontend/node_modules/svelte/compiler.mjs:8652:16)
at mustache (file:///builds/llp/llp/frontend/node_modules/svelte/compiler.mjs:17475:28)
at new Parser$1 (file:///builds/llp/llp/frontend/node_modules/svelte/compiler.mjs:17751:21)
at parse$3 (file:///builds/llp/llp/frontend/node_modules/svelte/compiler.mjs:17883:20)
at compile (file:///builds/llp/llp/frontend/node_modules/svelte/compiler.mjs:32265:17)
at compileSvelte2 (file:///builds/llp/llp/frontend/node_modules/#sveltejs/vite-plugin-svelte/dist/index.js:351:20)
at async Object.transform (file:///builds/llp/llp/frontend/node_modules/#sveltejs/vite-plugin-svelte/dist/index.js:1791:25)
Cleaning up project directory and file based variables
00:01
ERROR: Job failed: exit code 1
All other steps in the pipeline run fine and finish without error. Please help!

Answer 1

This error is mainly from [vite-plugin-svelte] which couldn't transform line 32 at __layout.svelte component.
function create_fragment(ctx) {
let div3;
^
let div2;
let div0;
/builds/llp/llp/frontend/src/routes/__layout.svelte:32:1 The keyword 'let' is reserved
Try upgrade the following dependencies:
#sveltejs/kit (this has vite built-in, and doesn't need extra dependency)
svelte and related dependencies.

Answer 2

The solution was to specify an exact version of sveltejs/kit. The build fails on version 1.0.0-next.350 but runs fine with 1.0.0-next.323. Somehow, besides having the same node version, in the pipeline version 1.0.0-next.350 was installed.