Correct way of using app.config.ts?

[devjume]

Hi,

I am wondering what is correct way of using app.config.ts in wxt?
I am encountering error when using it in svelte component, but there is no error when using it in background.ts.

Problem:

// test.svelte - Doesn't work
<script lang="ts">
  import { useAppConfig } from 'wxt/client';
  console.log(useAppConfig());
</script>

Previous svelte component causes error:

Could not resolve "virtual:app-config"
node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/wxt/dist/client.js:414:22:
414 │ import appConfig from "virtual:app-config";
 You can mark the path "virtual:app-config" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

When I use it in background.ts it works just as stated in documentation.

// background.ts - Works
import { useAppConfig } from 'wxt/client';
console.log(useAppConfig());

Of course I can import defineAppConfig object in svelte as follows, which works. But is that correct way?

<script lang="ts">
  import appConfig from '@/app.config';
  console.log("appConfig", appConfig);
</script>

I am not familiar how app.config.ts is used in Nuxt. And Wxt docs didn't give any specific notes how to use it. Other than console.log(useAppConfig());.
wxt version: 0.18.14

[aklinker1]

I noticed this as well the other day while working on the analytics module. In dev mode, files served over the dev server can't seem to resolve the app.config.ts file correctly... I'll convert this to a issue and work on it soon!

[devjume]

Okay that is great!

I will mark this as answer.
Here is the issue for any future discussions and reference: #830

[aklinker1]

Fix released in v0.18.15!