Local build looks very different from build version

atian · January 5, 2021, 6:16pm

I’m building a website and the local build using npm run develop looks very different from the production build when I npm run build and push it to github.

Here’s what it looks like on local where everything works fine: NetlifyDEBUG.mov - Google Drive

https://staging.innovativedesign.club

The website displays some really strange behaviors. If you go to either one of the urls above, it will take you to what is supposed to be our home screen but the style will be broken. The navbar and footer will be fine. However, if you go to https://staging.innovativedesign.club/events or any of the other sub pages DIRECTLY (going to the /page link, not just clicking on the navbar) [ about, decals, events, chapters ] the Footer will be broken.

The only difference is the inclusion and use of the material ui library, specifically makeStyles from
import { makeStyles } from ‘@material-ui/core/styles’;
For debugging, the

Home page at the link above imports, calls and uses makeStyles
Apply page at https://staging.innovativedesign.club/apply imports, calls but doesn’t use makeStyles
Client page at https://staging.innovativedesign.club/clients doesn’t import makeStyles

Any help is appreciated. I’ve tried deleting public and cache and redeploying multiple times.

atian · January 5, 2021, 6:30pm

I will be actively trying to debug the website so if anything I said above doesn’t make sense let me know. At the core, the issue is the difference between local build and development build and the super inconsistent behavior of the website when deployed.

perry · January 5, 2021, 7:23pm

hi @atian, i can see that you are describing - the video was helpful, thanks.

can you post your most recent deploy log? i want to make sure you are actually deploying correctly.

atian · January 5, 2021, 7:37pm

2:22:12 PM: Build ready to start

2:22:13 PM: build-image version: 8e315e54bc4032a32e73290be556cde4f8348c12

2:22:13 PM: build-image tag: v2.8.2

2:22:13 PM: buildbot version: 7aa30f4805782ff59fecad56e0bfa4b63404839b

2:22:13 PM: No cache source specified, skip fetching cache

2:22:13 PM: Starting to prepare the repo for build

2:22:14 PM: No cached dependencies found. Cloning fresh repo

2:22:14 PM: git clone git@github.com:InnovativeDesign/innovativedesign.club

2:24:26 PM: Preparing Git Reference refs/heads/master

2:24:28 PM: Starting build script

2:24:29 PM: Installing dependencies

2:24:30 PM: Downloading and installing node v10.0.0…

2:24:30 PM: Downloading https://nodejs.org/dist/v10.0.0/node-v10.0.0-linux-x64.tar.xz…

2:24:31 PM: ######

2:24:31 PM: 9.6%

2:24:31 PM: ######################################################### 80.4%

2:24:31 PM: ##############################################################

2:24:31 PM: ########## 100.0%

2:24:31 PM: Computing checksum with sha256sum

2:24:31 PM: Checksums matched!

2:24:34 PM: Now using node v10.0.0 (npm v5.6.0)

2:24:34 PM: Attempting ruby version 2.3.6, read from environment

2:24:36 PM: Using ruby version 2.3.6

2:24:36 PM: Using PHP version 5.6

2:24:36 PM: Started restoring cached node modules

2:24:36 PM: Finished restoring cached node modules

2:24:37 PM: Installing NPM modules using NPM version 5.6.0

2:24:42 PM: npm WARN

