Appending to `service-worker.js` during `npm run build` ?

[bplittle]

Is there a reason that this doesn't appear to be working deployment (as it works locally)? Specifically using https://github.com/bbhlondon/cra-append-sw/blob/master/index.js

[mars]

At first glance, I believe it should work.

Did you add & commit its command to package.json?

{
  "scripts": {
    "start": "react-scripts build && cra-append-sw --mode dev ./custom-sw.js",
    "build": "react-scripts build && cra-append-sw ./custom-sw.js"
  }
}

—https://github.com/bbhlondon/cra-append-sw#user-content-usage-with-create-react-app

Are any errors logged on Heroku? As the app builds or starts?

[bplittle]

Yup, I've added the command to the scripts. They work when I run locally, but it doesn't appear to append when Heroku builds. Below is my package.json and the build logs. There's a babel-related error as well during Heroku build that doesn't occur when I run it locally.

Thanks!

package.json:

{
  "name": "react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "cra-append-sw": "^2.1.0",
    "font-awesome": "^4.7.0",
    "j-toker": "0.0.10-beta3",
    "jquery": "^3.2.1",
    "js-cookie": "^2.1.4",
    "moment": "^2.18.1",
    "node-sass-chokidar": "0.0.3",
    "npm-run-all": "^4.1.1",
    "object-dig": "^0.1.1",
    "query-string": "^5.0.0",
    "rc-time-picker": "^2.4.1",
    "react": "^15.6.1",
    "react-add-to-calendar": "^0.1.4",
    "react-datepicker": "^0.55.0",
    "react-datetime": "^2.11.1",
    "react-dom": "^15.6.1",
    "react-dropzone": "^4.2.3",
    "react-modal": "^2.3.2",
    "react-notification-system": "^0.2.15",
    "react-notifications": "^1.4.3",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.13",
    "react-select": "^1.0.0-rc.10",
    "react-table": "^6.5.3"
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js && cra-append-sw --mode dev ./custom-sw.js",
    "build": "npm run build-css && react-scripts build && cra-append-sw ./custom-sw.js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Heroku deployment logs:

-----> React.js (create-react-app) multi app detected
-----> Configure create-react-app build environment
       Using `NODE_ENV=development`
=====> 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
       NPM_CONFIG_PRODUCTION=false
       NODE_VERBOSE=false
       NODE_ENV=development
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       engines.yarn (package.json):  unspecified (use default)

       Resolving node version 8.x...
       Downloading and installing node 8.9.4...
       Using default npm version: 5.6.0
       Resolving yarn version 1.x...
       Downloading and installing yarn (1.3.2)...
       Installed yarn 1.3.2
-----> Restoring cache
       Loading 2 from cacheDirectories (default):
       - node_modules
       - bower_components (not cached - skipping)
-----> Building dependencies
       Installing node modules (yarn.lock)
       yarn install v1.3.2
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       info fsevents@1.1.2: The platform "linux" is incompatible with this module.
       info "fsevents@1.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       [4/4] Building fresh packages...
       Done in 32.81s.
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Build succeeded!
=====> 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
> react-app@0.1.0 build /tmp/build_fda21af8c23aebf9cfd37b97f2f0f332/pristinelabour-react-pristine-9c0431cf59aa927e74a3f7a4277dbc17ada96143
> npm run build-css && react-scripts build && cra-append-sw ./custom-sw.js
> react-app@0.1.0 build-css /tmp/build_fda21af8c23aebf9cfd37b97f2f0f332/pristinelabour-react-pristine-9c0431cf59aa927e74a3f7a4277dbc17ada96143
> node-sass-chokidar src/ -o src/

File sizes after gzip:
  255.87 KB  build/static/js/main.3fb0237b.js
  25.92 KB   build/static/css/main.80cae4ee.css
The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:
  "homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
  yarn global add serve
  serve -s build
Failed to load ./.env.
(node:563) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Hash: 670d74ddcded07dd2df0
Version: webpack 3.10.0
Time: 52ms
ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in '/tmp/build_fda21af8c23aebf9cfd37b97f2f0f332/pristinelabour-react-pristine-9c0431cf59aa927e74a3f7a4277dbc17ada96143'
resolve 'babel-loader' in '/tmp/build_fda21af8c23aebf9cfd37b97f2f0f332/pristinelabour-react-pristine-9c0431cf59aa927e74a3f7a4277dbc17ada96143'
  Parsed request is a module
  using description file: /tmp/build_fda21af8c23aebf9cfd37b97f2f0f332/pristinelabour-react-pristine-9c0431cf59aa927e74a3f7a4277dbc17ada96143/package.json (relative path: .)
  after using description file: /tmp/build_fda21af8c23aebf9cfd37b97f2f0f332/pristinelabour-react-pristine-9c0431cf59aa927e74a3f7a4277dbc17ada96143/package.json (relative path: .)
    resolve as module
      /tmp/build_fda21af8c23aebf9cfd37b97f2f0f332/node_modules doesn't exist or is not a directory
      /tmp/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /tmp/build_fda21af8c23aebf9cfd37b97f2f0f332/pristinelabour-react-pristine-9c0431cf59aa927e74a3f7a4277dbc17ada96143/node_modules
        using description file: /tmp/build_fda21af8c23aebf9cfd37b97f2f0f332/pristinelabour-react-pristine-9c0431cf59aa927e74a3f7a4277dbc17ada96143/package.json (relative path: ./node_modules)
        after using description file: /tmp/build_fda21af8c23aebf9cfd37b97f2f0f332/pristinelabour-react-pristine-9c0431cf59aa927e74a3f7a4277dbc17ada96143/package.json (relative path: ./node_modules)
          using description file: /tmp/build_fda21af8c23aebf9cfd37b97f2f0f332/pristinelabour-react-pristine-9c0431cf59aa927e74a3f7a4277dbc17ada96143/package.json (relative path: ./node_modules/babel-loader)
            no extension
              /tmp/build_fda21af8c23aebf9cfd37b97f2f0f332/pristinelabour-react-pristine-9c0431cf59aa927e74a3f7a4277dbc17ada96143/node_modules/babel-loader doesn't exist
            .js
              /tmp/build_fda21af8c23aebf9cfd37b97f2f0f332/pristinelabour-react-pristine-9c0431cf59aa927e74a3f7a4277dbc17ada96143/node_modules/babel-loader.js doesn't exist
            .json
              /tmp/build_fda21af8c23aebf9cfd37b97f2f0f332/pristinelabour-react-pristine-9c0431cf59aa927e74a3f7a4277dbc17ada96143/node_modules/babel-loader.json doesn't exist
            as directory
              /tmp/build_fda21af8c23aebf9cfd37b97f2f0f332/pristinelabour-react-pristine-9c0431cf59aa927e74a3f7a4277dbc17ada96143/node_modules/babel-loader doesn't exist
(node:563) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
=====> 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
100  838k  100  838k    0     0  5257k      0 --:--:-- --:--:-- --:--:-- 5241k
-----> 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: 56M
-----> Launching...
       Released v165
       https://react-pristine-stage.herokuapp.com/ deployed to Heroku

[mars]

This error is related to the cra-append-sw module's use of babel-loader.

Does npm run build work locally? My guess is that it will fail the same way. In which case the issue can be diagnosed locally; it is not related to Heroku deployment.

I see that npm start calls cra-append-sw --mode dev. Dev mode may very well cause this difference in behavior.

Maybe try adding --skip-compile flag to the build command:

cra-append-sw --skip-compile ./custom-sw.js

All of these are suggestions to help you figure out the bug in your app code. The buildpack itself is functioning correctly here. The developer of cra-append-sw module would hopefully be better at triaging the Babel issue with their code.

[bplittle]

The --skip-compile flag removed the error.

Thanks so much for your help!

Note (in case helpful): On local npm run build was not generating that babel-loader error and it was then appending correctly, which is why I thought it might have been an issue with the buildpack.

I've opened an issue with the developers of the cra-append-sw module. Thanks again!