[antd, mantine] Content script ui compiled error when using UI components

[hussion]

Describe the bug

As long as in the content script ui (Such as： entrypoints/example-ui.content/App.tsx), reference to the component of the three-party component library antd, the compilation error will be reported, in the configuration of vite, sourcemap off still failed to compile; This is normal in popup or other newtab pages

Errors are as follows：

Reproduction

wxx-react.zip

Steps to reproduce

Run pnpm dev

System Info

System:
    OS: macOS 13.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 120.82 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v18.20.2/bin/npm
    pnpm: 9.1.4 - ~/.nvm/versions/node/v18.20.2/bin/pnpm
  Browsers:
    Chrome: 125.0.6422.142
    Safari: 16.5
  npmPackages:
    wxt: ^0.18.4 => 0.18.4

Used Package Manager

pnpm

Validations

• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[hussion]

@aklinker1 Do you have time to take a look?

[aklinker1]

Sorry, no idea what is going on. Reproduction is good. There aren't sourcemaps provided by antd, so I'm not sure why Vite is attempting to load them, nor what the original error is.

If someone else wants to debug this, feel free. I don't have time right now.

[aklinker1]

Also seeing this with mantine, see the new react-mantine example. Seems related to something in the react ecosystem... Not seeing anything like this with other frameworks.

[hussion]

Also seeing this with mantine, see the new react-mantine example. Seems related to something in the react ecosystem... Not seeing anything like this with other frameworks.

yeah, The issue at hand is causing significant frustration, to the extent that I had to switch the component library. Even when attempting to block error information in the configuration file, it seems like it may impact compilation speed. It is my hope that someone can provide a solution for this matter.

[aklinker1]

Discovered something maybe relevant here today? If you add a package to vite's ssr.noExternal array, it can cause similar logs. Not an exact match, but wanted to share here:

// wxt.config.ts
  vite: () => ({
    plugins: [Icons({ compiler: "vue3" }), Vue()],
+   ssr: {
+     noExternal: [/.*/],
+   },
  }),

✔ Started dev server @ http://localhost:3000                                                        5:33:48 PM
ℹ Pre-rendering chrome-mv3 for development with Vite 5.3.1                                          5:33:48 PM
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/htmlparser2/lib/esm/index.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/css-select/lib/esm/index.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/htmlparser2/lib/esm/Parser.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/domutils/lib/esm/index.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/htmlparser2/lib/esm/Tokenizer.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/css-select/lib/esm/pseudo-selectors/index.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/css-select/lib/esm/pseudo-selectors/subselects.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/css-select/lib/esm/compile.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/entities/lib/esm/decode.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/domutils/lib/esm/querying.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/domutils/lib/esm/stringify.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/domutils/lib/esm/legacy.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/domutils/lib/esm/manipulation.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/domutils/lib/esm/traversal.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/domutils/lib/esm/helpers.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/domutils/lib/esm/feeds.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/css-select/lib/esm/pseudo-selectors/filters.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/css-select/lib/esm/pseudo-selectors/aliases.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/css-select/lib/esm/pseudo-selectors/pseudos.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/css-select/lib/esm/sort.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/entities/lib/esm/generated/decode-data-xml.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/css-select/lib/esm/general.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/entities/lib/esm/decode_codepoint.js" points to missing source files
Sourcemap for "/Users/aklinker1/Development/github.com/aklinker1/github-better-line-counts/node_modules/.pnpm/[email protected]/node_modules/entities/lib/esm/generated/decode-data-html.js" points to missing source files
...

There was about 4x as many logs as I've shown above, truncated it for clarity.

[hussion]

@aklinker1 may be the same issue : vite issue, You see if it helps.

[1natsu172]

@hussion

I also encountered this issue before. The conclusion is that it's a problem with Vite (Rollup), not WXT. The issue arises because the presence of directives (like use client;) in React components isn't accounted for, causing the generated sourcemap lines to be misaligned.

While many people in the thread ignore the warning, I found that broken sourcemaps cause issues, so I've been using the https://github.com/huozhi/rollup-preserve-directives solution from that answer as a workaround.

However, using this plugin can significantly increase build times and degrade performance. 🙃

[1natsu172]

The vite team seems to have decided to ignore the warning https://github.com/vitejs/vite-plugin-react/pull/369. Next release of vite-plugin-react will have no warnings.

[aklinker1]

Gonna close this then! Thanks for finding that @1natsu172