Using parse inside sveltekit's server endpoint fails when we make a build.

[theetherGit]

Describe the bug

When we use parse method on server from svelte/compiler it work perfectly in dev but when we make build using vite build in sveltekit project it fails.

Error: Cannot find module '../data/patch.json'

This ../data/patch.json file is part of css-tree.

In v3 it use to work perfectly on both server and client but not with v4.

Reproduction

Reproduction GitHub - Explanation

Logs

:internal/event_target:1006
  process.nextTick(() => { throw err; });
                           ^
Error: Cannot find module '../data/patch.json'
Require stack:
- /Users/shivammeena/WebstormProjects/svelte-h2j/.svelte-kit/output/server/chunks/svelteToJsx.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at file:///Users/shivammeena/WebstormProjects/svelte-h2j/.svelte-kit/output/server/chunks/svelteToJsx.js:12150:15
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async analyse (file:///Users/shivammeena/WebstormProjects/svelte-h2j/node_modules/.pnpm/@sveltejs+kit@1.24.0_svelte@4.2.1_vite@4.4.9/node_modules/@sveltejs/kit/src/core/postbuild/analyse.js:83:16)
    at async MessagePort.<anonymous> (file:///Users/shivammeena/WebstormProjects/svelte-h2j/node_modules/.pnpm/@sveltejs+kit@1.24.0_svelte@4.2.1_vite@4.4.9/node_modules/@sveltejs/kit/src/utils/fork.js:22:16)
Emitted 'error' event on Worker instance at:
    at [kOnErrorMessage] (node:internal/worker:290:10)
    at [kOnMessage] (node:internal/worker:301:37)
    at MessagePort.<anonymous> (node:internal/worker:202:57)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:731:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/shivammeena/WebstormProjects/svelte-h2j/.svelte-kit/output/server/chunks/svelteToJsx.js'
  ]
}

Node.js v18.12.1

System Info

System:
    OS: macOS 13.5.2
    CPU: (8) arm64 Apple M1
    Memory: 55.41 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
    pnpm: 8.8.0 - ~/Library/pnpm/pnpm
  Browsers:
    Brave Browser: 117.1.58.127
    Chrome: 108.0.5359.94
    Safari: 16.6
  npmPackages:
    svelte: ^4.2.1 => 4.2.1

Severity

annoyance

[theetherGit]

@benmccann can you please take a look.

[gtm-nayan]

@theetherGit put this in the plugins array in vite.config.js

const require = createRequire(import.meta.url);


			{
				resolveId(id) {
					// Must import from the `css-tree` browser bundled distribution due to `createRequire` usage if importing from css-tree directly
					if (id === 'css-tree') {
						return require.resolve('./node_modules/css-tree/dist/csstree.esm.js');
					}
				}
			}

[gtm-nayan]

You may need to install css-tree as a dependency if you're using pnpm.

[theetherGit]

@gtm-nayan thank you so much.

[benmccann]

A note from @Conduitry about the cause:

Right now trying to use the Svelte compiler at runtime in a SK app fails in prod builds because css-tree contains code that Rollup/Vite doesn't know what to do with. It has a createRequire followed by a require of some JSON file, and this gets passed through unchanged. This would presumably still be an issue in Svelte 5 if we continue to use css-tree and distribute the compiler unbundled.

It's possible that we would end up switching away from css-tree in Svelte 5, which would solve this, but it's unclear if that's something that we would do or not

[theetherGit]

A note from @Conduitry about the cause:

Right now trying to use the Svelte compiler at runtime in a SK app fails in prod builds because css-tree contains code that Rollup/Vite doesn't know what to do with. It has a createRequire followed by a require of some JSON file, and this gets passed through unchanged. This would presumably still be an issue in Svelte 5 if we continue to use css-tree and distribute the compiler unbundled.

It's possible that we would end up switching away from css-tree in Svelte 5, which would solve this, but it's unclear if that's something that we would do or not

Ok, Let's see where it goes in v5.
should i close this issue?

[jnschrag]

Hi there! I read through this thread & #10799 but I'm still getting this error. I'm guessing that I implemented something in the solution incorrectly? If possible, would love to get some help debugging this.

• I'm using npm NOT pnpm
• I'm not referencing svelte/compile anywhere directly

My vite.config.js:

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { createRequire } from 'module';

const require = createRequire(import.meta.url);

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [
		sveltekit(),
		{
			resolveId(id) {
				// Must import from the `css-tree` browser bundled distribution due to `createRequire` usage if importing from css-tree directly
				if (id === 'css-tree') {
					return require.resolve('./node_modules/css-tree/dist/csstree.esm.js');
				}
			}
		}
	],
	preview: {
		port: 5173
	}
};

export default config;

