Error while preprocessing

[HVossi92]

Heyo, I am trying to use Svar inside of my SvelteKit project. I went back to a Svelte 4 state (did a clean install of all node dependencies), since Svelte 5 doesn't seem to be supported, yet.

However, I am getting the following errors crashing my app:

✘ [ERROR] Error while preprocessing /repos/fullstack/node_modules/wx-svelte-core/src/themes/Material.svelte - Cannot read properties of undefined (reading 'raw') [plugin vite-plugin-svelte:optimize-svelte]

    node_modules/wx-svelte-core/src/index.js:40:36:
      40 │ export { default as Material } from "./themes/Material.svelte";
         ╵                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Error while preprocessing /repos/fullstack/node_modules/wx-svelte-core/src/themes/WillowDark.svelte - Cannot read properties of undefined (reading 'raw') [plugin vite-plugin-svelte:optimize-svelte]

    node_modules/wx-svelte-core/src/index.js:42:38:
      42 │ export { default as WillowDark } from "./themes/WillowDark.svelte";
         ╵                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Error while preprocessing /repos/fullstack/node_modules/wx-svelte-core/src/themes/Willow.svelte - Cannot read properties of undefined (reading 'raw') [plugin vite-plugin-svelte:optimize-svelte]

    node_modules/wx-svelte-core/src/index.js:41:34:
      41 │ export { default as Willow } from "./themes/Willow.svelte";
         ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~

I've followed this installation guide: https://docs.svar.dev/svelte/gantt/guides/installation_initialization

[mkozhukh]

It looks very similar to the case when Svelte 5.x component and Svelte 4.x runtime are used in the same time.

Try to specify exact version for the package

• [email protected] - for Svelte 3.x / 4.x
• [email protected] - for Svelte 5.x

[HVossi92]

It looks very similar to the case when Svelte 5.x component and Svelte 4.x runtime are used in the same time.

Try to specify exact version for the package

• [email protected] - for Svelte 3.x / 4.x
• [email protected] - for Svelte 5.x

Thanks for your reply mkozhukh,
I've tried using the '[email protected]' dependencies on my Svelte 5 branch (again removing all node modules to make sure I don't have any old dependencies), but I am still getting the same error.

`<script>
import { Gantt } from "wx-svelte-gantt";
</script>

`

For once Cannot find module 'wx-svelte-gantt' or its corresponding type declarations.js(2307)

and still

`✘ [ERROR] Error while preprocessing /repos/fullstack/node_modules/wx-svelte-core/src/themes/Willow.svelte - Cannot read properties of undefined (reading 'raw') [plugin vite-plugin-svelte:optimize-svelte]

node_modules/wx-svelte-core/src/index.js:41:34:
  41 │ export { default as Willow } from "./themes/Willow.svelte";
     ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Error while preprocessing /repos/fullstack/node_modules/wx-svelte-core/src/themes/WillowDark.svelte - Cannot read properties of undefined (reading 'raw') [plugin vite-plugin-svelte:optimize-svelte]

node_modules/wx-svelte-core/src/index.js:42:38:
  42 │ export { default as WillowDark } from "./themes/WillowDark.svelte";
     ╵                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Error while preprocessing /repos/fullstack/node_modules/wx-svelte-core/src/themes/Material.svelte - Cannot read properties of undefined (reading 'raw') [plugin vite-plugin-svelte:optimize-svelte]

node_modules/wx-svelte-core/src/index.js:40:36:
  40 │ export { default as Material } from "./themes/Material.svelte";
     ╵                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~

4:13:58 PM [vite] error while updating dependencies:
Error: Build failed with 3 errors:
node_modules/wx-svelte-core/src/index.js:40:36: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] Error while preprocessing /repos/fullstack/node_modules/wx-svelte-core/src/themes/Material.svelte - Cannot read properties of undefined (reading 'raw')
node_modules/wx-svelte-core/src/index.js:41:34: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] Error while preprocessing /repos/fullstack/node_modules/wx-svelte-core/src/themes/Willow.svelte - Cannot read properties of undefined (reading 'raw')
node_modules/wx-svelte-core/src/index.js:42:38: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] Error while preprocessing /repos/fullstack/node_modules/wx-svelte-core/src/themes/WillowDark.svelte - Cannot read properties of undefined (reading 'raw')
at failureErrorWithLog (/repos/fullstack/node_modules/vite/node_modules/esbuild/lib/main.js:1472:15)
at /repos/fullstack/node_modules/vite/node_modules/esbuild/lib/main.js:945:25
at /repos/fullstack/node_modules/vite/node_modules/esbuild/lib/main.js:1353:9
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)`

[mkozhukh]

ok, just run some checks and fixed few errors related to svelte kit

it works for me in the next combination of dependencies ( default svelte kit starter project )

	"devDependencies": {
		"@sveltejs/adapter-auto": "^3.0.0",
		"@sveltejs/kit": "^2.0.0",
		"@sveltejs/vite-plugin-svelte": "^4.0.0",
		"@types/eslint": "^9.6.0",
		"eslint": "^9.7.0",
		"eslint-config-prettier": "^9.1.0",
		"eslint-plugin-svelte": "^2.36.0",
		"globals": "^15.0.0",
		"prettier": "^3.3.2",
		"prettier-plugin-svelte": "^3.2.6",
		"svelte": "5.1.9",
		"vite": "^5.0.3"
	},
	"dependencies": {
		"wx-svelte-filemanager": "^2.0.0-beta-3",
		"wx-svelte-gantt": "^2.0.0-beta-3",
		"wx-svelte-grid": "^2.0.0-beta-3"
	}

which version of svelte/svelte-kit is used in your case ?

[HVossi92]

Thanks for that quick update, I very much appreciate it.

I am still getting the same errors, though. The only major difference is that I am using adapter-node. I am gonna setup a clean project tomorrow and see if I can get it to work there, and then narrow down the problem by re-adding components and dependencies.

[HVossi92]

I've setup a fresh SvelteKit project, which works perfectly fine with the Gantt, and then started adding dependencies.
The issue originates from 'svelte-preprocess-import-assets', removing that from my svelte config fixes the issue on the Gantt side.
That library allows for easier asset imports into markup, I guess it interferes with imports inside of the library.

The only thing I still don't understand, is why I am getting all the import errors? (even when everything works)