您如何通过内容脚本在页面即谷歌上使用 vue-cli-plugin-browser-extension 渲染组件？

如何解决您如何通过内容脚本在页面即谷歌上使用 vue-cli-plugin-browser-extension 渲染组件？

我正在尝试通过内容脚本向网页添加弹出窗口。我使用 vue-cli-plugin-browser-extension 插件构建了 chrome 扩展，并且我使用 React 来呈现应该注入页面的组件。当我在页面上测试时，错误似乎在 ReactDom 渲染函数内部。

content-script.js:6 Uncaught TypeError: h is not a function

h 在它构建后使用：

f.a.render(h(d),document.getElementById("movie_player").appendChild(p))}

这是我的 React 组件：

import React,{useEffect,useState} from 'react';
import ReactDOM from "react-dom";

const GlottisRecorder = () => {

  return (
    <div style={{color: "white"}} id = "glottis_content">
      hello world
    </div>
  );
}

const glottis_popup = document.createElement('div');
glottis_popup.setAttribute("style","margin: 13px 0px;");
glottis_popup.id = "glottis_container";

ReactDOM.render(
  <GlottisRecorder/>,document.getElementById("movie_player").appendChild(glottis_popup)
);

我已经在 vue.config.js 文件的条目中包含了这个文件：

module.exports = {
  pages: {
    popup: {
      template: 'public/browser-extension.html',entry: './src/popup/main.js',title: 'Popup'
    }
  },pluginoptions: {
    browserExtension: {
      componentOptions: {
        background: {
          entry: 'src/background.js'
        },contentScripts: {
          entries: {
            'content-script': [
              'src/content-scripts/GlottisRecorder.js'
            ]
          }
        }
      }
    }
  },css: {
    modules: true
  }
}

我使用 React 创建了其他 chrome 扩展，所以我认为它可能是构建配置。