Got ``$state(...)` can only be used as a variable declaration initializer or a class field` error in docker build, but not local PC

[ninyawee]

Describe the bug

This is a build time error. i found in similar to #12852 . This prevent me from serve it in production.

It is so weird that build in my local PC works

npm run dev #works

npm run build #works
 npm run preview #works

, but

running it in docker is not.

My workaround is to copy the build folder from local pc into the docker.

Reproduction

# https://khromov.se/dockerizing-your-sveltekit-applications-a-practical-guide/
# Use the official Node.js image as the base image

FROM node:22-alpine AS builder

ARG FONTAWESOME_NPM_AUTH_TOKEN
ARG COMMIT_HASH="unknown"
ENV COMMIT_HASH=${COMMIT_HASH}

WORKDIR /app
COPY package*.json .

COPY .npmrc .
RUN npm ci
# RUN npm install
COPY . .

RUN npm run build
RUN npm prune --production

FROM node:22-alpine
WORKDIR /app
COPY --from=builder /app/build build/
COPY --from=builder /app/node_modules node_modules/
COPY package.json .
EXPOSE 3000
ENV NODE_ENV=production
CMD [ "node", "build" ]

#  docker --debug build --no-cache --progress=plain  -f Dockerfile.suppose --build-arg FONTAWESOME_NPM_AUTH_TOKEN=$FONTAWESOME_NPM_AUTH_TOKEN .

Logs

#12 3.387 x Build failed in 2.10s
#12 3.387 error during build:
#12 3.387 [vite-plugin-svelte-module] [plugin vite-plugin-svelte-module] src/lib/components/map/map-state.svelte.ts (11:23): src/lib/components/map/map-state.svelte.ts:11:23 `$state(...)` can only be used as a variable declaration initializer or a class field
#12 3.387 file: /app/src/lib/components/map/map-state.svelte.ts:11:23
#12 3.387 
#12 3.387   9 |  export class MapState {
#12 3.387  10 |    constructor(mapNotes = void 0, mode = MAP_MODES.NONE) {
#12 3.387  11 |      this.currentView = $state({ lng: 0, lat: 0, zoom: 0 });
#12 3.387                                                                  ^
#12 3.387  12 |      this.baseMapStyle = $state(OurMapStyle.xxx);
#12 3.387  13 |      this.selectedRasterLayers = $state([]);
#12 3.387 
#12 3.387 
#12 ERROR: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1
------
 > [builder 8/9] RUN npm run build:
