Responds with ‘text/html’ content instead of JavaScript (buildpack v9.0.0)

[mezdru]

Hi,

I have found an issue with the new version of the buildpack : v9.0.0. When I use it as the buildpack of my create-react-app project on Heroku, the service worker doesn't act correctly and I can see these errors (when the service worker try to fetch the new version of my app):

Failed to register/update a ServiceWorker for scope ‘https://app-staging.wingzy.com/’: Bad Content-Type of ‘text/html’ received for script ‘https://app-staging.wingzy.com/precache-manifest.335c0b20061ed12de3c77e56223ef9d2.js’. Must be a JavaScript MIME type.

Failed to register/update a ServiceWorker for scope ‘https://app-staging.wingzy.com/’: Bad Content-Type of ‘text/html’ received for script ‘app-staging.wingzy.com/precache-manifest.a6e2b49b3caa5ebbdd2049583f3a678d.js’. Must be a JavaScript MIME type.

NetworkError: Failed to load worker script at app-staging.wingzy.com/precache-manifest.a6e2b49b3caa5ebbdd2049583f3a678d.js (nsresult = 0x80530013)

The latest refers to the service-worker.js line 16 : importScripts( "app-staging.wingzy.com/precache-manifest.a6e2b49b3caa5ebbdd2049583f3a678d.js" );

/**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.
 * See https://goo.gl/nhQhGp
 *
 * The rest of the code is auto-generated. Please don't update this file
 * directly; instead, make changes to your Workbox build configuration
 * and re-run your build process.
 * See https://goo.gl/2aRDsh
 */

importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");

importScripts(
  "app-staging.wingzy.com/precache-manifest.a6e2b49b3caa5ebbdd2049583f3a678d.js"
);

workbox.clientsClaim();

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 * See https://goo.gl/S9QRab
 */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

workbox.routing.registerNavigationRoute("app-staging.wingzy.com/index.html", {

  blacklist: [/^\/_/,/\/[^\/]+\.[^\/]+$/],
});

If I clean website data before trying to get my app, I have saw others errors which are also due to the content of the files :

Uncaught SyntaxError: Unexpected token <

Manifest: Line: 1, column: 1, Unexpected token.

=> All file (js and manifest.json) contain html content

That issue only happened when I use the v9.0.0 of your buildpack, the v8.0.0 works correctly in my case.

[mars]

Hi @mezdru sorry to hear you've encountered this bug!

There's absolutely no difference to how v9.0.0 works compared to v8.0.0, except that it relies on the Node.js buildpack to automatically run the package.json build script.

I'm suspecting that the build is not being run for your app with v9.0.0, so existing, installed service workers are still working in the browser, but cannot fetch updates.

Does the package.json contain a heroku-postbuild property? It will override the new automated build. Make sure to remove that property when running with v9.0.0.

What is the HTTP status returned for the bad files? (200, 404, 503?)

What does the build log contain for the broken v9.0.0 deployment?

[jmorrell]

@mars There is one difference that I was made aware of through a support ticket today. Previously an app with both a build and a heroku-postbuild script would have both run during build, but now only the heroku-postbuild script will be run.

@mezdru could this be the issue in your application?

[mezdru]

Hi @mars , Hi @jmorrell

Thank you very much for your quick reply.

@jmorrell Previously, I wasn't using heroku-postbuild, only build . I added heroku-postbuild to test with it, but it changes nothing to the result.

@mars The "bad files" are fetch with 200 http status code :

My build is successful on heroku and that's my build log (with only build script inside my package.json :

-----> React.js (create-react-app) multi app detected

=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git

=====> Detected Framework: Multipack

=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git

=====> Detected Framework: Node.js

-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error

       NODE_ENV=staging

       NODE_MODULES_CACHE=true

       NODE_VERBOSE=false

-----> Installing binaries

       engines.node (package.json):  unspecified

       engines.npm (package.json):   unspecified (use default)

       Resolving node version 10.x...

       Downloading and installing node 10.15.3...

       Using default npm version: 6.4.1

-----> Restoring cache

       - node_modules

-----> Installing dependencies

       Installing node modules (package.json)

       audited 36824 packages in 19.175s

       found 63 low severity vulnerabilities

         run `npm audit fix` to fix them, or `npm audit` for details

-----> Build

       Running build

       > frontflip@0.1.0 build /tmp/build_c819094e89df6862cbab434e6e594060

       > react-scripts build

       Creating an optimized production build...

       Compiled with warnings.

/* eslint part removed by me */

       File sizes after gzip:

         697.63 KB  build/static/js/2.01a378df.chunk.js

         36.56 KB   build/static/js/main.fb61d8c6.chunk.js

         8.38 KB    build/static/css/main.1a662728.chunk.css

         776 B      build/static/js/runtime~main.d85df8a8.js

       The project was built assuming it is hosted at app-staging.wingzy.com/.

       You can control this with the homepage field in your package.json.

       The build folder is ready to be deployed.

       Find out more about deployment here:

         https://bit.ly/CRA-deploy

-----> Caching build

       - node_modules

-----> Pruning devDependencies

       Skipping because NODE_ENV is not 'production'

-----> Build succeeded!

-----> Change to Node.js build process 

       Heroku has begun executing the "build" script defined in package.json

       during Node.js builds.

       Read more: https://devcenter.heroku.com/changelog-items/1573

=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git

