Build exceeded maximum allowed runtime

Hello,

My react app successfully runs on my local but every time I build, I get this error “Build exceeded maximum allowed runtime” followed by an error about not being able to find a file that I’ve never had, and the file that’s missing is different each time. So I can’t tell if I’m missing a dependency / have a bug / or I’m truly running out of time.

annahangstefer.netlify.app

Thanks for your help!

Deploy log below:
4:55:12 PM: Starting the development server…
4:55:12 PM:
4:55:13 PM: Browserslist: caniuse-lite is outdated. Please run:
4:55:13 PM: npx browserslist@latest --update-db
4:55:13 PM: Why you should do it regularly:
4:55:13 PM: https://github.com/browserslist/browserslist#browsers-data-updating
4:57:41 PM: Compiled with warnings.
4:57:41 PM:
4:57:41 PM: src/components/ArtBenefit.js
4:57:41 PM: Line 2:8: ‘CSSBenefit’ is defined but never used no-unused-vars
4:57:41 PM: src/components/ArtBenefits.js
4:57:41 PM: Line 4:8: ‘CSSBenefits’ is defined but never used no-unused-vars
4:57:41 PM: src/components/ArtCommissions.js
4:57:41 PM: Line 4:8: ‘CSSCommissions’ is defined but never used no-unused-vars
4:57:41 PM: src/components/ArtHomePage.js
4:57:41 PM: Line 5:8: ‘Sky2Cropped’ is defined but never used no-unused-vars
4:57:41 PM: Line 7:8: ‘CSSArtHome’ is defined but never used no-unused-vars
4:57:41 PM: Line 8:8: ‘ChattCrop’ is defined but never used no-unused-vars
4:57:41 PM: src/components/ArtRandoms.js
4:57:41 PM: Line 4:8: ‘CSSArtRandom’ is defined but never used no-unused-vars
4:57:41 PM: src/components/Boquet.js
4:57:41 PM: Line 3:8: ‘CSSboquet’ is defined but never used no-unused-vars
4:57:41 PM: src/components/Boquets.js
4:57:41 PM: Line 4:8: ‘CSSboquets’ is defined but never used no-unused-vars
4:57:41 PM: src/components/Cabbages.js
4:57:41 PM: Line 3:8: ‘CSSCabbages’ is defined but never used no-unused-vars
4:57:41 PM: src/components/ChattanoogaCards.js
4:57:41 PM: Line 4:8: ‘CSSChatCards’ is defined but never used no-unused-vars
4:57:41 PM: src/components/ChristmasCards.js
4:57:41 PM: Line 4:8: ‘CSSChrisCards’ is defined but never used no-unused-vars
4:57:41 PM: src/components/Footer.js
4:57:41 PM: Line 2:8: ‘CSSFooter’ is defined but never used no-unused-vars
4:57:41 PM: src/components/Home.js
4:57:41 PM: Line 4:8: ‘ReactDOM’ is defined but never used no-unused-vars
4:57:41 PM: Line 8:8: ‘CSSHome’ is defined but never used no-unused-vars
4:57:41 PM: src/components/Landscape.js
4:57:41 PM: Line 3:8: ‘CSSlandscape’ is defined but never used no-unused-vars
4:57:41 PM: src/components/Landscapes.js
4:57:41 PM: Line 4:8: ‘CSSlandscapes’ is defined but never used no-unused-vars
4:57:41 PM: src/components/NavBar.js
4:57:41 PM: Line 3:8: ‘CSSNavBar’ is defined but never used no-unused-vars
4:57:41 PM: src/components/NavBarArt.js
4:57:41 PM: Line 3:8: ‘CSSNavBarArt’ is defined but never used no-unused-vars
4:57:41 PM: src/components/Ornament.js
4:57:41 PM: Line 3:8: ‘CSSOrnament’ is defined but never used no-unused-vars
4:57:41 PM: src/components/Ornaments.js
4:57:41 PM: Line 7:8: ‘CSSOrnaments’ is defined but never used no-unused-vars
4:57:41 PM: src/components/Owls.js
4:57:41 PM: Line 8:8: ‘CSSOwls’ is defined but never used no-unused-vars
4:57:41 PM: src/components/Project.js
4:57:41 PM: Line 2:8: ‘CSSProject’ is defined but never used no-unused-vars
4:57:41 PM: src/components/Resume.js
4:57:41 PM: Line 7:8: ‘CSSResume’ is defined but never used no-unused-vars
4:57:41 PM: src/components/ResumeProjects.js
4:57:41 PM: Line 4:8: ‘CSSresumeProjects’ is defined but never used no-unused-vars
4:57:41 PM: src/components/WoodSign.js
4:57:41 PM: Line 3:8: ‘CSSwood’ is defined but never used no-unused-vars
4:57:41 PM: src/components/WoodSigns.js
4:57:41 PM: Line 4:8: ‘CSSwoods’ is defined but never used no-unused-vars
4:57:41 PM: src/components/YogaHome.js
4:57:41 PM: Line 6:8: ‘CSSyoga’ is defined but never used no-unused-vars
4:57:41 PM: src/data.js
4:57:41 PM: Line 22:8: ‘Lavender’ is defined but never used no-unused-vars
4:57:41 PM: Line 26:8: ‘Red2’ is defined but never used no-unused-vars
4:57:41 PM: Line 53:8: ‘Ocean’ is defined but never used no-unused-vars
4:57:41 PM: Search for the keywords to learn more about each warning.
4:57:41 PM: To ignore, add // eslint-disable-next-line to the line before.
5:23:28 PM: Build exceeded maximum allowed runtime
5:23:30 PM: Failed to compile.
5:23:30 PM:
5:23:30 PM: Cannot read config file: /opt/build/repo/my-app/node_modules/eslint-config-react-app/base.js
5:23:30 PM: Error: ENOENT: no such file or directory, open ‘/opt/build/repo/my-app/node_modules/eslint-config-react-app/base.js’
5:23:30 PM: Referenced from: BaseConfig

