[vite] warning: Could not resolve import "#runtime/svelte/component/core"

I haven't seen this error before. WelcomeAppShell.svelte

  import { ApplicationShell }   from '#runtime/svelte/component/core';

  import { ApplicationShell }   from '#runtime/svelte/component/core';

Foundry v12, developing a new system. Any clues?

12 Replies

Bolts•6mo ago

Isn't it supposed to be TJSApplicationShell?

geoidesicOP•6mo ago

Is it? I don't know tbh. Weird thing is this same code is working in my Actor Studio module but it doesn't want to work in my new system.

Bolts•6mo ago

This is what i have. Ignore squiggly, it's because there's no .d.ts for that file.

geoidesicOP•6mo ago

Looking at the module, both exist, so I think it's more fundamental than that.

geoidesicOP•6mo ago

I tried TJSApplicationShell and the error shifted to [vite] warning: Could not resolve import "#runtime/svelte/helper" , then I set it back to ApplicationShell and the new error stays on. And now it's shifted back to #runtime/svelte/component/core – I have no idea what's going on 😦 Could it be a node version thing? I was on 18 but I just deleted node_modules and yarn.lock, switched to node 20 and got the same error.

Bolts•6mo ago

I run on node 20 Do you have the imports set up in package.json?

geoidesicOP•6mo ago

Yeah, I literally copied them from my last published (and working) module:

"dependencies": {
    "@typhonjs-fvtt/runtime": "^0.1.0",
    "@typhonjs-fvtt/svelte-standard": "^0.1.0",
    "lodash": "^4.17.21",
    "set-manipulator": "^0.3.1",
    "svelte": "^4.0.5",
    "svelte-multiselect": "^10.0.0",
    "tippy.js": "^6.3.7",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@league-of-foundry-developers/foundry-vtt-types": "^9.280.0",
    "@typhonjs-config/eslint-config": "^0.6.3",
    "@typhonjs-fvtt/eslint-config-foundry.js": "^0.8.0",
    "eslint": "^8.44.0",
    "eslint-config-google": "^0.14.0",
    "prettier": "^3.0.0",
    "pug": "^3.0.2",
    "svelte-preprocess": "^5.0.4",
    "typescript": "^5.2.2",
    "vite": "^4.4.3",
    "vitest": "^0.34.3",
    "vitest-fetch-mock": "^0.2.2"
  },

"dependencies": {
    "@typhonjs-fvtt/runtime": "^0.1.0",
    "@typhonjs-fvtt/svelte-standard": "^0.1.0",
    "lodash": "^4.17.21",
    "set-manipulator": "^0.3.1",
    "svelte": "^4.0.5",
    "svelte-multiselect": "^10.0.0",
    "tippy.js": "^6.3.7",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@league-of-foundry-developers/foundry-vtt-types": "^9.280.0",
    "@typhonjs-config/eslint-config": "^0.6.3",
    "@typhonjs-fvtt/eslint-config-foundry.js": "^0.8.0",
    "eslint": "^8.44.0",
    "eslint-config-google": "^0.14.0",
    "prettier": "^3.0.0",
    "pug": "^3.0.2",
    "svelte-preprocess": "^5.0.4",
    "typescript": "^5.2.2",
    "vite": "^4.4.3",
    "vitest": "^0.34.3",
    "vitest-fetch-mock": "^0.2.2"
  },

Bolts•6mo ago

I meant this, but yeah probably not an issue if you copied the package.json

geoidesicOP•6mo ago

I don't have that no. That seems to have worked. I didn't know about that as a requirement and, weirdly, my Actor Studio module is happily functioning without that 😅

Bolts•6mo ago

Are you maybe using the full import in the other one?

geoidesicOP•6mo ago

oh wait... I tell a lie... it is in Actor Studio. Somehow I lost that when copying across. Thank you @Bolts – i don't think I would have spotted that!

TyphonJS (Michael)•6mo ago

Thanks @Bolts for providing the imports insight in regard to package.json. From an end developer use case remapping packages in this way is a handy way to shorten the imports and also provides concise API docs. About an unrelated comment regarding TJSApplicationShell; this component is useful when you want to guarantee the stock look and feel of an app regardless of the game system theme / styles. Some game systems have pretty aggressive style overrides like Warhammer / wfrp4e where the system theme will clash at times with the intended app UI / UX. TJSApplicationShell ensures that the core theme is applied regardless of the game system theme or an alternate theming module. ApplicationShell will adopt the system / theme module changes.
So in the case where one wants to explicitly control the styles of an app via the stock core theme use TJSApplicationShell over ApplicationShell.

Gaming

Programming

[vite] warning: Could not resolve import "#runtime/svelte/component/core"