2:24:42 PM: notice [SECURITY] decompress has the following vulnerability: 1 high. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:42 PM: npm WARN notice [SECURITY] yargs-parser has the following vulnerability: 1 low. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:43 PM: npm WARN notice [SECURITY] serve has the following vulnerabilities: 2 high, 2 moderate. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:45 PM: npm WARN notice [SECURITY] webpack-dev-server has the following vulnerability: 1 high. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:46 PM: npm WARN notice [SECURITY] yargs-parser has the following vulnerability: 1 low. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:46 PM: npm WARN notice [SECURITY] lodash has the following vulnerabilities: 3 high, 2 low. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:47 PM: npm WARN notice [SECURITY] bl has the following vulnerability: 1 high. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:47 PM: npm WARN notice [SECURITY] url-regex has the following vulnerability: 1 high. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:47 PM: npm WARN notice [SECURITY] minimist has the following vulnerability: 1 low. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:50 PM: npm WARN notice [SECURITY] js-yaml has the following vulnerabilities: 1 high, 1 moderate. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:51 PM: npm WARN notice [SECURITY] set-value has the following vulnerability: 1 high. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:52 PM: npm WARN notice [SECURITY] minimatch has the following vulnerability: 1 high. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:52 PM: npm WARN notice [SECURITY] yargs-parser has the following vulnerability: 1 low. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:52 PM: npm WARN notice [SECURITY] node-fetch has the following vulnerability: 1 low. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:53 PM: npm WARN notice [SECURITY] http-proxy has the following vulnerability: 1 high. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:53 PM: npm WARN notice [SECURITY] braces has the following vulnerability: 1 low. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:53 PM: npm WARN notice [SECURITY] yargs-parser has the following vulnerability: 1 low. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:53 PM: npm WARN notice [SECURITY] mem has the following vulnerability: 1 low. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:56 PM: npm WARN notice [SECURITY] open has the following vulnerability: 1 critical. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:56 PM: npm WARN notice [SECURITY] object-path has the following vulnerability: 1 high. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:57 PM: npm

2:24:57 PM: WARN

2:24:57 PM: notice [SECURITY] elliptic has the following vulnerability: 1 high. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:58 PM: npm WARN notice [SECURITY] lodash has the following vulnerability: 1 high. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:24:59 PM: npm WARN notice [SECURITY] dot-prop has the following vulnerability: 1 high. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:25:00 PM: npm WARN notice [SECURITY] minimatch has the following vulnerability: 1 high. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:25:00 PM: npm WARN notice [SECURITY] lodash has the following vulnerabilities: 3 high, 2 low. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:25:00 PM: npm WARN notice [SECURITY] acorn has the following vulnerability: 1 moderate. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:25:02 PM: npm WARN notice [SECURITY] tunnel-agent has the following vulnerability: 1 moderate. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:25:14 PM: > sharp@0.20.8 install /opt/build/repo/node_modules/sharp

2:25:14 PM: > (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

2:25:15 PM: info

2:25:15 PM: sharp

2:25:15 PM: Detected globally-installed libvips v8.6.2

2:25:15 PM: info

2:25:15 PM: sharp Building from source via node-gyp

2:25:17 PM: make: Entering directory `/opt/build/repo/node_modules/sharp/build’

2:25:17 PM: TOUCH Release/obj.target/libvips-cpp.stamp

2:25:17 PM: CXX(target) Release/obj.target/sharp/src/common.o

2:25:20 PM: CXX(target) Release/obj.target/sharp/src/metadata.o

2:25:21 PM: CXX(target) Release/obj.target/sharp/src/stats.o

2:25:23 PM: CXX(target) Release/obj.target/sharp/src/operations.o

2:25:26 PM: CXX(target) Release/obj.target/sharp/src/pipeline.o

2:25:31 PM: CXX(target) Release/obj.target/sharp/src/sharp.o

2:25:33 PM: CXX(target) Release/obj.target/sharp/src/utilities.o

2:25:35 PM: SOLINK_MODULE(target) Release/obj.target/sharp.node

2:25:35 PM: COPY Release/sharp.node

2:25:35 PM: make: Leaving directory `/opt/build/repo/node_modules/sharp/build’

2:25:35 PM: > node-sass@4.13.1 install /opt/build/repo/node_modules/node-sass

2:25:35 PM: > node scripts/install.js

2:25:36 PM: Downloading binary from https://github.com/sass/node-sass/releases/download/v4.13.1/linux-x64-64_binding.node

2:25:36 PM: Download complete

2:25:36 PM: Binary saved to /opt/build/repo/node_modules/node-sass/vendor/linux-x64-64/binding.node

2:25:36 PM: Caching binary to /opt/buildhome/.npm/node-sass/4.13.1/linux-x64-64_binding.node

2:25:37 PM: > @fortawesome/fontawesome-free@5.15.1 postinstall /opt/build/repo/node_modules/@fortawesome/fontawesome-free

2:25:37 PM: > node attribution.js

2:25:37 PM: Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com

2:25:37 PM: License - Free License | Font Awesome (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)

2:25:37 PM: > core-js@2.6.11 postinstall /opt/build/repo/node_modules/core-js

2:25:37 PM: > node -e “try{require(‘./postinstall’)}catch(e){}”

2:25:37 PM: Thank you for using core-js ( GitHub - zloirock/core-js: Standard Library ) for polyfilling JavaScript standard library!

2:25:37 PM: The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:

2:25:37 PM: > https://opencollective.com/core-js

2:25:37 PM: > https://www.patreon.com/zloirock

2:25:37 PM: Also, the author of core-js ( zloirock (Denis Pushkarev) · GitHub ) is looking for a good job -)

