[Bug]: Sveltekit (mainly vite) does not work with require() in node_modules/svelte-reveal/dist/index.js

[neuro-bro]

Describe the bug

4:10:08 PM [vite] Error when evaluating SSR module /src/routes/index.svelte:
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/neurobro/dev/sveltekit-skeleton/node_modules/svelte-reveal/dist/index.js from /home/neurobro/dev/sveltekit-skeleton/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js not supported.
Instead change the require of index.js in /home/neurobro/dev/sveltekit-skeleton/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js to a dynamic import() which is available in all CommonJS modules.
at nodeRequire (/home/neurobro/dev/sveltekit-skeleton/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:66559:17)
at ssrImport (/home/neurobro/dev/sveltekit-skeleton/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:66501:20)
at eval (/src/routes/index.svelte:31:38)
at async instantiateModule (/home/neurobro/dev/sveltekit-skeleton/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:66544:9)

Reproduction

[Bug]: Sveltekit (mainly vite) does not work with require() in node_modules/svelte-reveal/dist/index.js

It needs to be converted to import(), I think

package.json using
{
"type": "module"
}

System Info

Windows 10, Firefox

Severity

Blocking

Additional Information

p.s. your repo has some of the tidiest code I have seen. Excellent work :)

[neuro-bro]

In case you need this...

{
"name": "sveltekit-reveal",
"version": "0.0.1",
"scripts": {
"dev": "svelte-kit dev -p 4201 -o",
"build": "svelte-kit build",
"preview": "svelte-kit preview -p 4201",
"check": "svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
"lint:css": "stylelint "src/**/*.{css,svelte}"",
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
"svelte:check": "svelte-check --fail-on-warnings"
},
"devDependencies": {
"@poppanator/sveltekit-svg": "^0.1.7",
"@sveltejs/kit": "next",
"@tailwindcss/aspect-ratio": "^0.3.0",
"@tailwindcss/forms": "^0.3.4",
"@tailwindcss/line-clamp": "^0.2.2",
"@tailwindcss/typography": "^0.4.1",
"@typescript-eslint/eslint-plugin": "^4.31.1",
"@typescript-eslint/parser": "^4.31.1",
"autoprefixer": "^10.3.7",
"cssnano": "^5.0.8",
"cssnano-preset-advanced": "^5.1.4",
"daisyui": "^1.14.5",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^3.2.1",
"postcss": "^8.3.9",
"postcss-import": "^14.0.2",
"postcss-load-config": "^3.1.0",
"postcss-nested": "^5.0.6",
"prettier": "^2.4.1",
"prettier-plugin-svelte": "^2.4.0",
"reading-time": "^1.5.0",
"svelte": "^3.42.6",
"svelte-check": "^2.2.10",
"svelte-hero-icons": "^3.0.0",
"svelte-preprocess": "^4.9.4",
"svelte-reveal": "^0.3.2",
"tailwindcss": "^2.2.17",
"tslib": "^2.3.1",
"typescript": "^4.4.3",
"vanilla-lazyload": "^17.5.0",
"vite-imagetools": "^3.8.0"
},
"type": "module"
}

[DaveKeehl]

Hi, thanks for reaching out. I had already noticed this issue last week. What's weird is that when I first published this library it used to work without any problem with SvelteKit, and I haven't done anything particularly different since then. By doing some research online, I found out that apparently it's a really common issue with Vite and there doesn't seem a single working solution for everybody.

For now, the only fix I've found that (temporarily) works is by disabling SSR for svelte-reveal. This is my svelte.config.js in my SvelteKit app:

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

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

	kit: {
		adapter: adapter(),
		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte',
		vite: {
			ssr: {
				noExternal: ['svelte-reveal']
			}
		}
	}
};

export default config;

Sorry for the issue and I hope to find a more elegant solution as soon as possible!

[DaveKeehl]

I pinned this issue so that other people can see it more easily.

[neuro-bro]

Thanks :) I got round the issue by just taking out your src content and putting it in $lib/actions for my own project. I did notice though that I couldn't update the global config (possibly related issue or a rush my end). I got round that by just updating the local version of it to meet my needs. Going back to the original issue, I also read online that it might be an issue with node but haven't had time to look into it.

[DaveKeehl]

Ok, good to hear! If you are facing issues updating the global config, try to update to version 0.3.3. I released it yesterday and it fixes the setDefaultOptions API function (there was a bug).

[DaveKeehl]

That error is now gone thanks to a new Vite release that went public this morning 🙌🏻 See here.

However, I'm now facing some issues seeing the effect in action on page reload. @neuro-bro Could you check too?