Getting a MIME type error

[elliotwaite]

When the app loads, I get this error in the console: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Here's a screenshot:

Also, I don't see a "Solid" tab in the DevTools window.

I'm using:

• Chrome (Version 113.0.5672.126 (Official Build) (x86_64))
• Solid Devtools (Version 0.27.0)

I'm also using SolidStart with the following settings:

vite.config.ts

import devtools from "solid-devtools/vite"
import solid from "solid-start/vite"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [
    devtools({
      autoname: true,
    }),
    solid(),
  ],
})

package.json

{
  "name": "my-app",
  "type": "module",
  "scripts": {
    "dev": "solid-start dev",
    "build": "solid-start build",
    "start": "solid-start start"
  },
  "dependencies": {
    "@solidjs/meta": "^0.28.5",
    "@solidjs/router": "^0.8.2",
    "solid-js": "^1.7.5",
    "solid-start": "^0.2.26",
    "undici": "^5.22.1"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.21.8",
    "@typescript-eslint/eslint-plugin": "^5.59.7",
    "@typescript-eslint/parser": "^5.59.7",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.41.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-import-resolver-typescript": "^3.5.5",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-solid": "^0.12.1",
    "postcss": "^8.4.24",
    "postcss-easings": "^3.0.1",
    "postcss-fail-on-warn": "^0.2.1",
    "postcss-nesting": "^11.2.2",
    "postcss-pxtorem": "^6.0.0",
    "postcss-simple-vars": "^7.0.1",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "solid-devtools": "^0.27.0",
    "solid-start-node": "^0.2.26",
    "stylelint": "^15.6.2",
    "stylelint-config-idiomatic-order": "^9.0.0",
    "stylelint-config-standard": "^33.0.0",
    "stylelint-config-tailwindcss": "^0.0.7",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.0.4",
    "vite": "^4.3.9"
  },
  "resolutions": {
    "stylelint-order": "6.0.3"
  },
  "engines": {
    "node": ">=16"
  }
}

src/entry-client.tsx

import "solid-devtools"
import { mount, StartClient } from "solid-start/entry-client"

mount(() => <StartClient />, document)

Any suggestions for what I could try to do to fix this?

[thetarnav]

I'm aware of the "Failed to load module script" errors. I think it's most likely some build artifact due to using crxjs beta version for vite 4. I'll try to revert to previous version of it to see if it still works.

Also, I don't see a "Solid" tab in the DevTools window.

These errors shouldn't negatively affect how the extension work from what I saw so I'm gonna have to check if something didn't break.

[elliotwaite]

These errors shouldn't negatively affect how the extension work from what I saw so I'm gonna have to check if something didn't break.

Okay, got it.

I'm seeing the "Solid" tab now, at least most of the time, but sometimes it still gets in a state where it isn't shown, but I haven't figured out the steps yet to reliably reproduce that issue. But when I do get in that state, it seems like some combination of closing/reopening the DevTools, refreshing the page, and disabling/reenabling the extension, fixes it. Here's a screen recording of it going from not showing to showing:

But another issue I'm noticing now (which I'm not sure if it's related to the tab not showing sometimes) is that if I open the DevTools and go to the Solid tab, it will display the expandable tree starting at the Root node, but if I refresh the page, that whole tree disappears and there is nothing to interact with anymore, and I have to close and reopen the DevTools to get that tree to show again:

[thetarnav]

Usually to make sure the extension is loaded properly I open the app on a fresh tab. The only time this is necessary is when I reload the extension because it crashed, or I want to reset it, or it updated the version. I'm gonna see if I can load it without the need to open a new tab.

As for the tree disappearing after reload, I can only reproduce that when using SSR which is interesting. CSR apps work fine. The debugger is still working though, only the initial tree after load is not getting received. A quick way to populate the tree is to switch between view modes (Components, Owners, etc.)

[thetarnav]

Ok, I've found a reason for the MIME error messages.

I'm importing a debugger script dynamically only after the devtools client was detected in the app.

Which for some reason gets transformed (by crxjs I assume) to this

Where the "assets/*" paths are invalid, because they are not getting imported from "chrome-extension://lgbbadmgjpnecgcbfghhhaplnhcffnbd/assets/*" but "localhost:3000/assets/*" instead, because they are running on the page, not the extension.

Modifying the dist code manually to this fixes the issue, now I just have to find a way to not have to do this manually

[elliotwaite]

A quick way to populate the tree is to switch between view modes (Components, Owners, etc.)

Nice. Good to know.

Where the "assets/*" paths are invalid, because they are not getting imported from "chrome-extension://lgbbadmgjpnecgcbfghhhaplnhcffnbd/assets/*" but "localhost:3000/assets/*" instead, because they are running on the page, not the extension.

Modifying the dist code manually to this fixes the issue, now I just have to find a way to not have to do this manually

Ah, okay.