=====> Detected Framework: React.js (create-react-app)

       Using existing `static.json`

       Enabling runtime environment variables

=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git

=====> Detected Framework: Static HTML

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current

                                 Dload  Upload   Total   Spent    Left  Speed

-----> Installed directory to /app/bin

Using release configuration from last framework (Static HTML).

-----> Discovering process types

       Procfile declares types     -> (none)

       Default types for buildpack -> web

-----> Compressing...

       Done: 126.3M

-----> Launching...

       Released v358

       https://frontflip-staging.herokuapp.com/ deployed to Heroku

[mars]

The "bad files" are fetch with 200 http status code [screenshot]

What do those responses contain? (Should be viewable right there in the browser console, or use a separate tool like curl to make those requests).

Perhaps that will be a hint as to what’s going wrong.

[mezdru]

The "bad files" are fetch with 200 http status code [screenshot]

What do those responses contain? (Should be viewable right there in the browser console, or use a separate tool like curl to make those requests).

Perhaps that will be a hint as to what’s going wrong.

The responses of theses requests are the same: the index.html file that is inside the public directory of my project. That's why there is an error about the MIME type.

[mars]

Okay, so what is logged by the app running on Heroku as these requests come in?

Do you have a custom static.json? Please paste its contents here too.

[mars]

Also, please paste the contents of your package.json.

[mezdru]

My static.json :

{
  "root": "build/",
  "routes": {
    "/**": "index.html"
  },
  "https_only": true
}

The package.json :

{
  "name": "frontflip",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.9.2",
    "@material-ui/icons": "^3.0.2",
    "algoliasearch": "^3.32.0",
    "core-js": "^2.6.5",
    "hammerjs": "^2.0.8",
    "mobx": "^5.9.0",
    "mobx-react": "^5.4.3",
    "muuri": "^0.7.1",
    "notistack": "^0.5.0",
    "query-string": "^6.3.0",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-ga": "^2.5.7",
    "react-https-redirect": "^1.1.0",
    "react-instantsearch-dom": "^5.4.0",
    "react-intl": "^2.8.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.8",
    "react-select": "^2.4.2",
    "react-swipeable-views": "^0.13.1",
    "slack-notify": "^0.1.7",
    "socket.io-client": "^2.2.0",
    "styled-components": "^4.1.3",
    "superagent": "^4.1.0",
    "superagent-promise": "^1.1.0",
    "twemoji": "^11.3.0",
    "universal-cookie": "^3.0.7",
    "uploadcare-widget": "^3.7.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

The heroku logs :

2019-03-13T17:31:21.163177+00:00 app[web.1]: 10.8.238.76 - - [13/Mar/2019:17:31:21 +0000] "GET /service-worker.js HTTP/1.1" 200 617 "-" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:65.0) Gecko/20100101 Firefox/65.0"

2019-03-13T17:31:21.219925+00:00 app[web.1]: 10.97.5.179 - - [13/Mar/2019:17:31:21 +0000] "GET /precache-manifest.e468a9bed0c2cc9696aaae8f050f4196.js HTTP/1.1" 200 1237 "-" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:65.0) Gecko/20100101 Firefox/65.0"

2019-03-13T17:31:21.387778+00:00 app[web.1]: 10.97.5.179 - - [13/Mar/2019:17:31:21 +0000] "GET /app-staging.wingzy.com/precache-manifest.e59adddba2451c200770daa16bee1421.js HTTP/1.1" 200 1237 "https://app-staging.wingzy.com/service-worker.js" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:65.0) Gecko/20100101 Firefox/65.0"

2019-03-13T17:31:21.391839+00:00 heroku[router]: at=info method=GET path="/app-staging.wingzy.com/precache-manifest.e59adddba2451c200770daa16bee1421.js" host=app-staging.wingzy.com request_id=427bccdc-864d-4f1b-8cba-611e6b0f8a7b fwd="212.194.120.65" dyno=web.1 connect=0ms service=3ms status=200 bytes=1512 protocol=https

2019-03-13T17:31:21.167204+00:00 heroku[router]: at=info method=GET path="/service-worker.js" host=app-staging.wingzy.com request_id=866d2d6d-6075-4c0a-ac6f-3d218e5dee49 fwd="212.194.120.65" dyno=web.1 connect=0ms service=4ms status=200 bytes=892 protocol=https

2019-03-13T17:31:21.223998+00:00 heroku[router]: at=info method=GET path="/precache-manifest.e468a9bed0c2cc9696aaae8f050f4196.js" host=app-staging.wingzy.com request_id=3de44be5-2662-4509-98b5-67c4709ac68d fwd="212.194.120.65" dyno=web.1 connect=0ms service=3ms status=200 bytes=1512 protocol=https

[mars]

I just tried accessing your app at https://frontflip-staging.herokuapp.com/

It looks like your app is inserting /app-staging.wingzy.com at the root of the request path for those JS & CSS assets. Note the Request URL:

So, the server is returning index.html for those not found paths, because that's how it supports default React client-side routing.

Can you figure out why /app-staging.wingzy.com is being inserted into the asset URLs? I suspect that is something you setup.

Requesting https://frontflip-staging.herokuapp.com/static/css/main.0b075ae9.chunk.css without that extra path segment does return the correct resource!

[mars]

Closing this because it seems to be an issue with the app mutating its URL, not an issue with this buildpack.