Generate one single file for each entry with Vite

[dawn coral]

Hey everyone.

Wondering if anyone here can help-me:
My goal is create chrome extension that render div using React into Google Results.

So The idea is use Content Script to render a react component into specific area in the google results
https://developer.chrome.com/docs/extensions/mv3/content_scripts/

My first try was having content_script entrypoint in the inputs

content_script: path.resolve(pagesDirectory, 'content_script', 'content-script.tsx')
notice the .tsx extension.
And in content-script.tsx I render the react component..

const root = createRoot(rootElement, {});
root.render(
    <React.StrictMode>
      <Badge query={query} />
    </React.StrictMode>
  );

But once I test this.. get the following error:

Uncaught SyntaxError: Cannot use import statement outside a module
In fact if I check the generated file:

import{j as n,c,r as a}from"../../../assets/js/jsx-dev-runtime.06a93b5e.js";
// ...

So maybe I can generate one file content-script.js that contains all necessary files to render the react, including the jsx-dev-runtime

Do you guys have any Idea how can I do this?
Any other suggestions?

I posted this question on stackoverflow..
https://stackoverflow.com/questions/73896403/generate-one-single-file-for-each-entry-with-vite

#1019670660856942652 #discussions

[dawn coral]

Also I tried to put something like this in vite.config.js...

  build: {
    sourcemap: true,
    commonjsOptions: {
      transformMixedEsModules: true
    },
    rollupOptions: {
      manualChunks(id) {
        if (id.includes('content_script')) {
          return 'contentScript';
        }
      },
  }

But I'm getting this error...

Uncaught SyntaxError: Unexpected token 'export'
On this line..
export {$w as F, kw as R, Yw as a, vS as b, mS as c, Yc as j, Hu as r};

And I'm not exporting anything from content-script.tsx. file