So I have this project with React 19 and typescript and am using Webpack to compile my code. I have successfully added react to pop-up, but I have problems when I compile my content script (overview.tsx) to inject some elements into the page.

Note: when I remove react code from the script and put some console.log I see that in the console, if I put console log after react import I don't see it,

I'm using ts-loader for tsx files, I even tried babel-loader with but it's the same. Also when I run build I get IIFE around my module

Note 2: I tried chrome.scripting.executeScript and it's returning positive but nothing happened, i also added permission to manifest for scripting and tabs

Changed loaders for my ts/tsx fiels -> same result

added all permission -> same result

tried to inject from background script -> same result

Edit: I have fixed this, in my webpack.config i had section for optimization and inside i had object

splitChunks: {chunks: "all"} and i changed it to:

splitChunks: {
 chunks(chunk) {
     // exclude react content script from split chunks
     return !["overview"].includes(chunk.name);
 }, ...