Chrome 扩展：内容脚本错误“无法在模块外使用导入语句”-React.js

Question

我正在尝试构建一个小部件，但出现此错误：

不能在模块外使用 import 语句

ContentScript.tsx

import { createRoot } from 'react-dom/client';

const Hello = () => {
    return <div>HELLO EXTENSION!</div>;
};

const AppContainer = document.createElement('div');
document.body.appendChild(AppContainer);
const root = createRoot(AppContainer);
root.render(<Hello />);

Answer 1

您需要转到您的 package.json 文件并添加

{
  "type": "module"
}

这将使您的项目将文件视为 ES 模块，允许您使用“导入”