Load `wxt.config.ts` as ESM

aklinker1 commented 10 months ago

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 wxt@0.12.3 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

Related issues to test once fixed

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

aklinker1 commented 7 months ago

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

justin13888 commented 2 months ago

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

aklinker1 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 c12@v2-beta.1 it seems they intend to implement with true-esmResolve. https://github.com/unjs/c12/blob/3628bd76f2cf6496aef18c262398c2735f213f9b/src/loader.ts#L345

minht11 commented 2 months ago

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 commented 2 months ago

@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 commented 2 months ago

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 commented 1 month ago

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 commented 3 weeks ago

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

wxt-dev / wxt