Stencil: The server responded with a non-JavaScript MIME type of "text/html"

[numerized]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request

Current behavior:
When I'm running npm run build --prod since version 2 of stenciljs I cannot deploy on firebase I have this error message:
The server responded with a non-JavaScript MIME type of "text/html"

Expected behavior:
I expect that the hosting can serve built code

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "declaration": false,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2017"
    ],
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es2017",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "jsx": "react",
    "jsxFactory": "h"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

Other information:
If I do npm start and then deploy the resulting www into firebase hosting my webpage works
https://ps5.stockback.live/

This was not happening with version before 2.0.0

[numerized]

I tried this:
https://stackoverflow.com/questions/56906153/mime-error-with-angular-8-in-firebase-hosting

No help

[numerized]

Tried to upgrade node to 14LTS still no success

[numerized]

Tried to change the module target to es5 in tsconfig.js
no success

[numerized]

{
  "name": "ps5reserva",
  "private": true,
  "version": "0.0.1",
  "description": "ps5reserva",
  "license": "MIT",
  "files": [
    "dist/"
  ],
  "scripts": {
    "build": "stencil build",
    "start": "stencil build --dev --watch --serve",
    "test": "stencil test --spec --e2e",
    "test.watch": "stencil test --spec --e2e --watch",
    "generate": "stencil generate"
  },
  "devDependencies": {
    "@ionic/core": "^5.3.2",
    "@stencil/core": "^2.3.0"
  },
  "dependencies": {
    "firebase": "^7.24.0"
  }
}

[claviska]

I'm not a Firebase user but that looks like a mime type issue. I've seen this happen when servers aren't configured to understand the necessary file extensions.

In Stencil 2, some of the filenames changed, so if you're using CJS then you might need to configure it to serve *.cjs.js as text/javascript, for example.

[numerized]

Ok good start, I'll have a look

[numerized]

no success yet:

I don't get it

[numerized]

can I ask you how to

you might need to configure it to serve *.cjs.js as text/javascript

[claviska]

Again, I don't use Firebase but it looks like you can configure headers through their dashboard.

[numerized]

I have not found a way to serve cjs as text/javascript there.
Thanks for help, maybe someone else can help further ?

[numerized]

ohhh maybe something like:

{
    // Overrides the default 1 hour browser cache with a 2 hour cache for all image files
    "source": "**/*.@(cjs.js)",
    "headers": [ {
      "key": "type",
      "value": "text/javascript"
    } ]

or maybe Content-Type ? 

[peterpeterparker]

The issue is not linked to Firebase but to Stencil >= v2 if you build your application locally. Indeed, if you proceed a npm run build after for example having used a command npm run start the resulting bundle will be corrupted and the error which are going to pops once served as those you are describing in your issue.

Proceed as following:

rm -r www
npm run build
firebase deploy

and you should be good.

this problem doesn't happen if build in a CI as it always starts with a clean sheet. this tutorial show how to set up a github actions to deploy to firebase with stencil apps.

alternatively, you can do that and also add a script to clean up www before build, checkout our script and then chain it in your package.json as pre-build.

[numerized]

It worked!
Thanks!

[peterpeterparker]

Awesome! my pleasure

[numerized]

Excellent Spiderman!