Segmentation fault when trying to run SvelteKit dev with 0.16.0-beta since 0.16.0-beta.9

[dioxine]

Describe the bug
When i try to run npm run dev in latest SvelteKit, i get an error [1] 2604 segmentation fault npm run dev.
Tried to revert version on vite-plugin-windicss step by step and found that 0.16.0-beta.9 and earlier versions are working normally.

Minimal Reproductions

1. Set up latest SvelteKit skeleton project with enabled typescript, eslint and prettier with npm init svelte@next command
2. Install vite-plugin-windicss with npm i -D vite-plugin-windicss
3. Add it to svelte.config.js like this

import preprocess from 'svelte-preprocess';
import windicss from 'vite-plugin-windicss';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),
	kit: {
		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte',

		vite: {
			plugins: [
				windicss.default()
			]
		}
	}
};
export default config;

4. Running npm run dev causes segmentation fault error
5. Running npm run build causes

[vite-plugin-svelte] failed to require config /Users/dioxine/svelte-test/svelte.config.js
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/dioxine/svelte-test/svelte.config.js
require() of ES modules is not supported.
...

Versions

• vite-plugin-windicss: v0.16.0-beta.14
• vite: v2.3.0
• framework(vue/react/svelte/etc): SvelteKit v1.0.0-next.105
• node: v14.15.4

Additonal Context
After some investigation, i found that it have started after devs of SvelteKit switched to ESM format of svelte.config.js
in 1.0.0-next.97 version. With CommonJS version of svelte.config.cjs vite-plugin-windicss works normally but seems that they will remove ability to use CJS version of config soon.

[dominikg]

Hi, maintainer of vite-plugin-svelte here, the "require" error is actually happening because the import that was tried before that failed too (logging of vite-plugin-svelte could be better here, noted!). Note the section at the end with "Invalid host defined options"

here's the full output of dev command in sveltekit (pnpm6, linux)

^Cdominikg@mb14:~/develop/my-api-kit$ pnpm dev

> ~TODO~@0.0.1 dev /home/dominikg/develop/my-api-kit
> svelte-kit dev

[vite-plugin-svelte] failed to require config /home/dominikg/develop/my-api-kit/svelte.config.js
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/dominikg/develop/my-api-kit/svelte.config.js
require() of ES modules is not supported.
require() of /home/dominikg/develop/my-api-kit/svelte.config.js from /home/dominikg/develop/my-api-kit/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@1.0.0-next.10_svelte@3.38.2+vite@2.3.0/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename svelte.config.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/dominikg/develop/my-api-kit/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at n (/home/dominikg/develop/my-api-kit/node_modules/.pnpm/jiti@1.9.2/node_modules/jiti/dist/v8cache.js:2:2472)
    at loadSvelteConfig (/home/dominikg/develop/my-api-kit/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@1.0.0-next.10_svelte@3.38.2+vite@2.3.0/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:383:14)
    at async resolveOptions (/home/dominikg/develop/my-api-kit/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@1.0.0-next.10_svelte@3.38.2+vite@2.3.0/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:585:24)
    at async Object.configResolved (/home/dominikg/develop/my-api-kit/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@1.0.0-next.10_svelte@3.38.2+vite@2.3.0/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:755:17)
    at async Promise.all (index 3)
    at async Object.resolveConfig (/home/dominikg/develop/vite/packages/vite/dist/node/config.js:197:5) {
  code: 'ERR_REQUIRE_ESM'
}
> Invalid host defined options
TypeError: Invalid host defined options
    at eval (eval at <anonymous> (/home/dominikg/develop/my-api-kit/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@1.0.0-next.10_svelte@3.38.2+vite@2.3.0/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:369:28), <anonymous>:3:1)
    at loadSvelteConfig (/home/dominikg/develop/my-api-kit/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@1.0.0-next.10_svelte@3.38.2+vite@2.3.0/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:376:22)
    at resolveOptions (/home/dominikg/develop/my-api-kit/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@1.0.0-next.10_svelte@3.38.2+vite@2.3.0/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:585:30)
    at Object.configResolved (/home/dominikg/develop/my-api-kit/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@1.0.0-next.10_svelte@3.38.2+vite@2.3.0/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:755:23)
    at /home/dominikg/develop/vite/packages/vite/dist/node/config.js:197:127
    at Array.map (<anonymous>)
    at Object.resolveConfig (/home/dominikg/develop/vite/packages/vite/dist/node/config.js:197:35)
    at async Object.createServer (/home/dominikg/develop/vite/packages/vite/dist/node/server/index.js:41:20)
    at async Watcher.init_server (file:///home/dominikg/develop/my-api-kit/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.107_svelte@3.38.2/node_modules/@sveltejs/kit/dist/chunks/index.js:3229:15)
    at async Watcher.init (file:///home/dominikg/develop/my-api-kit/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.107_svelte@3.38.2/node_modules/@sveltejs/kit/dist/chunks/index.js:3196:3)

what confuses me is that this happens with sveltekit, but not with a vanilla vite-plugin-svelte setup.

• npm init @vitejs/app,
• select svelte,
• install dependencies and vite-plugin-windicss@next
• use this config

import { defineConfig } from 'vite'
import svelte from '@sveltejs/vite-plugin-svelte'
import windicss from 'vite-plugin-windicss'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte(),windicss()]
})

With this the devserver works

sveltekit uses "type":"module" in it's package.json, when i add that to the default vite svelte template app i have to update the config to use windicss.default() instead of windicss(). That seems a bit awkward but still works.

here's how vite-plugin-svelte uses dynamic imports in a function to prevent typescript from turning it into a require: https://github.com/sveltejs/vite-plugin-svelte/blob/93ca647767c683d9f8996e670ae5c1b8171adc21/packages/vite-plugin-svelte/src/utils/loadSvelteConfig.ts#L12

for now this seems to only affect sveltekit + vite-plugin-windicss > 0.16.0-beta.9.

Unfortunately i have no clue why. I hope the information provided is still useful.

[antfu]

In 0.16.0-beta.10, we switched to jiti for loading the configurations.

/cc @pi0 is there any known issue for jiti to work with "type":"module"? Thanks

[gent-911]

any solution to the problem?

[TheComputerM]

Any workarounds, it is impossible to use windicss with sveltekit due to this.

[eikaramba]

@TheComputerM downgrade to 0.15.10 for now. there is a pr open to fix this, once it is merged it should work. see sveltejs/vite-plugin-svelte#54

[JustinVoitel]

issue can be closed due to sveltejs/vite-plugin-svelte#54 being merged

[antfu]

Can anyone verify if it works? Thanks

[dominikg]

the error is gone but you still have to use WindiCSS.default() 😕

svelte.config.js

import preprocess from 'svelte-preprocess';
import WindiCSS from 'vite-plugin-windicss'
/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte',
		vite: {
			plugins: [WindiCSS.default()]
		}
	}
};

export default config;

[dioxine]

Thank you very much! Everything works now with latest versions! Closing issue.