Chrome Extension: Content script error "Cannot use import statement outside a module" - React.js / Vite

Question

React.js + Vite

I am trying to build a widget and I have this error:

Cannot use import statement outside a module

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 />);

Unfortunately none of the solutions in this thread worked.

How to import ES6 modules in content script for Chrome Extension

Answer 1

You will need to go to your package.json file and add

{
  "type": "module"
}

This will make your project treat the files as ES modules, allowing you to use "import"