Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Aug 16, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fuzzy-mails-brush.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/vite-plugin-svelte': patch
---

use createRequire to load svelte.config.cjs in esm projects (fixes #141)
Original file line number Diff line number Diff line change
@@ -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');
Expand Down
Original file line number Diff line number Diff line change
@@ -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');
Expand Down
5 changes: 5 additions & 0 deletions packages/e2e-tests/configfile-esm/svelte.config.custom.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const sveltePreprocess = require('svelte-preprocess');

module.exports = {
preprocess: sveltePreprocess()
};
8 changes: 3 additions & 5 deletions packages/e2e-tests/hmr/__tests__/hmr.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import {
getColor,
editFile,
addFile,
removeFile
removeFile,
editViteConfig
} from '../../testUtils';

test('should render App', async () => {
Expand Down Expand Up @@ -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();
Expand Down
7 changes: 7 additions & 0 deletions packages/e2e-tests/testUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
15 changes: 13 additions & 2 deletions packages/vite-plugin-svelte/src/utils/load-svelte-config.ts
Original file line number Diff line number Diff line change
@@ -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',
Expand Down Expand Up @@ -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,
Expand Down