0

This is my first time trying to deploy a React application. I use Heroku and I added the create-react-app build pack to my settings in Heroku. The application is deploying fine except that when I go to inspect the application with Chrome's developer tools, all of the code is readable. Nothing is minimized and the deployment read out is stating that its about 64MB in size which is pretty sizeable considering this is a simple minesweeper game I wrote as I am currently learning React.

I see that I can run yarn build locally for production files but Heroku should be doing that (and it claims to be doing it) in the deployment process. Here is the full deployment log (and the url to application is at the bottom of the log if you want to see for yourself that the code isn't compressed at all.

Also, I have both the heroku/nodejs and create-react-app build packs added.

Counting objects: 5, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 447 bytes | 0 bytes/s, done.
Total 3 (delta 2), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Node.js app detected
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        NODE_VERBOSE=false
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  10.16.3
remote:        engines.npm (package.json):   6.11.3
remote:        engines.yarn (package.json):  unspecified (use default)
remote:        
remote:        Resolving node version 10.16.3...
remote:        Downloading and installing node 10.16.3...
remote:        Bootstrapping npm 6.11.3 (replacing 6.9.0)...
remote:        npm 6.11.3 installed
remote:        Resolving yarn version 1.x...
remote:        Downloading and installing yarn (1.19.1)...
remote:        Installed yarn 1.19.1
remote:        
remote: -----> Restoring cache
remote:        - yarn cache
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules (yarn.lock)
remote:        yarn install v1.19.1
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info fsevents@2.0.7: The platform "linux" is incompatible with this module.
remote:        info "fsevents@2.0.7" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info fsevents@1.2.9: The platform "linux" is incompatible with this module.
remote:        info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning " > bootstrap@4.3.1" has unmet peer dependency "jquery@1.9.1 - 3".
remote:        warning " > bootstrap@4.3.1" has unmet peer dependency "popper.js@^1.14.7".
remote:        warning " > react-timer-hook@1.1.7" has incorrect peer dependency "react-dom@16.8.0".
remote:        [4/4] Building fresh packages...
remote:        Done in 24.67s.
remote:        
remote: -----> Build
remote:        Running build (yarn)
remote:        yarn run v1.19.1
remote:        $ react-scripts build
remote:        Creating an optimized production build...
remote:        Compiled successfully.
remote:        
remote:        File sizes after gzip:
remote:        
remote:          55.27 KB  build/static/js/2.51ce75d4.chunk.js
remote:          22.16 KB  build/static/css/2.266e55a5.chunk.css
remote:          7.28 KB   build/static/js/main.85808fae.chunk.js
remote:          922 B     build/static/css/main.1b212574.chunk.css
remote:          772 B     build/static/js/runtime-main.135745f3.js
remote:        
remote:        The project was built assuming it is hosted at the server root.
remote:        You can control this with the homepage field in your package.json.
remote:        For example, add this to build it for GitHub Pages:
remote:        
remote:          "homepage" : "http://myname.github.io/myapp",
remote:        
remote:        The build folder is ready to be deployed.
remote:        You may serve it with a static server:
remote:        
remote:          yarn global add serve
remote:          serve -s build
remote:        
remote:        Find out more about deployment here:
remote:        
remote:          <removed url because stack overflow complained>
remote:        
remote:        Done in 30.84s.
remote:        
remote: -----> Pruning devDependencies
remote:        yarn install v1.19.1
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info fsevents@2.0.7: The platform "linux" is incompatible with this module.
remote:        info "fsevents@2.0.7" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info fsevents@1.2.9: The platform "linux" is incompatible with this module.
remote:        info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning " > bootstrap@4.3.1" has unmet peer dependency "jquery@1.9.1 - 3".
remote:        warning " > bootstrap@4.3.1" has unmet peer dependency "popper.js@^1.14.7".
remote:        warning " > react-timer-hook@1.1.7" has incorrect peer dependency "react-dom@16.8.0".
remote:        [4/4] Building fresh packages...
remote:        warning Ignored scripts due to flag.
remote:        Done in 10.24s.
remote:        
remote: -----> Caching build
remote:        - yarn cache
remote:        
remote: -----> Build succeeded!
remote:  !     Unmet dependencies don't fail yarn install but may cause runtime issues
remote:        https://github.com/npm/npm/issues/7494
remote: 
remote: -----> React.js (create-react-app) multi app detected
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
remote: =====> Detected Framework: Multipack
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
remote: =====> Detected Framework: Node.js
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_HOME=/tmp/build_8f502a2ec1527c68927f7b22b403c03a/.heroku/node
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        NODE_VERBOSE=false
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  10.16.3
remote:        engines.npm (package.json):   6.11.3
remote:        engines.yarn (package.json):  unspecified (use default)
remote:        
remote:        Resolving node version 10.16.3...
remote:        Downloading and installing node 10.16.3...
remote:        Bootstrapping npm 6.11.3 (replacing 6.9.0)...
remote:        npm 6.11.3 installed
remote:        Resolving yarn version 1.x...
remote:        Downloading and installing yarn (1.19.1)...
remote:        Installed yarn 1.19.1
remote:         !     node_modules checked into source control
remote:               https://blog.heroku.com/node-habits-2016#9-only-git-the-important-bits
remote:        
remote:        
remote: -----> Restoring cache
remote:        Cached directories were not restored due to a change in version of node, npm, yarn or stack
remote:        Module installation may take longer for this build
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules (yarn.lock)
remote:        yarn install v1.19.1
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info fsevents@2.0.7: The platform "linux" is incompatible with this module.
remote:        info "fsevents@2.0.7" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info fsevents@1.2.9: The platform "linux" is incompatible with this module.
remote:        info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning " > bootstrap@4.3.1" has unmet peer dependency "jquery@1.9.1 - 3".
remote:        warning " > bootstrap@4.3.1" has unmet peer dependency "popper.js@^1.14.7".
remote:        warning " > react-timer-hook@1.1.7" has incorrect peer dependency "react-dom@16.8.0".
remote:        [4/4] Building fresh packages...
remote:        Done in 49.98s.
remote:        
remote: -----> Build
remote:        Running build (yarn)
remote:        yarn run v1.19.1
remote:        $ react-scripts build
remote:        Creating an optimized production build...
remote:        Compiled successfully.
remote:        
remote:        File sizes after gzip:
remote:        
remote:          55.27 KB  build/static/js/2.51ce75d4.chunk.js
remote:          22.16 KB  build/static/css/2.266e55a5.chunk.css
remote:          7.28 KB   build/static/js/main.85808fae.chunk.js
remote:          922 B     build/static/css/main.1b212574.chunk.css
remote:          772 B     build/static/js/runtime-main.135745f3.js
remote:        
remote:        The project was built assuming it is hosted at the server root.
remote:        You can control this with the homepage field in your package.json.
remote:        For example, add this to build it for GitHub Pages:
remote:        
remote:          "homepage" : "http://myname.github.io/myapp",
remote:        
remote:        The build folder is ready to be deployed.
remote:        You may serve it with a static server:
remote:        
remote:          yarn global add serve
remote:          serve -s build
remote:        
remote:        Find out more about deployment here:
remote:        
remote:          <removed url because stackoverflow complained>
remote:        
remote:        Done in 31.08s.
remote:        
remote: -----> Pruning devDependencies
remote:        yarn install v1.19.1
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info fsevents@2.0.7: The platform "linux" is incompatible with this module.
remote:        info "fsevents@2.0.7" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info fsevents@1.2.9: The platform "linux" is incompatible with this module.
remote:        info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning " > bootstrap@4.3.1" has unmet peer dependency "jquery@1.9.1 - 3".
remote:        warning " > bootstrap@4.3.1" has unmet peer dependency "popper.js@^1.14.7".
remote:        warning " > react-timer-hook@1.1.7" has incorrect peer dependency "react-dom@16.8.0".
remote:        [4/4] Building fresh packages...
remote:        warning Ignored scripts due to flag.
remote:        Done in 10.34s.
remote:        
remote: -----> Caching build
remote:        - yarn cache
remote:        
remote: -----> Build succeeded!
remote:  !     Unmet dependencies don't fail yarn install but may cause runtime issues
remote:        https://github.com/npm/npm/issues/7494
remote: 
remote: =====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
remote: =====> Detected Framework: React.js (create-react-app)
remote:        Writing `static.json` to support create-react-app
remote:        Enabling runtime environment variables
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
remote: =====> Detected Framework: Static HTML
remote:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
remote:                                  Dload  Upload   Total   Spent    Left  Speed
remote: 100  838k  100  838k    0     0  14.3M      0 --:--:-- --:--:-- --:--:-- 14.1M
remote: -----> Installed directory to /app/bin
remote: Using release configuration from last framework (Static HTML).
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote: 
remote: -----> Compressing...
remote:        Done: 65M
remote: -----> Launching...
remote:        Released v5
remote:        https://still-headland-77198.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/still-headland-77198.git
   28ed634..60391e2  master -> master

EDIT: below is a photo of what I'm seeing when I inspect the web site:

enter image description here

EDIT #2: So it looks like the static files are being sent correctly, but its the source maps that are viewable through the browser developer tools.

When I do a full page reload, this is what heroku logs output I get:

2019-10-15T13:22:09.316671+00:00 heroku[router]: at=info method=GET path="/" host=still-headland-77198.herokuapp.com request_id=27e961ec-3a0a-48dd-a23f-19347df72d65 fwd="67.166.153.94" dyno=web.1 connect=0ms service=5ms status=200 bytes=1147 protocol=https
2019-10-15T13:22:09.589611+00:00 heroku[router]: at=info method=GET path="/static/js/bundle.js" host=still-headland-77198.herokuapp.com request_id=ebe2c750-2783-4558-8f40-d92d70b7b05e fwd="67.166.153.94" dyno=web.1 connect=0ms service=19ms status=200 bytes=6709 protocol=https
2019-10-15T13:22:09.788537+00:00 heroku[router]: at=info method=GET path="/static/js/main.chunk.js" host=still-headland-77198.herokuapp.com request_id=e2c77a25-0b40-4f02-a24f-ab64c4fd588d fwd="67.166.153.94" dyno=web.1 connect=0ms service=29ms status=200 bytes=14484 protocol=https
2019-10-15T13:22:10.04068+00:00 heroku[router]: at=info method=GET path="/static/js/0.chunk.js" host=still-headland-77198.herokuapp.com request_id=c9554914-d290-4d3e-a3fd-df18f0cc6869 fwd="67.166.153.94" dyno=web.1 connect=0ms service=288ms status=200 bytes=590301 protocol=https
2019-10-15T13:22:10.852381+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=still-headland-77198.herokuapp.com request_id=4b503f0b-7ab5-4d40-8c9f-4b3564efc05c fwd="67.166.153.94" dyno=web.1 connect=0ms service=15ms status=200 bytes=1936 protocol=https
2019-10-15T13:22:10.857839+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=still-headland-77198.herokuapp.com request_id=1e33ae5e-8909-44a9-b1b2-4672c75e8293 fwd="67.166.153.94" dyno=web.1 connect=0ms service=15ms status=200 bytes=1936 protocol=https
2019-10-15T13:22:10.880865+00:00 heroku[router]: at=info method=GET path="/sockjs-node/info?t=1571145724205" host=still-headland-77198.herokuapp.com request_id=a19d69ab-9d04-46a6-9bff-9914734597e0 fwd="67.166.153.94" dyno=web.1 connect=0ms service=4ms status=200 bytes=363 protocol=https

EDIT #3 (Full sanity check with logs): (btw gits is just an alias for git status I use.

 react-minesweeper ruby-2.6.3 git:(master) gits
On branch master
Your branch is up-to-date with 'origin/master'.

nothing to commit, working directory clean
 react-minesweeper ruby-2.6.3 git:(master) git commit --allow-empty
[master d86dc63] Another test for deploying.
 react-minesweeper ruby-2.6.3 git:(master) gits
On branch master
Your branch is ahead of 'origin/master' by 1 commit.
  (use "git push" to publish your local commits)

nothing to commit, working directory clean
 react-minesweeper ruby-2.6.3 git:(master) heroku maintenance:on 
Enabling maintenance mode for ⬢ still-headland-77198... done
 react-minesweeper ruby-2.6.3 git:(master) git push heroku master
Counting objects: 1, done.
Writing objects: 100% (1/1), 194 bytes | 0 bytes/s, done.
Total 1 (delta 0), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> React.js (create-react-app) multi app detected
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
remote: =====> Detected Framework: Multipack
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
remote: =====> Detected Framework: Node.js
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        NODE_VERBOSE=false
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  10.16.3
remote:        engines.npm (package.json):   6.11.3
remote:        engines.yarn (package.json):  unspecified (use default)
remote:        
remote:        Resolving node version 10.16.3...
remote:        Downloading and installing node 10.16.3...
remote:        Bootstrapping npm 6.11.3 (replacing 6.9.0)...
remote:        npm 6.11.3 installed
remote:        Resolving yarn version 1.x...
remote:        Downloading and installing yarn (1.19.1)...
remote:        Installed yarn 1.19.1
remote:        
remote: -----> Restoring cache
remote:        Cached directories were not restored due to a change in version of node, npm, yarn or stack
remote:        Module installation may take longer for this build
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules (yarn.lock)
remote:        yarn install v1.19.1
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info fsevents@2.0.7: The platform "linux" is incompatible with this module.
remote:        info "fsevents@2.0.7" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info fsevents@1.2.9: The platform "linux" is incompatible with this module.
remote:        info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning " > bootstrap@4.3.1" has unmet peer dependency "jquery@1.9.1 - 3".
remote:        warning " > bootstrap@4.3.1" has unmet peer dependency "popper.js@^1.14.7".
remote:        warning " > react-timer-hook@1.1.7" has incorrect peer dependency "react-dom@16.8.0".
remote:        [4/4] Building fresh packages...
remote:        Done in 45.13s.
remote:        
remote: -----> Build
remote:        Running build (yarn)
remote:        yarn run v1.19.1
remote:        $ GENERATE_SOURCEMAP=false react-scripts build
remote:        Creating an optimized production build...
remote:        Compiled successfully.
remote:        
remote:        File sizes after gzip:
remote:        
remote:          55.22 KB  build/static/js/2.51ce75d4.chunk.js
remote:          22.12 KB  build/static/css/2.56d65a16.chunk.css
remote:          7.21 KB   build/static/js/main.507a084d.chunk.js
remote:          882 B     build/static/css/main.edf481ed.chunk.css
remote:          728 B     build/static/js/runtime-main.135745f3.js
remote:        
remote:        The project was built assuming it is hosted at the server root.
remote:        You can control this with the homepage field in your package.json.
remote:        For example, add this to build it for GitHub Pages:
remote:        
remote:          "homepage" : "http://myname.github.io/myapp",
remote:        
remote:        The build folder is ready to be deployed.
remote:        You may serve it with a static server:
remote:        
remote:          yarn global add serve
remote:          serve -s build
remote:        
remote:        Find out more about deployment here:
remote:        
remote:          
remote:        
remote:        Done in 29.10s.
remote:        
remote: -----> Pruning devDependencies
remote:        yarn install v1.19.1
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info fsevents@2.0.7: The platform "linux" is incompatible with this module.
remote:        info "fsevents@2.0.7" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info fsevents@1.2.9: The platform "linux" is incompatible with this module.
remote:        info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning " > bootstrap@4.3.1" has unmet peer dependency "jquery@1.9.1 - 3".
remote:        warning " > bootstrap@4.3.1" has unmet peer dependency "popper.js@^1.14.7".
remote:        warning " > react-timer-hook@1.1.7" has incorrect peer dependency "react-dom@16.8.0".
remote:        [4/4] Building fresh packages...
remote:        warning Ignored scripts due to flag.
remote:        Done in 10.39s.
remote:        
remote: -----> Caching build
remote:        - yarn cache
remote:        
remote: -----> Build succeeded!
remote:  !     Unmet dependencies don't fail yarn install but may cause runtime issues
remote:        https://github.com/npm/npm/issues/7494
remote: 
remote: =====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
remote: =====> Detected Framework: React.js (create-react-app)
remote:        Using existing `static.json`
remote:        Enabling runtime environment variables
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
remote: =====> Detected Framework: Static HTML
remote:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
remote:                                  Dload  Upload   Total   Spent    Left  Speed
remote: 100  838k  100  838k    0     0  9983k      0 --:--:-- --:--:-- --:--:-- 9983k
remote: -----> Installed directory to /app/bin
remote: Using release configuration from last framework (Static HTML).
remote: -----> Node.js app detected
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        NODE_VERBOSE=false
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  10.16.3
remote:        engines.npm (package.json):   6.11.3
remote:        engines.yarn (package.json):  unspecified (use default)
remote:        
remote:        Resolving node version 10.16.3...
remote:        Downloading and installing node 10.16.3...
remote:        Bootstrapping npm 6.11.3 (replacing 6.9.0)...
remote:        npm 6.11.3 installed
remote:        Resolving yarn version 1.x...
remote:        Downloading and installing yarn (1.19.1)...
remote:        Installed yarn 1.19.1
remote:         !     node_modules checked into source control
remote:               https://blog.heroku.com/node-habits-2016#9-only-git-the-important-bits
remote:        
remote:        
remote: -----> Restoring cache
remote:        Cached directories were not restored due to a change in version of node, npm, yarn or stack
remote:        Module installation may take longer for this build
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules (yarn.lock)
remote:        yarn install v1.19.1
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info fsevents@2.0.7: The platform "linux" is incompatible with this module.
remote:        info "fsevents@2.0.7" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info fsevents@1.2.9: The platform "linux" is incompatible with this module.
remote:        info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning " > bootstrap@4.3.1" has unmet peer dependency "jquery@1.9.1 - 3".
remote:        warning " > bootstrap@4.3.1" has unmet peer dependency "popper.js@^1.14.7".
remote:        warning " > react-timer-hook@1.1.7" has incorrect peer dependency "react-dom@16.8.0".
remote:        [4/4] Building fresh packages...
remote:        Done in 48.75s.
remote:        
remote: -----> Build
remote:        Running build (yarn)
remote:        yarn run v1.19.1
remote:        $ GENERATE_SOURCEMAP=false react-scripts build
remote:        Creating an optimized production build...
remote:        Compiled successfully.
remote:        
remote:        File sizes after gzip:
remote:        
remote:          55.22 KB  build/static/js/2.51ce75d4.chunk.js
remote:          22.12 KB  build/static/css/2.56d65a16.chunk.css
remote:          7.21 KB   build/static/js/main.507a084d.chunk.js
remote:          882 B     build/static/css/main.edf481ed.chunk.css
remote:          728 B     build/static/js/runtime-main.135745f3.js
remote:        
remote:        The project was built assuming it is hosted at the server root.
remote:        You can control this with the homepage field in your package.json.
remote:        For example, add this to build it for GitHub Pages:
remote:        
remote:          "homepage" : "http://myname.github.io/myapp",
remote:        
remote:        The build folder is ready to be deployed.
remote:        You may serve it with a static server:
remote:        
remote:          yarn global add serve
remote:          serve -s build
remote:        
remote:        Find out more about deployment here:
remote:        
remote:         
remote:        
remote:        Done in 29.96s.
remote:        
remote: -----> Pruning devDependencies
remote:        yarn install v1.19.1
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        info fsevents@2.0.7: The platform "linux" is incompatible with this module.
remote:        info "fsevents@2.0.7" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        info fsevents@1.2.9: The platform "linux" is incompatible with this module.
remote:        info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning " > bootstrap@4.3.1" has unmet peer dependency "jquery@1.9.1 - 3".
remote:        warning " > bootstrap@4.3.1" has unmet peer dependency "popper.js@^1.14.7".
remote:        warning " > react-timer-hook@1.1.7" has incorrect peer dependency "react-dom@16.8.0".
remote:        [4/4] Building fresh packages...
remote:        warning Ignored scripts due to flag.
remote:        Done in 10.38s.
remote:        
remote: -----> Caching build
remote:        - yarn cache
remote:        
remote: -----> Build succeeded!
remote:  !     Unmet dependencies don't fail yarn install but may cause runtime issues
remote:        https://github.com/npm/npm/issues/7494
remote: 
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote: 
remote: -----> Compressing...
remote:        Done: 64.6M
remote: -----> Launching...
remote:        Released v11
remote:        https://still-headland-77198.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/still-headland-77198.git
   a654077..d86dc63  master -> master
 react-minesweeper ruby-2.6.3 git:(master) heroku maintenance:off
Disabling maintenance mode for ⬢ still-headland-77198... done
aarona
  • 35,986
  • 41
  • 138
  • 186
  • Does it work as you want when you run `yarn build` locally ? – giuseppedeponte Oct 13 '19 at 07:30
  • @giuseppedeponte I ran `yarn build` locally and under the `build` directory, I have a `static` and a `src` folder. The `src` folder looks like my code (including Typescript files) but the static folder looks like it has compressed js/css files in it. Do you think its possible my app is running the production files but the `src` folder is left over after the compression? Why isn't that folder being deleted after the build? – aarona Oct 13 '19 at 23:45
  • Judging from the console output, I don't think your src folder is being deployed. Only the build folder is normally deployed as it contains the transpiled and browser-understandable version of your code. Anyway, you can verify that in your browser inspector while on the online page. You will have the list of all the files your app use. – giuseppedeponte Oct 14 '19 at 05:43
  • Also you can check out these docs to see if everything is fine with your deployment: https://github.com/mars/create-react-app-buildpack & https://blog.heroku.com/deploying-react-with-zero-configuration – giuseppedeponte Oct 14 '19 at 05:45
  • I'm following the steps taken by the buildpack documentation and if you inspect the project, you can see the code isn't minimized and easily readable. Here, you can see the project I created from scratch using the Quick Guide: https://heroku-deploy-test-01.herokuapp.com/ Use Chrome developer tools, go to the Sources tab and view the files under `static/js` you will see both `App.js` and `index.js` aren't compressed at all. – aarona Oct 14 '19 at 17:36
  • It seems fine, the files you see in the source tab are probably just the source maps. If you look at what actually get downloaded in your network inspector tab you will see that thes file are minified (for example: https://heroku-deploy-test-01.herokuapp.com/static/js/main.c80ede3f.chunk.js ) – giuseppedeponte Oct 15 '19 at 04:57
  • @giuseppedeponte I'm seeing that in the heroku logs now, thank you. I'm not sure that I want source maps available to the public though. If this were a client's website I feel they may think their application code isn't "secure" and that their intellectual property is compromised. – aarona Oct 15 '19 at 13:25
  • You can try setting this environment variable `GENERATE_SOURCEMAP=false` on heroku. cf https://create-react-app.dev/docs/advanced-configuration – giuseppedeponte Oct 15 '19 at 14:07

1 Answers1

3

By default Create-React-App has GENERATE_SOURCEMAP flag set to TRUE. It means that creating production build will generate additional source maps to your js files = you can see non-compiled code in Chrome's developer tools.

To fix that you should add GENERATE_SOURCEMAP=false to your envs on Heroku or add into package.json:

"scripts": {    
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
}

If it comes to deploying on Heroku then just make sure that your static.json (in root directory) looks something like this: https://github.com/mars/create-react-app-buildpack#web-server

{
  "root": "build/",
}

More information about this buildpack that you use: https://github.com/mars/create-react-app-buildpack

Done: 65M - this is a size of your deployment bundle along with Node.js and your small code. I think you shouldn't bother about that as this is normal situation.

Edit: If the solutions above don't work then please make sure that you serve the newest index.html with hashes in js imports. This article might be helpful: How to deploy a production react app to heroku

test
  • 401
  • 1
  • 5
  • 15
  • 1
    At first you said to set `GENERATE_SOUREMAP=true` in my heroku env vars but then in the `package.json` file you have it set to false. I used your `package.json` example as my solution and added a `static.json` file into the root directory. Despite all of this, I'm still seeing the development source files. I can edit my post and show a screen cap of what I'm seeing. – aarona Oct 15 '19 at 01:20
  • You're right. It should be `false`. I've edited my answer. – test Oct 15 '19 at 07:56
  • @aarona please, make sure again that `GENERATE_SOURCEMAP` is set to false. – test Oct 15 '19 at 07:57
  • ok here's my build script: `"build": "GENERATE_SOURCEMAP=false react-scripts build"` and the contents of my `/static.json` file: `{ "root": "build/" }`. Also, I'm deploying right now to test and this is in the logs: `$ GENERATE_SOURCEMAP=false react-scripts build`. However, it seems that I'm still getting those source maps. I tried viewing this with Firefox in case I just had some cached files but it looks like FF also has a webpack section with lists of files including the `node_modules` folder. See my second post edit. And also, thank very much for helping me with this. I appreciate it – aarona Oct 15 '19 at 13:31
  • If you'd like to see the entire code base of my `create-react-app` you can find it here: https://github.com/aarona/react-minesweeper – aarona Oct 15 '19 at 13:32
  • It looks fine. Are you sure that you deployed new changes to heroku after adding that flag? – test Oct 15 '19 at 15:51
  • Yes. I can even do a `git commit --allow-empty`. I'll do it again for good measure. I'll add another edit to the post with that command, the push to heroku and the full log of the deployment. – aarona Oct 15 '19 at 17:48
  • What's your take on this question: https://stackoverflow.com/questions/51984146/how-to-disable-source-maps-for-react-js-application . Looks like some wrong answers there but do you think I may need to `eject` the build? I'd like to avoid that but it seems like that might be a possible solution. Am I correct in saying that this comes down to configuring webpack? – aarona Oct 15 '19 at 17:58
  • Apparently, I might have to eject my build tools to get this to work but doesn't seem ideal. They're saying this is something you should be able to do, but it doesn't work and their response is "people can hack you anyway and look at your code so don't bother" which seems like a terribly dismissive answer to this. See this link: https://spectrum.chat/create-react-app/general/minifying-uglifying-create-react-app-build~74138ac9-ce22-4a3d-bc62-060a26f3c0ef – aarona Oct 15 '19 at 20:16
  • You don't have to. Try to run `build` command with that flag locally and check if files with `.map` extension will be generated. I'm pretty sure that there's some misconfiguration on heroku side rather than on create-react-app.Take a look on your index.html on Heroku. There's no hash for js files: `````` so I guess you serve static index.html instead of deploying generated one by CRA. – test Oct 17 '19 at 17:52
  • 1
    You're right! Also, as soon as I read your comment, it confirmed someone else's advice when I posted this as an issue on the create-react-app github. Ok, found this: https://medium.com/jeremy-gottfrieds-tech-blog/tutorial-how-to-deploy-a-production-react-app-to-heroku-c4831dfcfa08 . This worked! I'm going to +1 and mark your answer as correct, but it would be great if you could edit your answer with the needed info or possible the url for anyone who finds this question that's dealing with this same issue. – aarona Oct 18 '19 at 03:16