3.387 file: /app/src/lib/components/map/map-state.svelte.ts:11:23
3.387 
3.387   9 |  export class MapState {
3.387  10 |    constructor(mapNotes = void 0, mode = MAP_MODES.NONE) {
3.387  11 |      this.currentView = $state({ lng: 0, lat: 0, zoom: 0 });
3.387                                                                  ^
3.387  12 |      this.baseMapStyle = $state(OurMapStyle.xxx);
3.387  13 |      this.selectedRasterLayers = $state([]);
3.387 
3.387 
------

### System Info

```shell
$ npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers
Need to install the following packages:
envinfo@7.14.0
Ok to proceed? (y) y


  System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (48) x64 AMD Ryzen Threadripper 3960X 24-Core Processor
    Memory: 82.13 GB / 125.63 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.17.0 - ~/.local/share/mise/installs/node/latest/bin/node
    npm: 10.8.2 - ~/.local/share/mise/installs/node/latest/bin/npm
    bun: 1.1.29 - ~/.local/share/mise/installs/bun/latest/bin/bun
  Browsers:
    Brave Browser: 130.1.71.121
    Chrome: 130.0.6723.91
  npmPackages:
    svelte: ^5.0.0-next.264 => 5.1.11

Severity

blocking all usage of svelte

[ninyawee]

im creating repo for ease of repoduce here. https://github.com/wasdee/svelte-issue-14185-reproduce

[trueadm]

I'm assuming you have a source file where you're doing this inside a constructor?

this.currentView = $state({ lng: 0, lat: 0, zoom: 0 });

That's not allowed with $state, it needs to be a class field on the class itself, not the constructor.

[brunnerh]

Suspect that svelte-kit sync is necessary before build or does that happen automatically?
If the generated tsconfig is not there, it probably turns the fields into constructor assignments because the default target is too "low".

The default config at the root does not include some relevant options:

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"allowJs": true,
		"checkJs": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"sourceMap": true,
		"strict": true,
		"moduleResolution": "bundler"
	}
}

See also my answer here on more exact requirements.
(Opened a separate documentation issue: #14187)

[ninyawee]

I'm assuming you have a source file where you're doing this inside a constructor?

this.currentView = $state({ lng: 0, lat: 0, zoom: 0 });

That's not allowed with $state, it needs to be a class field on the class itself, not the constructor.

it is inside a class. vite build might strip some info out.

// Svelte 5's Secret Weapon: Classes + Context
// REF: https://www.youtube.com/watch?v=e1vlC31Sh34

import { getContext, setContext } from 'svelte';
import { OurMapStyle } from './meta';
import type { WMSLayer } from './geoserver';
import type { VectorLayer } from './map.type';
import type { Feature, FeatureCollection } from 'geojson';

export interface VectorUserCustomization {
	color: string;
	alpha: number;
}

export const MAP_MODES = {
	NONE: 'none',
	EDIT: 'edit',
	MEASURE_DISTANCE: 'measure_distance',
	MEASURE_AREA: 'measure_area'
} as const;

export type MapMode = (typeof MAP_MODES)[keyof typeof MAP_MODES];

export class MapState {
	currentView = $state({ lng: 0, lat: 0, zoom: 0 });
	baseMapStyle = $state(OurMapStyle.Default);
	selectedRasterLayers = $state<WMSLayer[]>([]);
	latestRasterLayer = $state<WMSLayer | null>(null);
	selectedVectorLayers = $state<VectorLayer[]>([]);
	vectorLayerCustomizations = $state<Record<string, VectorUserCustomization>>({});
	mapNotes = $state<FeatureCollection>({
		type: 'FeatureCollection',
		features: []
	});
	currentMode = $state<MapMode>(MAP_MODES.NONE);
	isEditMode = $derived(this.currentMode === MAP_MODES.EDIT);
	selectedMapNote = $state<Feature | undefined>(undefined);

	isEmptyMapNotes = $derived(this.mapNotes.features.length === 0);

	constructor(
		mapNotes: FeatureCollection | undefined = undefined,
		mode: MapMode = MAP_MODES.NONE
	) {
		if (mapNotes) {
			this.mapNotes = mapNotes;
		}
		this.currentMode = mode;
	}

	setSampleMapNotes() {
		this.mapNotes = {
			type: 'FeatureCollection',
			features: [
				{
					type: 'Feature',
					geometry: {
						type: 'Polygon',
						coordinates: [
							[
								[100.123456, 13.123456],
								[100.234567, 13.234567],
								[100.345678, 13.345678],
								[100.456789, 13.456789],
								[100.567890, 13.567890],
								[100.678901, 13.678901],
								[100.789012, 13.789012],
								[100.123456, 13.123456]
							]
						]
					},
					properties: {
						id: 1,
						name: 'Location 1',
						type: 'hand_draw',
						description: 'Sample description'
					}
				}
			]
		};
	}

	setMode(mode: MapMode) {
		if (this.currentMode === mode) {
			this.currentMode = MAP_MODES.NONE;
		} else {
			this.currentMode = mode;
		}
	}

	// isEditMode() {
	// 	return this.currentMode === MAP_MODES.EDIT;
	// }

	isMeasureMode() {
		return (
			this.currentMode === MAP_MODES.MEASURE_DISTANCE ||
			this.currentMode === MAP_MODES.MEASURE_AREA
		);
	}
}

export type MapContextKey = symbol;
export const DEFAULT_MAP_KEY: MapContextKey = Symbol('MAP');
export function initMapState(
	key: MapContextKey = DEFAULT_MAP_KEY,
	mapNotes: FeatureCollection | undefined = undefined,
	mode: MapMode = MAP_MODES.NONE
) {
	const mapState = new MapState(mapNotes, mode);
	return setContext(key, mapState);
}

export function getMapState(key: MapContextKey = DEFAULT_MAP_KEY) {
	const mapState = getContext<ReturnType<typeof initMapState>>(key);
	return mapState;
}

[ninyawee]

Suspect that svelte-kit sync is necessary before build or does that happen automatically? If the generated tsconfig is not there, it probably turns the fields into constructor assignments because the default target is too "low".

The default config at the root does not include some relevant options:

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"allowJs": true,
		"checkJs": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"sourceMap": true,
		"strict": true,
		"moduleResolution": "bundler"
	}
}

See also my answer here on more exact requirements. (Opened a separate documentation issue: #14187)

you are right. tsconfig.json file is accidentally ignore in my .dockerignore.

I also run svelte-kit sync first since i got this msg at build ▲ [WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]