Storing SvelteKit projects in iCloud Drive

[silllli]

Hello everyone,

it’s really hard to find anything regarding this problem, although I guess I’m not the only one having it. I’m working on a Mac and recently started using iCloud Drive to have a remote copy of my files, being able to sync between devices and so on. It’s tightly integrated with macOS and I’m more or less happy with its simplicity.

BUT: when having SvelteKit projects stored in a directory that is synced to iCloud Drive all error messages during development show incorrect paths. Instead of telling me which .svelte file is the source of the problem, I get the path to a .js chunk that’s not useful at all. As soon as I move the project out of the cloud the correct paths are back.

What’s interesting is that building the project works perfectly—so there is no real problem with having the project residing in the cloud. It’s only the error messages that get the path wrong. (macOS uses some unknown magic to give the impression that iCloud drive folders are regular folders in the Finder. As soon as you start accessing them programmatically you notice that that’s not true.)

I’m not sure where to start debugging this. Is it SvelteKit, Vite.js, Rollup.js or Node.js getting lost in the cloud?

The errors I’m seeing look something like this:

TypeError: Cannot read properties of undefined (reading 'src')
    at eval (eval at instantiateModule (file:///Users/sl/Library/Mobile%20Documents/com~apple~CloudDocs/2401_project/frontend/node_modules/vite/dist/node/chunks/dep-BaOMuo4I.js:52895:24), <anonymous>:43:27)
    at Object.$$render (eval at instantiateModule (file:///Users/sl/Library/Mobile%20Documents/com~apple~CloudDocs/2401_project/frontend/node_modules/vite/dist/node/chunks/dep-BaOMuo4I.js:52895:24), <anonymous>:153:16)
    at eval (eval at instantiateModule (file:///Users/sl/Library/Mobile%20Documents/com~apple~CloudDocs/2401_project/frontend/node_modules/vite/dist/node/chunks/dep-BaOMuo4I.js:52895:24), <anonymous>:68:129)
    at $$render (eval at instantiateModule (file:///Users/sl/Library/Mobile%20Documents/com~apple~CloudDocs/2401_project/frontend/node_modules/vite/dist/node/chunks/dep-BaOMuo4I.js:52895:24), <anonymous>:153:16)
    at Object.render (eval at instantiateModule (file:///Users/sl/Library/Mobile%20Documents/com~apple~CloudDocs/2401_project/frontend/node_modules/vite/dist/node/chunks/dep-BaOMuo4I.js:52895:24), <anonymous>:161:17)
    at Module.render_response (eval at instantiateModule (file:///Users/sl/Library/Mobile%20Documents/com~apple~CloudDocs/2401_project/frontend/node_modules/vite/dist/node/chunks/dep-BaOMuo4I.js:52895:24), <anonymous>:127:33)
    at async Module.render_page (eval at instantiateModule (file:///Users/sl/Library/Mobile%20Documents/com~apple~CloudDocs/2401_project/frontend/node_modules/vite/dist/node/chunks/dep-BaOMuo4I.js:52895:24), <anonymous>:296:10)
    at async resolve (eval at instantiateModule (file:///Users/sl/Library/Mobile%20Documents/com~apple~CloudDocs/2401_project/frontend/node_modules/vite/dist/node/chunks/dep-BaOMuo4I.js:52895:24), <anonymous>:460:18)
    at async Module.respond (eval at instantiateModule (file:///Users/sl/Library/Mobile%20Documents/com~apple~CloudDocs/2401_project/frontend/node_modules/vite/dist/node/chunks/dep-BaOMuo4I.js:52895:24), <anonymous>:333:20)
    at async file:///Users/sl/Library/Mobile%20Documents/com~apple~CloudDocs/2401_project/frontend/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:524:22

After moving it out of the cloud, the errors look like this:

TypeError: Cannot read properties of undefined (reading 'src')
    at /Users/sl/Offline/2401_project/frontend/src/routes/+layout.svelte:36:63
    at Object.$$render (/Users/sl/Offline/2401_project/frontend/node_modules/svelte/src/runtime/internal/ssr.js:134:16)
    at /Users/sl/Offline/2401_project/frontend/.svelte-kit/generated/root.svelte:46:40
    at $$render (/Users/sl/Offline/2401_project/frontend/node_modules/svelte/src/runtime/internal/ssr.js:134:16)
    at Object.render (/Users/sl/Offline/2401_project/frontend/node_modules/svelte/src/runtime/internal/ssr.js:142:17)
    at Module.render_response (/Users/sl/Offline/2401_project/frontend/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:171:29)
    at async Module.respond_with_error (/Users/sl/Offline/2401_project/frontend/node_modules/@sveltejs/kit/src/runtime/server/page/respond_with_error.js:85:10)
    at async Module.render_page (/Users/sl/Offline/2401_project/frontend/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:305:10)
    at async resolve (/Users/sl/Offline/2401_project/frontend/node_modules/@sveltejs/kit/src/runtime/server/respond.js:449:18)
    at async Module.respond (/Users/sl/Offline/2401_project/frontend/node_modules/@sveltejs/kit/src/runtime/server/respond.js:322:20)

Did anybody have the same problem and find a solution? All trouble regarding coding projects stored using iCloud Drive being discussed on the internet have to do with the ~ and whitespace characters being used in the path. But they don’t seem to be the problem here, since building the project works as expected.

[silllli]

So I just did some more tests. Apparently it is the whitespace character in the path causing the trouble (~ is no problem). When adding a space to one of the directory names in the path outside of iCloud Drive the same problem occurs.