Build exceeded maximum allowed runtime

[annalikesherself]

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: GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env
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

[coelmay]

Hi @annalikesherself

This line from the log interests me.

@annalikesherself

Starting the development server…

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?

[annalikesherself]

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?

[annalikesherself]

{

  "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"

    ]

  }

}

[coelmay]

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

[Support Guide] Can I run a web server, HTTP listener, and/or database at Netlify?

Last reviewed by Netlify Support on December 2022 How do I run a server/database at Netlify? We often get questions about how to run a specific backend server or database at Netlify. Examples of these types of questions include: How to I get my node HTTP listener to respond to requests? How do I start Mongo/MySQL/<insert-some-database-here> running on the server? How can I SSH into my website? We are here today to answer these questions - and the answer is: you can’t! What do you m…

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

[Support Guide] Compiled Build and Deploy Resources -- start here!

We want to help you build and deploy your site as easily as possible. Our team has written numerous support guides on frequently encountered problems during builds, build/deploy behaviour, drag and drop deploys, and more. In an effort to streamline your searching, we have compiled a list of our Support Guides related to builds and deploys. Each guide contains a ton of useful debugging tips that can likely help you solve your problem. Troubleshooting and high-level debugging Frequently encounte…

[annalikesherself]

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?

[coelmay]

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;

[annalikesherself]

It worked! Thank you so much!!