2:25:37 PM: > core-js-pure@3.8.1 postinstall /opt/build/repo/node_modules/core-js-pure

2:25:37 PM: > node -e “try{require(‘./postinstall’)}catch(e){}”

2:25:37 PM: > jss@9.8.7 postinstall /opt/build/repo/node_modules/mdbreact/node_modules/jss

2:25:37 PM: > node -e “console.log(‘\u001b[35m\u001b[1mLove JSS? You can now support us on open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/jss/donate\u001b[0m’)”

2:25:37 PM: Love JSS? You can now support us on open collective:

2:25:37 PM: > Contribute to JSS - Open Collective

2:25:38 PM: > node-sass@4.13.1 postinstall /opt/build/repo/node_modules/node-sass

2:25:38 PM: > node scripts/build.js

2:25:38 PM: Binary found at /opt/build/repo/node_modules/node-sass/vendor/linux-x64-64/binding.node

2:25:38 PM: Testing binary

2:25:38 PM: Binary is fine

2:25:38 PM: > cwebp-bin@4.0.0 postinstall /opt/build/repo/node_modules/cwebp-bin

2:25:38 PM: > node lib/install.js

2:25:39 PM: cwebp pre-build test passed successfully

2:25:39 PM: > pngquant-bin@3.1.1 postinstall /opt/build/repo/node_modules/pngquant-bin

2:25:39 PM: > node lib/install.js

2:25:40 PM: pngquant pre-build test passed successfully

2:25:40 PM: > highlight.js@9.18.5 postinstall /opt/build/repo/node_modules/highlight.js

2:25:40 PM: > node deprecated.js

2:25:40 PM: ----------------------------------

2:25:40 PM:

2:25:40 PM: Verion 9 of Highlight.js has reached EOL. It will no longer

2:25:40 PM: be supported or receive security updates in the future.

2:25:40 PM: Please upgrade to version 10 or encourage your indirect

2:25:40 PM: dependencies to do so.

2:25:40 PM: For more info:

2:25:40 PM:

2:25:40 PM: Version 9 EOL & End of Support (even for security issues) · Issue #2877 · highlightjs/highlight.js · GitHub

2:25:40 PM: highlight.js/VERSION_10_UPGRADE.md at main · highlightjs/highlight.js · GitHub

2:25:40 PM:

2:25:40 PM: ----------------------------------

2:25:40 PM: > jss@9.8.7 postinstall /opt/build/repo/node_modules/jss

2:25:40 PM: > node -e “console.log(‘\u001b[35m\u001b[1mLove JSS? You can now support us on open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/jss/donate\u001b[0m’)”

2:25:40 PM: (node:1320) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added. Use emitter.setMaxListeners() to increase limit

2:25:40 PM: Love JSS? You can now support us on open collective:

2:25:40 PM: > Contribute to JSS - Open Collective

2:25:44 PM: npm WARN

2:25:44 PM: InnovativeDesign@1.0.0 No repository field.

2:25:44 PM: npm WARN

2:25:44 PM: optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/fsevents):

2:25:44 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})

2:25:44 PM: added 2382 packages in 66.08s

2:25:44 PM: NPM modules installed

2:25:44 PM: Started restoring cached go cache

2:25:44 PM: Finished restoring cached go cache

2:25:44 PM: Installing Go version 1.10

2:25:54 PM: unset GOOS;

2:25:54 PM: unset GOARCH;

2:25:54 PM: export GOROOT=‘/opt/buildhome/.gimme_cache/versions/go1.10.linux.amd64’;

2:25:54 PM: export PATH=“/opt/buildhome/.gimme_cache/versions/go1.10.linux.amd64/bin:${PATH}”;

2:25:54 PM: go version >&2;

2:25:54 PM: export GIMME_ENV=“/opt/buildhome/.gimme_cache/env/go1.10.linux.amd64.env”

2:25:54 PM: go version go1.10 linux/amd64

2:25:54 PM: Installing missing commands

2:25:54 PM: Verify run directory

2:25:54 PM: Executing user command: npm run build

2:25:54 PM: > InnovativeDesign@1.0.0 build /opt/build/repo

2:25:54 PM: > npm run build:admin && npm run build:site

2:25:54 PM: > InnovativeDesign@1.0.0 build:admin /opt/build/repo

2:25:54 PM: > cd admin && npm install && npm run build

2:26:00 PM: npm

2:26:00 PM: WARN notice [SECURITY] elliptic has the following vulnerability: 1 high. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:26:00 PM: npm WARN

2:26:00 PM: notice [SECURITY] lodash has the following vulnerabilities: 1 high, 1 low. Go here for more details: GitHub Advisory Database · GitHub - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

2:26:05 PM: > core-js@2.6.9 postinstall /opt/build/repo/admin/node_modules/core-js

2:26:05 PM: > node scripts/postinstall || echo “ignore”

2:26:06 PM: Thank you for using core-js ( GitHub - zloirock/core-js: Standard Library ) for polyfilling JavaScript standard library!

2:26:06 PM: The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:

2:26:06 PM: > https://opencollective.com/core-js

2:26:06 PM: > https://www.patreon.com/zloirock

2:26:06 PM: Also, the author of core-js ( zloirock (Denis Pushkarev) · GitHub ) is looking for a good job -)

2:26:06 PM: > uglifyjs-webpack-plugin@0.4.6 postinstall /opt/build/repo/admin/node_modules/uglifyjs-webpack-plugin

2:26:06 PM: > node lib/post_install.js

2:26:06 PM: npm WARN

2:26:06 PM: admin No description

2:26:06 PM: npm WARN admin No repository field.

2:26:06 PM: npm WARN admin No license field.

2:26:06 PM: npm

2:26:06 PM: WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):

2:26:06 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})

