Load `wxt.config.ts` as ESM

[aklinker1]

Describe the bug

Currently, WXT uses c12 (and c12 uses jiti internally) to load the wxt.config.ts file, but it is loaded as CJS.

This causes Vite 5's CJS warning to show up when importing a Vite plugin, like Vue. At the bottom of the stacktrace, you can see the warning is triggered by @vitejs/plugin-vue in this case. Same with all other vite plugins that import vite.

Trace: The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
    at warnCjsUsage (/home/runner/work/wxt/wxt/templates/vue/node_modules/vite/index.cjs:32:3)
    at Object.<anonymous> (/home/runner/work/wxt/wxt/templates/vue/node_modules/vite/index.cjs:3:1)
    at Module._compile (node:internal/modules/cjs/loader:1356:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
    at Module.load (node:internal/modules/cjs/loader:1197:32)
    at Module._load (node:internal/modules/cjs/loader:1013:12)
    at Module.require (node:internal/modules/cjs/loader:1225:19)
    at require (node:internal/modules/helpers:177:18)
    at Object.<anonymous> (/home/runner/work/wxt/wxt/templates/vue/node_modules/@vitejs/plugin-vue/dist/index.cjs:6:14)
    at Module._compile (node:internal/modules/cjs/loader:1356:14)

To Reproduce

repro.zip

pnpx [email protected] init . --template vue
pnpm i
pnpm build

[!Note] Using v0.12.3 because the warning is silenced in later versions.

The warning is present in the prepare, build, and dev commands.

Expected behavior

The wxt.config.ts file should be imported as ESM, and these warnings should go away.

Environment

  System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 1.19 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.1 - ~/.asdf/installs/nodejs/18.16.1/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/18.16.1/bin/yarn
    npm: 9.5.1 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 8.9.0 - ~/.asdf/installs/nodejs/18.16.1/bin/pnpm
  Browsers:
    Chrome: 120.0.6099.129
    Safari: 16.5.2
  npmPackages:
    wxt: ^0.12.0 => 0.12.3

Additional context

• https://github.com/wxt-dev/wxt/issues/277#issuecomment-1852782216
• https://github.com/wxt-dev/wxt/issues/277#issuecomment-1859238126

Related issues to test once fixed

• [x] https://github.com/wxt-dev/wxt/issues/934

[aklinker1]

Looks like this should be possible to do with c12 already... https://github.com/unjs/unbuild/issues/94

[justin13888]

I get the same error when using the vitest example in wxt repo. Are there any plans to update?

[aklinker1]

Yes, 0.19 introduced vite-node for loading TS entrypoints. We can also use vite-node to import config files, which supports ESM. Will probably switch to it soon.

[1natsu172]

From #931 : So, the default value of jiti of c12 seems to be esmResolve: true, is this a bug in jiti.esmResolve itself…right? (Sorry if I made any dumb mistakes.) https://github.com/unjs/c12/blob/9820c7d7c8cf03bee0f98f83f26de8e7d72164f9/src/loader.ts#L79

I tried using jiti directly…

import jiti from "jiti";
import { nodePolyfills } from "vite-plugin-node-polyfills";

console.log(
  jiti(undefined, { debug: true, esmResolve: true }).resolve(
    "vite-plugin-node-polyfills",
    { paths: [process.cwd()] }
  )
);

[1natsu172]

Um...they seem to be intentional, but from our user's side it's a bug as an option name. https://github.com/unjs/jiti/pull/52

It is implemented that the require field takes priority. https://github.com/unjs/jiti/blob/c091661aff55784bbe694cb65652637c3a9f9988/src/jiti.ts#L173-L174

This is about v1, and in v2 (now beta) esmResolve seems to be separated. In short, what they mean by jiti.resolve is require.resolve.

---

Edit: Looking at [email protected] it seems they intend to implement with true-esmResolve. https://github.com/unjs/c12/blob/3628bd76f2cf6496aef18c262398c2735f213f9b/src/loader.ts#L345

[minht11]

I am using ParaglideJS i18n plugin and it uses data:application/javascript to dynamically import modules from CDN, photo from their source code. Using it with wxt fails. Error: Cannot find module 'data:application/javascript

I assume migration to ESM would fix it?

https://github.com/opral/monorepo/blob/5255050160dde6494a0befb35e5cfa5577ddfe0d/inlang/source-code/sdk/src/resolve-modules/import.ts#L36-L43

[aklinker1]

@minht11 are you using their vite plugin?

https://github.com/opral/monorepo/tree/main/inlang/source-code/paraglide/paraglide-vite

I've never heard of paraglide before, so I don't have any idea what setup looks like. If you can share more details around how you're using it, that would be helpful

[minht11]

I am using their vite plugin. I searched some more and found it is jiti issue https://github.com/opral/monorepo/issues/2133. Anyway there is nothing todo on your end. For now I will just use Paraglide CLI.

[aklinker1]

Jiti v2 is out with native ESM support - https://github.com/unjs/jiti/releases/tag/v2.0.0

Waiting on c12 v2 now, currently in beta: https://github.com/unjs/c12/releases/tag/v2.0.0-beta.3

[1natsu172]

c12 also was out the v2 https://github.com/unjs/c12/releases/tag/v2.0.0