Hi @annalikesherself

This line from the log interests me.

What is the command you are running? Are you running npm run build, npm run start or something else? Can you share the repository, or share the package.json?

I have “npm start” in the “build command” response. I assumed I’d answer whatever I use to start my server on local. Maybe that’s it?

{



  "name": "my-app",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "@ant-design/icons": "^4.6.4",

    "@craco/craco": "^6.3.0",

    "@testing-library/jest-dom": "^5.13.0",

    "@testing-library/react": "^11.2.7",

    "@testing-library/user-event": "^12.8.3",

    "antd": "^4.16.6",

    "babel-plugin-import": "^1.13.3",

    "craco-antd": "^1.19.0",

    "customize-cra": "^1.0.0",

    "less": "^4.1.1",

    "less-loader": "^10.0.1",

    "react": "^17.0.2",

    "react-app-rewired": "^2.1.8",

    "react-dom": "^17.0.2",

    "react-router-dom": "^5.2.0",

    "react-scripts": "4.0.1",

    "web-vitals": "^0.2.4"

  },

  "scripts": {

    "start": "craco start",

    "build": "craco build",

    "test": "craco test",

    "eject": "react-scripts eject"

  },

  "eslintConfig": {

    "extends": [

      "react-app",

      "react-app/jest"

    ]

  },

  "browserslist": {

    "production": [

      ">0.3%",

      "not ie 11",

      "not dead",

      "not op_mini all"

    ],

    "development": [

      "last 1 chrome version",

      "last 1 firefox version",

      ">0.3%",

      "not ie 11",

      "not dead",

      "not op_mini all"

    ]

  }

}

Netlify builds and deploys sites it doesn’t run server instances, so npm start (or npm run start) doesn’t work.

As there is a build script in the package.json try changing the build command to npm run build.

Check out CRA common configuration documentation and also

Thanks for the advise, coelmay! I changed the build command in build settings to CI=false npm run build, and kept my package.json build script “craco build”. I also added a netlify.toml file and it’s up. Only issue now is that my home page doesn’t have it’s background image. Everything else is perfect and all other images are there. Any advise?

The image is there, but the opacity is set to 1%. This is a common issue when building React projects it seems. Instead of using a percentage value, use a decimal value as per opacity - CSS: Cascading Style Sheets | MDN e.g.

/* Instead of */
opacity: 50%;

/* Use */
opacity: 0.5;
1 Like

It worked! Thank you so much!!