An exception is thrown when using createShadowRootUi, but it does not affect the functionality.

[ggymzz]

Describe the bug

https://wxt.dev/guide/resources/faq.html#my-component-library-doesn-t-work-in-content-scripts
`import { StyleProvider } from '@ant-design/cssinjs';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';

const ui = await createShadowRootUi(ctx, {
// ...
onMount: (container, shadow) => {
const cssContainer = shadow.querySelector('head')!;
const root = ReactDOM.createRoot(container);
root.render(


,
);
return root;
},
});`
[wxt] Failed to load styles @ chrome-extension://hjciipegaogklkbaphcleocmajmpnpjk/content-scripts/content.css. Did you forget to import the stylesheet in your entrypoint? TypeError: Failed to fetch
at loadCss (shadow-root.mjs:72:23)
at createShadowRootUi (shadow-root.mjs:22:26)
at main (index.tsx:13:5)

Reproduction

My component library doesn't work in content scripts
This is usually caused by one of two things (or both) when using createShadowRootUi:

Styles are added outside the ShadowRoot ...

Steps to reproduce

No response

System Info

examples/react-content-script-ui  win11 edge

Used Package Manager

pnpm

Validations

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

[oyzamil]

It's because createShadowRootUi looks for a content.css file, which isn't available.

Solution:

Create an empty content.css and import it into your content script.

import './content.css'; // ← Add this import at the top

Or use 'ui' mode to inline styles instead of fetching

cssInjectionMode: 'ui',

@aklinker1 I added an example extension using AntD + TailwindCSS, do check it. wxt-dev/examples#32

Note:

AntD works fine in the content script, but needs some adjustments.