WordPress Build Failed on Netlify but builds locally

amresha · October 26, 2020, 4:55pm

I need advice to debug deploy Netlify App

Its building locally but I am unable to build on Netlify please advise.

AaronP · October 26, 2020, 5:35pm

Your request is taking longer than 30s and there is a catch (in your plugin?) that throws an error, you could try increasing this as suggested in the error

amresha · October 26, 2020, 7:57pm

Thanks, @AaronP can you guide how should I increase the time?

AaronP · October 26, 2020, 9:21pm

I’ve been dabbling around but not sure if it works since I do not know your environment variables.
Could you try this in the gatsby config file?

    {
  resolve: "gatsby-source-wordpress-experimental",
  options: {
    schema: {
      timeout: 9999999,
    },
    debug: {
      graphql: {
        copyHtmlResponseOnError: true,
      },
    },
  },
},

Note that is also says:

amresha · October 26, 2020, 9:57pm

I updated the above code, I think it started building but then I got the below build error:

12:48:32 AM: failed Building production JavaScript and CSS bundles - 44.382s
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: Module build failed (from …/node_modules/gatsby-plugin-sass/node_modules/sass-loader/dist/cjs.js):
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: Module build failed (from …/node_modules/gatsby-plugin-sass/node_modules/sass-loader/dist/cjs.js):
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: Module build failed (from …/node_modules/gatsby-plugin-sass/node_modules/sass-loader/dist/cjs.js):
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: Module build failed (from …/node_modules/gatsby-plugin-sass/node_modules/sass-loader/dist/cjs.js):
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: Module build failed (from …/node_modules/gatsby-plugin-sass/node_modules/sass-loader/dist/cjs.js):
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: Module build failed (from …/node_modules/gatsby-plugin-sass/node_modules/sass-loader/dist/cjs.js):
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: Module build failed (from …/node_modules/gatsby-plugin-sass/node_modules/sass-loader/dist/cjs.js):
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: Module build failed (from …/node_modules/gatsby-plugin-sass/node_modules/sass-loader/dist/cjs.js):
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: Module build failed (from …/node_modules/gatsby-plugin-sass/node_modules/sass-loader/dist/cjs.js):
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: Module build failed (from …/node_modules/gatsby-plugin-sass/node_modules/sass-loader/dist/cjs.js):
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: Module build failed (from …/node_modules/gatsby-plugin-sass/node_modules/sass-loader/dist/cjs.js):
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: error Generating JavaScript bundles failed
12:48:32 AM: border: 1px solid $gray-300;
12:48:32 AM: ^
12:48:32 AM: Undefined variable: “$gray-300”.
12:48:32 AM: in /opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss (line 7, column 21)
12:48:32 AM: not finished Generating image thumbnails - 44.709s
12:48:33 AM: error Command failed with exit code 1.
12:48:33 AM: info Visit yarn run | Yarn for documentation about this command.
12:48:33 AM: error Command failed.

AaronP · October 26, 2020, 10:05pm

So it definitely loves complaining about “Undefined variable: “$gray-300”.” haha!

Im not an expert but in your colors.sccs file you define gray but not gray-300? Maybe just try using gray for now to see it build, I know theres post css things that you can do -light and -darker or the -300 -700 stuff but maybe thats not working here if youve attempted to set that up?

amresha · October 26, 2020, 10:20pm

I searched for “$gray-300” code in my source files but I didn’t find it. It’s referring to inside node modules and plugins. Such as /node_modules/gatsby-plugin-sass/node_modules/sass-loader/dist/cjs.js and
/opt/build/repo/node_modules/@wordpress/block-library/src/calendar/style.scss

but when I access these files there is no such line of code there.

AaronP · October 27, 2020, 12:45am

EDIT: After cloning your repo I had to go into packages/gatsby-woocommerce-theme, in there I can see a package json, that references bootstrap, and it looks like the project is using the bootstrap scss variables suchas gray-300.
This lead me to believe that either bootstrap isn’t being installed on build or the files aren’t being accessed.

I’ve not worked with a Wordpress theme before but it does look quite nested? Theres a package json in 3 of the top level folders?

Do you mine stating your build command, publish directory, and base directory set in the netlify UI for this site? Thanks!

Editing as I go: While working locally, I have realised I need to go into each folder to npm install each package json, this is probably an issue that the buildbots are running into too. (I am off to bed, will try to check in tomorrow, try to look into this area / ensure the Wordpress plugins were added correctly etc. Maybe someone with Wordpress experience would help in the meantime)

amresha · October 27, 2020, 8:00am

Thanks, @AaronP for checking my repo. Below are my build settings:

perry · October 30, 2020, 7:28pm

hey amresha, any progress on this so far? Not sure if you are still looking into this @AaronP?

AaronP · October 30, 2020, 9:38pm

Hey, been a bit busy. I managed to build this locally by npm installing all 3 package jsons before building. Won’t have my laptop to test until Monday for a netlify build though!

luke · November 3, 2020, 7:03am

Hi, @amresha. It appears you resolved the issue with the site build not working at Netlify.

If there are other questions or if you feel like to sharing the solution you found here, please reply again anytime.

Topic		Replies	Views
Local build was successful but build at Netlify is not working Support building , deployment , gatsby	2	2083	April 25, 2020
Gatsby Build Error "TypeError: Unexpected response from worker: undefined" Support building , gatsby	5	2563	June 21, 2020
Gatsby builds only failing on Netlify Support deployment , git , gatsby	1	1875	November 25, 2019
[Support Guide] Frequently encountered problems during builds Support Guides support-guide	14	67015	November 17, 2022
Local build was successful but build at Netlify is not working Support building , gatsby	1	2911	April 24, 2020

WordPress Build Failed on Netlify but builds locally

Related topics