svelte.config.cjs not detected when in ES build environment.

[justDavid-3065]

Describe the bug

I recently switched from react to svelte for frontend ui dev in a typescript application whose package.json type property is set to “module” (indicating that builds target ES standards).
The issue should be quite obvious - any .js files in the typescript application are treated as ES modules (including svelte.config.js, postcss.config.js, etc.), and so require() is not supported but dynamic import is.
Typically, renaming .js files to .cjs (CommonJS) and replacing require() with import() therein should workaround the nightmarish ERR_REQUIRE_ESM error, however, this isn’t the case with svelte.
What happens with svelte is that svelte.config.js is still detected as missing from project’s root even though its extension was renamed to play nicely with modular ES applications.
A little research revealed that svelte uses require() internally to load its configuration file, which explains the ERR_REQUIRE_ESM error when following the normal svelte configuration approach.
There should be a way to either detect build target (e.g. via package.json type property) and detect the proper configuration (.js or .cjs) as it were, or explicitly specify configuration file name without file path (file location isn’t really necessary in my opinion since it resides in same location as package.json).

Reproduction

Any typescript project targeting ESM builds and using svelte without integrations (e.g. vite) will reproduce this error when trying to build the project.
In my usecase, I’ve got svelte (v5.34.7 is currently latest on npm package repository) and svelte-preprocess installed. I use svelte-kit tool for builds without any success.
Neither the .js nor .cjs variant of svelte configuration file is detected by svelte when project type is set to module.

Logs

1. Normal setup (svelte.config.js)

rest-express@1.0.0 build
> npm run build:client && npm run build:server
> rest-express@1.0.0 build:client
> NODE_ENV=production node build. js
< Building Svelte app with Sveltekit...
Malformed svelte.config.js
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/runner/workspace/svelte.config.js from /home/runner/workspace/@root not supported.
Instead change the require of svelte.config.js in /home/runner/workspace/@root to a dynamic import() which is available in all CommonJS modules. 
at requireRelative (/home/runner/workspace/n ode_modules/@sveltejs/kit/dist/package.js: 135:15
)
at Object. load_config (/home/runner/workspac e/node_modules/@sveltejs/kit/dist/package.js:156
: 17)
at Object. ‹anonymous> (/home/runner/workspac e/node_modules/@sveltejs/kit/dist/cli.js:35:20)
X Build failed: Error: Command failed: npx svelte-kit sync
at genericNodeError (node: internal/errors:98
4:15 )
at wrappedEn (node: internal/errors:538:14) at checkExecSyncError (node:child_process:89
1:11)
at execSync (node:child_process:963:15) at buildSvelteApp (file:///home/runner/works
pace/build.js: 11:5)
at file:///home/runner/workspace/build.js:41
: 1
at ModuleJob. run (node: internal/modules/esm/
module_job: 234:25)
....


2. Workaround setup (svelte.config.cjs)

rest-express@1.0.0 build
> npm run build:client && npm run build:server
> rest-express@1.0.0 build:client
> NODE_ENV=production node build. js
< Building Svelte app with Sveltekit...
Malformed svelte.config.js
Error: Cannot find module './svelte.config.js'
Require stack:
- /home/runner/workspace/@root
at Function. Module._resolveFilename (node: in
ternal/modules/cjs/loader: 1225:15 )
at Function. Module._load (node: internal/modu
les/cjs/loader:1051:27)
at Module. require (node: internal/modules/cjs
/loader: 1311:19)
at relative (/home/ runner/workspace/node_mod ules/node_modules/.pnpm/require-relative@0.8.7/n ode_modules/require-relative/index. js:25:15)
at Object.load_config (/home/runner/workspac e/node_modules/@sveltejs/kit/src/api/load_config /index.js:14:17)
at Object. ‹anonymous> (/home/runner/workspac e/node_modules/@sveltejs/kit/src/clі.js:9:11)
at Module._compile (node: internal/modules/cj
s/loader: 1469:14)
at Object. Module._extensions..js (node: inter
nal/modules/cjs/loader: 1548:10 )
at Module.load (node: internal/modules/cjs/lo
ader: 1288:32)
at Function. Module._load (node: internal/modu
les/cjs/loader: 1104:12)
X Build failed: Error: Command failed: npx svelte-kit sync
at genericNodeError (node: internal/errors:98
....

System Info

System:
OS: Linux 6.2 Ubuntu 24.04.2 LTS 24.04.2 LTS
(Noble Numbat)
CPU: (8) X64 AMD EPYC 7B13
Memory: 18.00 GB / 62.81 GB
Container: Yes
Shell: 5.2.21 - /bin/bash

Binaries:
Node: 20.18.1 - /nix/store/lyx73qs96hfazl77a rnwllwckq9dy012-nodejs-20.18.1-wrapped/bin/node
Yarn: 1.22.22 - /nix/store/jcgdksj94615142c2
y9ks214g6n74h3f-yarn-1.22.22/bin/yarn
npm: 10.8.2 - /nix/store/lyx73qs96hfazl77arn
wllwckq9dy012-nodejs-20.18. 1-wrapped/bin/npm
pnpm: 9.15.0 - /nix/store/z8s3r4vwf4r26g2d7s
hnw5lva6ihim8f-pnpm-9. 15.0/bin/pnpm
bun: 1.2.16 - /nix/store/917mlm9pvmkd4c62rvv
hp2xyd2c9hyl5-bun-1.2. 16/bin/bun

npmPackages:
svelte: ^5.34.7 = 5.34.7

Severity

blocking all usage of SvelteKit

Additional Information

The choice to stick to traditional svelte setup without integrations (only svelte-kit via svelte package and svelte-preprocess) is deliberate. The typescript project includes a websockets implementation that doesn’t play nicely with Vite’s Hot Module Reloading (HMR) feature.
Vite is a full fledged development tool with a local server bundled in its distribution - this server conflicts with my development environment which provides automatic rebuilds and reruns of the application by default.

[eltigerchino]

I think @sveltejs/kit stopped supporting CJS config files a long time ago https://github.com/sveltejs/kit/pull/1323/files#diff-3d3392afaae8a848f5862f73d4cfa9e50f984b68ecd1d91f6c414ece0de4f23b and vite-plugin-svelte will stop supporting CJS config files too sveltejs/vite-plugin-svelte#1142 .

Can you provide a minimal reproduction (in the form of a repository) of what your setup looks like with/without SvelteKit?

[justDavid-3065]

Hey @eltigerchino , thanks for reaching out soonest.
Creating a minimal repository to reproduce this error with svelte-kit had the minimal app run without issues.
Digging deeper in the codebase I discovered the issue was a more sinister one - typical with monorepos.
The frontend source files live in a sub folder (client) and this is where the build task starts off, and so naturally it has got its own configuration file.
However, svelte expects its configuration file to be at the project root ( same as package.json).
So, my project currently tris to compile svelte components from a sub folder while using configuration from a parent root folder. Both configuration files also had different formats as well.

This explains my problem even further and now the solution is clearer now. I just need to convert root config to ESM syntax, configure proper file paths, remove conflicting client configuration, and finally update the build script.

Thanks.

Thanks