Cannot use import statement outside a module

[LeloouchVB]

Hi. I'm trying to inject React component on click on extension, via background.ts. Maybe I didn't understand the concept of how to do it or is it different here?

//src/pages/background/index.ts

chrome.action.onClicked.addListener(function (tab) {
  chrome.scripting.executeScript({
    target: { tabId: tab.id as number },
    files: ['src/pages/content/index.js'],
  });
});

//src/pages/content/index.tsx
import { createRoot } from 'react-dom/client';
import styles from './style.css?inline';

const div = document.createElement('div');
div.id = '__root';

document.body.appendChild(div);

const rootContainer = document.querySelector('#__root');
if (!rootContainer) throw new Error("Can't find Options root element");

const shadowRootContainer = rootContainer.attachShadow({ mode: 'open' });
const styleElement = document.createElement('style');
styleElement.innerHTML = styles;
shadowRootContainer.appendChild(styleElement);

const root = createRoot(shadowRootContainer);
root.render(
  <button type="button" className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
    <span className="sr-only">Test tailwind btn</span>
  </button>
);

try {
  console.log('content script loaded');
} catch (e) {
  console.error(e);
}

//vite.config.ts
...
 build: {
    outDir,
    sourcemap: isDev,
    emptyOutDir: !isDev,
    rollupOptions: {
      input: {
        content: resolve(pagesDir, 'content', 'index.tsx'),
      },
      output: {
        entryFileNames: 'src/pages/[name]/index.js',
      },
    },
  },
...