2:26:06 PM: added 664 packages in 11.329s

2:26:07 PM: > @ build /opt/build/repo/admin

2:26:07 PM: > webpack --config webpack.config.js

2:26:11 PM: Hash: 6c1115af96868eda3e48

2:26:11 PM: Version: webpack 3.12.0

2:26:11 PM: Time: 3451ms

2:26:11 PM: Asset Size Chunks Chunk Names

2:26:11 PM: admin.bundle.js 1.89 MB 0 [emitted] [big] main

2:26:11 PM: [2] ./admin.js 348 bytes {0} [built]

2:26:11 PM: [9] (webpack)/buildin/global.js 509 bytes {0} [built]

2:26:11 PM: + 8 hidden modules

2:26:11 PM: > InnovativeDesign@1.0.0 build:site /opt/build/repo

2:26:11 PM: > gatsby build

2:26:13 PM: success delete html and css files from previous builds — 0.015 s

2:26:13 PM: success open and validate gatsby-config — 0.008 s

2:26:13 PM: success copy gatsby files — 0.021 s

2:26:15 PM: success onPreBootstrap — 1.099 s

2:26:20 PM: success source and transform nodes — 5.208 s

2:26:20 PM: success building schema — 0.335 s

2:26:20 PM: success createLayouts — 0.010 s