Dependencies from package.json:

	"devDependencies": {
		"@playwright/test": "^1.39.0",
		"@sveltejs/adapter-auto": "^2.1.1",
		"@sveltejs/adapter-netlify": "^2.0.8",
		"@sveltejs/kit": "^1.20.4",
		"css-tree": "^2.3.1",
		"dotenv": "^16.0.1",
		"esbuild-plugin-manifest": "^1.0.0",
		"esbuild-sass-plugin": "^2.16.0",
		"eslint": "^8.16.0",
		"eslint-config-prettier": "^9.0.0",
		"eslint-plugin-svelte": "^2.34.1",
		"husky": "^8.0.1",
		"lint-staged": "^15.0.2",
		"postcss": "^8.4.14",
		"postcss-html": "^1.4.1",
		"prettier": "^3.0.3",
		"prettier-plugin-svelte": "^3.0.3",
		"sass": "^1.52.3",
		"stylelint": "^15.11.0",
		"stylelint-config-recess-order": "^4.3.0",
		"stylelint-config-recommended-scss": "^13.1.0",
		"stylelint-config-standard": "^34.0.0",
		"stylelint-order": "^6.0.3",
		"stylelint-scss": "^5.3.1",
		"svelte": "^4.0.0",
		"svelte-preprocess": "^5.0.3",
		"vite": "^4.5.0"
	},
	"dependencies": {
		"@aws-sdk/client-s3": "^3.137.0",
		"@aws-sdk/client-ses": "^3.290.0",
		"@googleapis/sheets": "^5.0.5",
		"a11y-dialog": "^8.0.4",
		"cookie": "^0.6.0",
		"cookie-signature": "^1.2.0",
		"d3-color": "^3.1.0",
		"d3-delaunay": "^6.0.2",
		"d3-dsv": "^3.0.1",
		"d3-force": "^3.0.0",
		"d3-shape": "^3.1.0",
		"dayjs": "^1.11.5",
		"esbuild": "^0.19.5",
		"esbuild-svelte": "^0.8.0",
		"fs-extra": "^11.1.0",
		"geometric": "^2.4.0",
		"journalize": "^2.5.1",
		"jsonwebtoken": "^9.0.0",
		"layercake": "^8.0.2",
		"mime-types": "^2.1.35",
		"openai": "^4.3.0",
		"svelte-kit-cookie-session": "^4.0.0",
		"svelte-select": "^5.7.0",
		"tippy.js": "^6.3.7"
	}

[paulocoghi]

I'm using Rollup to bundle our code, which uses svelte/compiler, importing it with:

import { compile } from 'svelte/compiler';

Before bundling, everything works fine. But after it, we get the same error informed by OP:

Error: Cannot find module '../data/patch.json'

The error happens both when using npm or pnpm. I even reinstalled everything from scratch with npm only, but the error persists.

Do someone knows how to apply the suggested fix in the conext of Rollup config?

[theetherGit]

I'm using Rollup to bundle our code, which uses svelte/compiler, importing it with:

import { compile } from 'svelte/compiler';

Before bundling, everything works fine. But after it, we get the same error informed by OP:

Error: Cannot find module '../data/patch.json'

The error happens both when using npm or pnpm. I even reinstalled everything from scratch with npm only, but the error persists.

Do someone knows how to apply the suggested fix in the conext of Rollup config?

Add this to your vite.config file

import { createRequire } from 'node:module';

export function vitePluginSvelteH2J() {
    const require = createRequire(import.meta.url);
    return {
        name: 'css-tree-resolver', // name of the plugin
        resolveId(id: string) {
            if (id === 'css-tree') {
                return require.resolve('./node_modules/css-tree/dist/csstree.esm.js');
            }
        }
    }
}

the add it to your plugins like

export default defineConfig({
	plugins: [sveltekit(), vitePluginSvelteH2J(), wasm()]
});

Name things on your own accords

[paulocoghi]

@theetherGit thank you for the suggestion! I'm using Rollup instead of Vite, and I'm now trying to understand how I can correctly "translate" this fix in a function that would be valid inside Rollup's plugin context (without success so far).

[paulocoghi]

I found a solution for anyone using Rollup.

1. Install css-tree and @rollup/plugin-virtual on your dependencies (or devDependencies, if you will)

2. On your configuration file for Rollup, add css-tree as a virtual package before every other plugin:

import virtual          from '@rollup/plugin-virtual';
// ...
import { readFileSync } from 'fs';

export default {
	input: 'your_input_here.js',

	output: {
		file: 'your_output_here.js'
		// ...
		// ...
	},

	plugins: [
		virtual({ 'css-tree': readFileSync('./node_modules/css-tree/dist/csstree.esm.js', 'utf8') }),
		// ...
	]
};