"npm run dev" works but not "npm run build"Can't build the extension for production

[esphoenixc]

Build tool

Vite

Where do you see the problem?

• [X] In the browser
• [ ] In the terminal

Describe the bug

running npm run dev works fine. I see my content script working as intended.

However, running npm run build for production. The error is being thrown in content script.

I strongly believe this error is coming from contents script as it was the page's devtool. Also, poopup and background.js were working fine.

The build is successful. "npm run build" does not throw any errors. However, content script is throwing the error above which prevents me from using content script to load the vue instance onto the page's DOM.

Reproduction

Logs

TypeError: Cannot read properties of null (reading 'define')
    at _plugin-vue_export-helper.2706d53b.js:5:70
    at _plugin-vue_export-helper.2706d53b.js:5:85
    at __decorate (_plugin-vue_export-helper.2706d53b.js:1:74673)
    at _plugin-vue_export-helper.2706d53b.js:267:4095

System Info

TypeError: Cannot read properties of null (reading 'define')
    at _plugin-vue_export-helper.2706d53b.js:5:70
    at _plugin-vue_export-helper.2706d53b.js:5:85
    at __decorate (_plugin-vue_export-helper.2706d53b.js:1:74673)
    at _plugin-vue_export-helper.2706d53b.js:267:4095

Severity

annoyance

[jacksteamdev]

There's no minimal reproduction, so I can't be sure, but my guess is that this is due to custom elements not being implemented in content scripts.

The Vite error overlay uses custom elements, so CRXJS includes a polyfill in the dev build. You'll need to add a custom elements polyfill for the production build:

// do this in your main content script file
import '@webcomponents/custom-elements'

This should be documented, PRs are welcome 🌟