devtools page not working properly

[flycran]

-cn-
-Google Translate-

我按照文档的描述添加devtools页面，并添加main.tsx在devtools下，到此为止还算正常，但我导入了来自其他包的未编译的组件。这个组件来自monorepo的其他工作区的未编译的组件，因为我需要它保持最新和支持HMR，所以我没有提前编译它。

I added the devtools page as described in the documentation and added main.tsx under devtools, so far so good, but I imported uncompiled components from other packages. This component comes as an uncompiled component from another workspace in monorepo, and since I need it to stay up to date and support HMR, I don't compile it ahead of time.

Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See vitejs/vite-plugin-react#11 (comment)
at Com.tsx:8:11
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' http://localhost:12002". Either the 'unsafe-inline' keyword, a hash ('sha256-8ZgGo/nOlaDknQkDUYiedLuFRSGJwIz6LAzsOrNxhmU='), or a nonce ('nonce-...') is required to enable inline execution.

main/tsx

import { Com } from 'pack-name/Com.tsx'
import React from 'react'
import ReactDOM from 'react-dom/client'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Com/>
  </React.StrictMode>,
)

Com.tsx

export const Com = () => {
  return (
    <div>aaa</div>
  )
}

"@samrum/vite-plugin-web-extension": "^5.1.0",
"@types/chrome": "^0.0.254",
"@types/webextension-polyfill": "^0.10.7",
"web-ext": "^7.11.0"

"typescript": "^5.4.5",
"vite": "^5.2.11"
"@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.2.1",
"@vitejs/plugin-react-swc": "^3.6.0",

"react": "^18.3.1",
"react-dom": "^18.3.1"

vite.config

import webExtension from '@samrum/vite-plugin-web-extension'
import react from '@vitejs/plugin-react'
import path from 'path'
import { defineConfig, loadEnv } from 'vite'
import { getManifest } from './src/manifest'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    plugins: [
      react(),
      webExtension({
        manifest: getManifest(Number(env.MANIFEST_VERSION)),
      }),
    ],
    server: {
      port: 12002,
    },
    optimizeDeps: {
      exclude: ['pack-name']
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
    },
  }
})