2:26:20 PM: success createPages — 0.081 s

2:26:20 PM: success createPagesStatefully — 0.062 s

2:26:20 PM: success onPreExtractQueries — 0.005 s

2:26:21 PM: success update schema — 0.222 s

2:26:21 PM: success extract queries from components — 0.222 s

2:26:21 PM: The requested width “150px” for a resolutions field for

2:26:21 PM: the file /opt/build/repo/static/img/triangle.png

2:26:21 PM: was wider than the actual image width of 60px!

2:26:21 PM: If possible, replace the current image with a larger one.

2:26:21 PM: The requested width “150px” for a resolutions field for

2:26:21 PM: the file /opt/build/repo/static/img/sp19/headphones.png

2:26:21 PM: was wider than the actual image width of 141px!

2:26:21 PM: If possible, replace the current image with a larger one.

2:26:21 PM: The requested width “150px” for a resolutions field for

2:26:21 PM: the file /opt/build/repo/static/img/fa20/web assets/ice drink.png

2:26:21 PM: was wider than the actual image width of 146px!

2:26:21 PM: If possible, replace the current image with a larger one.

2:28:15 PM: success run graphql queries — 114.346 s

2:28:15 PM: success write out page data — 0.005 s

2:28:15 PM: success write out redirect data — 0.001 s

2:32:57 PM: info bootstrap finished - 405.289 s

2:32:57 PM: success onPostBootstrap — 0.002 s

2:33:16 PM: success Building CSS — 19.600 s

2:33:54 PM: success Building production JavaScript bundles — 37.407 s

2:34:01 PM: PROPS CHILDREN

2:34:01 PM: [Function: children]

2:34:01 PM: PROPS CHILDREN

2:34:01 PM: { allMarkdownRemark: { edges: [ [Object] ] } }

2:34:01 PM: PROPS CHILDREN

2:34:01 PM: [Function: children]

2:34:01 PM: PROPS CHILDREN

2:34:01 PM: { allMarkdownRemark: { edges: [ [Object] ] } }

2:34:01 PM: PROPS CHILDREN

2:34:01 PM: [Function: children]

2:34:01 PM: PROPS CHILDREN

2:34:01 PM: { allMarkdownRemark: { edges: [ [Object] ] } }

2:34:01 PM: PROPS CHILDREN

2:34:01 PM: [Function: children]

2:34:01 PM: PROPS CHILDREN

2:34:01 PM: { allMarkdownRemark: { edges: [ [Object] ] } }

2:34:01 PM: PROPS CHILDREN

2:34:01 PM: [Function: children]

2:34:01 PM: PROPS CHILDREN

2:34:01 PM: { allMarkdownRemark: { edges: [ [Object] ] } }

2:34:01 PM: PROPS CHILDREN

2:34:01 PM: [Function: children]

2:34:01 PM: PROPS CHILDREN

2:34:01 PM: { allMarkdownRemark: { edges: [ [Object] ] } }

2:34:01 PM: PROPS CHILDREN

2:34:01 PM: [Function: children]

2:34:01 PM: PROPS CHILDREN

2:34:01 PM: { allMarkdownRemark: { edges: [ [Object] ] } }

2:34:01 PM: PROPS CHILDREN

2:34:01 PM: [Function: children]

2:34:01 PM: PROPS CHILDREN

2:34:01 PM: { allMarkdownRemark: { edges: [ [Object] ] } }

2:34:02 PM: PROPS CHILDREN