Error loading css modules in vite 4.4.8+

[aleksolutions]

When I try to upgrade vite to a version higher than 4.4.7, after building the extension, the following messages appear in the console and cause the application to crash:

Error: Unable to preload CSS for /assets/index-1bdef0a0.css
    at HTMLLinkElement.<anonymous> (index-99ddc666.js:19:1496)

I'm using tailwind, but I have tried with a random css module and the same thing happens.

As usually, the extension works correctly in development mode.

[aleksolutions]

@samrum still with the same problem, do you still support this plugin?

[samrum]

Can you create a small repo that reproduces the issue?

[TheEZIC]

I faced with the same issue.

When I run vite build through npm command like npm run build I have this stuff in getCssAssetInfoFromBundle method: assetFileName: "public/toastr/toastr.min.css" Bundle object:

But when I run it via just vite build command in console: assetFileName: "public/toastr/toastr.min.css" I cant run debugger from console, so I just console logged all bundle names. Bundle object has value with this name: "public/toastr/toastr.min.css"

Seems like vite cleans extension somehow if you build through npm command.

[hamedbaatour]

Avoid using dynamic imports import('path/myscript.js') in your content script to import scripts, as this can lead to incorrect import paths in production environments. Instead, send a message to your service worker from the content script to execute additional JavaScript files:

1. send a message to your service worker from your content script instead to run any addtional js files:

   browser.scripting.executeScript({
     target: { tabId: sender.tab.id },
     files: ['path/myscript.js'],
   });

2. Also, ensure to include the path to the additional JavaScript file (path/myscript.js) in your vite.config.js configuration:

   webExtension({
   // other configuration options
   additionalInputs: {
   styles: [...],
   html: [...],
   scripts: [
     // Add the path to your additional script here
     "path/myscript.js",
   ],
   },
   }),

Hope this helps 😉