1

My current project is having trouble building in the Netlify platform. I am able to build my app locally just fine and host it through gh-pages, but when I try to build the same app, I run into this error.

Netlify Deploy Log

11:10:03 PM: Failed to compile.
11:10:03 PM: 
11:10:03 PM: ./src/pages/Mortgage.js
11:10:03 PM: Cannot find file '../hooks/UseWindowSize.js' in './src/pages'.

Current Folder Structure

src
--hooks
----UseWindowSize.js
--pages
----Home.js
----Mortgage.js

Any idea what the issue might be?

Improve this question
4
  • 1
    Is there a specific reason you aren't building on your dev machine then pushing that to Netlify? Might be easier depending on situation. Commented May 12, 2021 at 6:20
  • 1
    This is my first time using Netlify and I was interested in using their auto deploy upon git repo changes, I'll look into just uploading the build folder directly. Though I would like to understand why it is not working in the first place. Commented May 12, 2021 at 6:21
  • 1
    Could you please share the link of the repo here (if it's public)? It will help to debug. @Sirivs Commented May 12, 2021 at 6:27
  • 1
    Based on the error messages one possible problem is the path through the file structure is different based on which directory you are running the build command from which is changed by Netlify. Maybe use node's path.join with __dirname digitalocean.com/community/tutorials/nodejs-how-to-use__dirname Commented May 12, 2021 at 6:35

2 Answers 2

Reset to default
1

This is how I managed to get it working.

I added the site on Netlify by linking it via a Github repository. Then inside on Netlify, I did the flowing:

  1. Click on the Sites menu link and select the site you would like to deploy
  2. To access the Settings, click on either:
    • The Site Settings button - is located in the first block/widget below the menu
    • Deploys in the menu next to Site Overview then click the Deploy setting button - located in the first block/widget below the menu
  3. Below the first block/widget click the link Build & deploy - located in the left side navigation aside
  4. In the Build settings widget block, click the Edit settings button.
    • Change Base directory to ./
    • Change Build command to npm run build
    • Change Publish directory to ./build
  5. Scroll down to Environment variables and add the key PRODUCTION, set the value of PRODUCTION to true

Retry your build to see if the configuration worked.

Side note: It's a fresh create react app react install, no 3rd party librarys yet.

Happy Coding =)

Pro Tip - create a netlify.toml file in the root of your project and add the following:

# Production context:
# All deploys from the main repository branch
# will inherit these settings.
[context.production]
  command = "npm run build"
  [context.production.environment]
    PRODUCTION = "true"

Ive noticed that using a boolean value as a string works but if you use it like normal the build breaks

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

To be honest, using Vercel with React is way easier, and it's also better. Push project onto a repository, go to vercel's site, login with Github, and choose your repository and it does 95% for you. Netlify also has some problems with React-router, so Vercel is over all a clear winner.

Improve this answer

2 Comments

This question was asked for Netlify. While using an alternative like Vercel would definitely work, what if your can't change the design architecture due to some restraint. Because if 3rd party packages are an issue there its best you find packages that work or you create a simple flow to route your application using a Global State Provider coupled with a Consumer - Create react App has documentation that helps solve "Basic functionality" when you need to deal with routing and Netlify has template solutions that include routing so you could use that to get an idea of how to achieve this.
As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.