Gatsby: Netlify Production Only - Refused to execute script from '<URL>' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

[brmi]

Description

On first load of my page, I always get this error: Refused to execute script from '<URL>' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. The result is a lot of my javascript does not work at all. If I reload the page, it works perfectly. This only happens in production via Netlify.

Steps to reproduce

On production build, load the page the first time.

Expected result

The javascript on the page should work and there should be no console errors.

Actual result

The javascript does not work and I get the above error, only on first page load.

Environment

System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.0 - /usr/local/bin/node
Yarn: 1.1.0 - /usr/local/bin/yarn
npm: 5.5.1 - /usr/local/bin/npm
Browsers:
Chrome: 67.0.3396.99
Firefox: 61.0.1
Safari: 11.1.2
npmPackages:
gatsby: ^1.9.250 => 1.9.277
gatsby-link: ^1.6.40 => 1.6.46
gatsby-plugin-netlify: ^1.0.19 => 1.0.21
gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11
gatsby-plugin-react-svg: ^1.1.1 => 1.1.1
gatsby-plugin-sass: ^1.0.26 => 1.0.26
gatsby-source-filesystem: ^1.5.36 => 1.5.39
gatsby-transformer-yaml: ^1.5.17 => 1.5.18
npmGlobalPackages:
gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js:

module.exports = {
  plugins: [
    `gatsby-transformer-yaml`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sass`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `./src/data/`,
      },
    },
      {
          resolve: 'gatsby-plugin-react-svg',
          options: {
              include: /assets/
          }
      },
      {
        resolve: `gatsby-plugin-netlify`,
        options: {
          headers: {
            "/*.js": [
              "Cache-Control: public, max-age=0, must-revalidate",
            ],
          },
        },
      },
  ],
};

package.json:

{
  "name": "gatsby-starter-hello-world",
  "description": "Gatsby hello world starter",
  "license": "MIT",
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve"
  },
  "dependencies": {
    "gatsby": "^1.9.250",
    "gatsby-link": "^1.6.40",
    "gatsby-plugin-netlify": "^1.0.19",
    "gatsby-plugin-react-helmet": "^2.0.11",
    "gatsby-plugin-react-svg": "^1.1.1",
    "gatsby-plugin-sass": "^1.0.26",
    "gatsby-source-filesystem": "^1.5.36",
    "gatsby-transformer-yaml": "^1.5.17",
    "gridlex": "^2.7.1",
    "html-react-parser": "^0.4.6",
    "react-helmet": "^5.2.0",
    "react-slick": "^0.23.1",
    "react-tabs": "^2.2.2",
    "slick-carousel": "^1.8.1",
    "svg-react-loader": "^0.4.5"
  }
}

gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[KyleAMathews]

Hi, this shouldn't normally happen. Sorry you're running into it! This is almost certainly s problem with your site's code not gatsby itself. If you do identify what the cause is and it seems like something Gatsby can fix then please open another issue.

[brmi]

@KyleAMathews How can I set the mime types for my script tags in index.html without modifying index.html directly? Tried this but doesn't work:

{
        resolve: `gatsby-plugin-netlify`,
        options: {
          headers: {
            "/*.js": [
              "Cache-Control: public, max-age=0, must-revalidate",
              "Content-Type: text/javascript"
            ],
          },
        },
      },

[brmi]

Here's the fix in case anyone is wondering:

{
      resolve: `gatsby-plugin-netlify`,
      options: {
        mergeLinkHeaders: false,
        mergeCachingHeaders: false
      },
    },

[sebashwa]

Hi @brmi,

I got the same issue, but setting the mergeLinkHeaders and mergeCachingHeaders options on gatsby-netlify-plugin doesn't seem to solve it. Can you think of anything else I could try to set the correct headers for *.js files? Do you additionally set any options on the plugin to set/ transform headers?

Edit: My error looks slightly different

The resource from <URL> was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

also the *.js files are never loaded, even after reloading the page

[alyyousuf7]

This is not a Gatsby issue. It's your configuration in Netlify.

Netlify is returning an HTML page instead of JS or other resources.

In my case, it is returning Netlify's password protected HTML page instead of JS file, although I provided the password on the first page. It seems that the cookies are not passed correctly to other HTTP requests.