`Failed to load module script: JavaScript module script but the server responded with a MIME type of "text/plain".

[debpalash]

Build tool

Vite

Where do you see the problem?

• [X] In the browser
• [ ] In the terminal

Describe the bug

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

Reproduction

install using docs instruction

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i7
    Memory: 10.11 GB / 15.92 GB
  Binaries:
    Node: 18.10.0 - C:\Program Files\nodejs\node.EXE     
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD        
  Browsers:
   Chrome
  npmPackages:
    @crxjs/vite-plugin: ^1.0.14 => 1.0.14 
    vite: ^3.1.8 => 3.1.8

Severity

blocking all usage of RPCE

[filipw01]

@crxjs/vite-plugin version 1 does not support vite version 3. Try using @crxjs/vite-plugin version 2 beta (released yesterday)

[debpalash]

@crxjs/vite-plugin version 1 does not support vite version 3. Try using @crxjs/vite-plugin version 2 beta (released yesterday)

Th

pnpm run dev: error log

```js > > vite-template-solid@0.0.0 start D:\chromeExtension\crxjs\vite-solid-crxjs > vite failed to load config from D:\chromeExtension\crxjs\vite-solid-crxjs\vite.config.js error when starting dev server: Error [ERR_REQUIRE_ESM]: require() of ES Module D:\chromeExtension\crxjs\vite-solid-crxjs\node_modules\.pnpm\get-port@6.1.2\node_modules\get-port\index.js from D:\chromeExtension\crxjs\vite-solid-crxjs\node_modules\.pnpm\@crxjs+vite-plugin@2.0.0-beta.1_vite@3.1.8\node_modules\@crxjs\vite-plugin\dist\index.cjs not supported. Instead change the require of index.js in D:\chromeExtension\crxjs\vite-solid-crxjs\node_modules\.pnpm\@crxjs+vite-plugin@2.0.0-beta.1_vite@3.1.8\node_modules\@crxjs\vite-plugin\dist\index.cjs to a dynamic import() which is available in all CommonJS modules. at _require.extensions. [as .js] (file:///D:/chromeExtension/crxjs/vite-solid-crxjs/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:63540:17) at Object. (D:\chromeExtension\crxjs\vite-solid-crxjs\node_modules\.pnpm\@crxjs+vite-plugin@2.0.0-beta.1_vite@3.1.8\node_modules\@crxjs\vite-plugin\dist\index.cjs:20:15) at _require.extensions. [as .js] (file:///D:/chromeExtension/crxjs/vite-solid-crxjs/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:63540:17) at Object. (D:\chromeExtension\crxjs\vite-solid-crxjs\vite.config.js:33:26) at _require.extensions. [as .js] (file:///D:/chromeExtension/crxjs/vite-solid-crxjs/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:63537:24) at loadConfigFromBundledFile (file:///D:/chromeExtension/crxjs/vite-solid-crxjs/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:63545:21) at loadConfigFromFile (file:///D:/chromeExtension/crxjs/vite-solid-crxjs/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:63409:34) at async resolveConfig (file:///D:/chromeExtension/crxjs/vite-solid-crxjs/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:63026:28) at async createServer (file:///D:/chromeExtension/crxjs/vite-solid-crxjs/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:62092:20) at async CAC. (file:///D:/chromeExtension/crxjs/vite-solid-crxjs/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/cli.js:700:24)  ELIFECYCLE  Command failed with exit code 1. ```

[filipw01]

This one seems to already be reported here https://github.com/crxjs/chrome-extension-tools/issues/535

[filipw01]

For now you can try using vite@3.1.7 and see if you have any issues there

[tylergets]

I can confirm this errors still occurs with vite 3.1.7

[jacksteamdev]

The peer deps problem should be fixed in the current beta release (v2.0.0-beta.2):

npm i -D @crxjs/vite-plugin@beta 

[jacksteamdev]

I cannot reproduce this bug with CRXJS@2.0.0-beta.4 and Vite@3.2.2.

[ezeikel]

Getting the same issue using:

vite@4.2.2 @crxjs/vite-plugin@2.0.0-beta.16

[faahim]

Having the same issue as well.

"@crxjs/vite-plugin": "^1.0.14", "vite": "^2.9.15"

[cscxj]

The same problem.

"vite": "^4.4.5" "@crxjs/vite-plugin": "2.0.0-beta.18"

[DeltaLaboratory]

Same problem here

"vite": "^5.0.8" "@crxjs/vite-plugin": "2.0.0-beta.21"

[danielkleinstein]

This is the error that arises if you load the root folder of your project (i.e. the folder containing vite.config.js as the Chrome extension) - this is an easy mistake to make, what you really want to do is load the generated dist folder.

When you load the root folder, index.html will include something like:

<script type="module" src="/src/main.tsx"></script>

Which will load the file directly from the Chrome extension folder - and Chrome by default will serve it as a plaintext file.

[rahulbansal16]

so how to load it?

[danielkleinstein]

Try loading the dist folder?

[rahulbansal16]

That's how my code was

I tried doing it like this. /dist/src/main.jsx

but it's giving file not found error.

I also tried like this

dist/src/main.jsx

[rahulbansal16]

@danielkleinstein This is the folder that I am trying to load as chrome extension load unpacked option.

[danielkleinstein]

Try removing the /dist prefix from your include

[rahulbansal16]

The initial code is without the dist but it gives error of MIME type.