fix: use createRequire to require svelte.config.cjs in esm project (#142)

* feat: add config tests

* feat: try import cjs config

* add changeset

* fix: change cjs loading strategy

* fix: really load cjs config

* refactor: load cjs config

* docs: improve changeset description

Co-authored-by: dominikg <dominik.goepel@gmx.de>

Author: bluwy

.changeset/fuzzy-mails-brush.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+use createRequire to load svelte.config.cjs in esm projects (fixes #141)

packages/e2e-tests/configfile-custom/__tests__/configfile-custom.spec.ts

@@ -1,4 +1,15 @@
-it('should load config and work', async () => {
+import { editViteConfig } from 'testUtils';
+
+it('should load default config and work', async () => {
+	expect(await page.textContent('h1')).toMatch('Hello world!');
+	expect(await page.textContent('#test-child')).toBe('test-child');
+	expect(await page.textContent('#dependency-import')).toBe('dependency-import');
+});
+
+it('should load custom mjs config and work', async () => {
+	await editViteConfig((c) =>
+		c.replace('svelte()', `svelte({configFile:'svelte.config.custom.cjs'})`)
+	);
 	expect(await page.textContent('h1')).toMatch('Hello world!');
 	expect(await page.textContent('#test-child')).toBe('test-child');
 	expect(await page.textContent('#dependency-import')).toBe('dependency-import');

packages/e2e-tests/configfile-esm/__tests__/configfile-esm.spec.ts

@@ -1,4 +1,15 @@
-it('should load config and work', async () => {
+import { editViteConfig } from 'testUtils';
+
+it('should load default config and work', async () => {
+	expect(await page.textContent('h1')).toMatch('Hello world!');
+	expect(await page.textContent('#test-child')).toBe('test-child');
+	expect(await page.textContent('#dependency-import')).toBe('dependency-import');
+});
+
+it('should load custom cjs config and work', async () => {
+	await editViteConfig((c) =>
+		c.replace('svelte()', `svelte({configFile:'svelte.config.custom.cjs'})`)
+	);
 	expect(await page.textContent('h1')).toMatch('Hello world!');
 	expect(await page.textContent('#test-child')).toBe('test-child');
 	expect(await page.textContent('#dependency-import')).toBe('dependency-import');

packages/e2e-tests/configfile-esm/svelte.config.custom.cjs

@@ -0,0 +1,5 @@
+const sveltePreprocess = require('svelte-preprocess');
+
+module.exports = {
+	preprocess: sveltePreprocess()
+};

packages/e2e-tests/hmr/__tests__/hmr.spec.ts

@@ -9,7 +9,8 @@ import {
 	getColor,
 	editFile,
 	addFile,
-	removeFile
+	removeFile,
+	editViteConfig
 } from '../../testUtils';
 
 test('should render App', async () => {
@@ -123,10 +124,7 @@ if (!isBuild) {
 		});
 
 		test('should work with emitCss: false', async () => {
-			await editFile('vite.config.js', (c) => c.replace('svelte()', 'svelte({emitCss:false})'));
-			await sleep(isWin ? 1000 : 500); // editing vite config restarts server, give it some time
-			await page.goto(viteTestUrl, { waitUntil: 'networkidle' });
-			await sleep(50);
+			await editViteConfig((c) => c.replace('svelte()', 'svelte({emitCss:false})'));
 			expect(await getText(`#hmr-test-1 .counter`)).toBe('0');
 			expect(await getColor(`#hmr-test-1 .label`)).toBe('green');
 			await (await getEl(`#hmr-test-1 .increment`)).click();

packages/e2e-tests/testUtils.ts

@@ -196,3 +196,10 @@ export async function saveScreenshot(name?: string) {
 		console.log('failed to take screenshot', e);
 	}
 }
+
+export async function editViteConfig(replacer: (str: string) => string) {
+	editFile('vite.config.js', replacer);
+	await sleep(isWin ? 1000 : 500); // editing vite config restarts server, give it some time
+	await page.goto(viteTestUrl, { waitUntil: 'networkidle' });
+	await sleep(50);
+}

packages/vite-plugin-svelte/src/utils/load-svelte-config.ts

@@ -1,10 +1,16 @@
+import { createRequire } from 'module';
 import path from 'path';
 import fs from 'fs';
 import { pathToFileURL } from 'url';
 import { log } from './log';
 import { Options } from './options';
 import { UserConfig } from 'vite';
 
+// used to require cjs config in esm.
+// NOTE dynamic import() cjs technically works, but timestamp query cache bust
+// have no effect, likely because it has another internal cache?
+let esmRequire: NodeRequire;
+
 export const knownSvelteConfigNames = [
 	'svelte.config.js',
 	'svelte.config.cjs',
@@ -46,9 +52,14 @@ export async function loadSvelteConfig(
 		// cjs or error with dynamic import
 		if (!configFile.endsWith('.mjs')) {
 			try {
+				// identify which require function to use (esm and cjs mode)
+				const _require = import.meta.url
+					? (esmRequire ??= createRequire(import.meta.url))
+					: require;
+
 				// avoid loading cached version on reload
-				delete require.cache[require.resolve(configFile)];
-				const result = require(configFile);
+				delete _require.cache[_require.resolve(configFile)];
+				const result = _require(configFile);
 				if (result != null) {
 					return {
 						...result,