React build not working whereas working fine when I start the server locally - reactjs

I have a React project which runs fine when I do npm run start. All the elements load completely fine.
But when I create a build using npm run build, the resulting build when run would not load the elements.
In my package.json I have homepage also set like this:
"homepage": ".",
Also, there are no errors in console.
During compile time as well there are no warnings.
Any suggestions on what could I be missing or some steps I must try to find what could be going wrong?
I tried deleting the node_modules, clearing node cache and rebuilding but that too did not help
Thank you!

Related

how to run next js project in vs code?

I am doing a next js project with my friend. I want to run the project with vs code but when i run the commmand "yarn start", i get the following error:
There was a problem loading the local develop command. Gatsby may not be installed in your site's "node_modules" directory. Perhaps you
need to run "npm install"? You might need to delete your "package-lock.json" as well.
error Command failed with exit code 1.
I have done every thing to solve the problem but it is still there.I have re installed npm and gatsby.I have node installed but the problem is still there.I dont know how to fix it.Please guide me
I would highly recommend to delete the package-lock.json then navigate to the root folder of the project and run in the terminal "npm i", also make sure that You have created the nextjs project as in the guidance here -> https://nextjs.org/docs/api-reference/create-next-app

React app is failing to compile, it appears typescript not being transpiled to JS?

I am working on a react app with a couple of colleagues, and after the latest pull I am no longer able to compile the app, but my colleagues are not having any issues.
On my end the app fails to compile because some #material-ui components are displayed as missing in the node_modules/#material-ui directory. However, when I search the folder, I see the files there, they are just shown in typescript format instead of js. However, when comparing my working directory with a colleague's it appears there are also files completely missing on my end that exists on theirs.
For example, when the app fails to compile I see this:
Failed to Compile
./node_modules/#material-ui/core/TextField/TextField.js
Module not found: Can't resolve '../FilledInput' in
'..../node_modules/#material-ui/core/TextField'
When I search this folder, the file is there but labelled 'FilledInput.d.ts'.
Has anyone encountered something like this? I have recompiled the app, and deleted the branch and recloned from remote but the issue remains.
Thanks
Have you tried removing node_modules and installing dependencies again?
Does npm install give any peer dependency warnings? Does this help?
npm i #material-ui/core --save

When should you run the 'yarn start' command while working on a React project?

I'm having trouble finding much documentation on this command.
Say you are working on another person's React app, have unzipped it to your desktop and run 'yarn install' to get the dependencies. You are about to make some additions to the code. Is this when you run 'yarn start'?
I was given these instructions:
"Go to your terminal and navigate to the root folder of the extension. Type yarn start, this will make a build folder within the root folder. Stop that operation (on a mac it’s ctrl-c) and then build the updated version."
To me, this sounds sort of like I'm supposed to make the edits, then run 'yarn start', stop the operation and run the build command in quick succession. However, I was under the impression 'yarn start' is what you run in the beginning, before you start working on the React code.
Can someone set this straight for me? At what point in this process does 'yarn start' come into play?
Thank you!
As per this,
Go to your terminal and navigate to the root folder of the extension. Type yarn start, this will make a build folder within the root folder. Stop that operation (on a mac it’s ctrl-c) and then build the updated version.
it is clear that your yarn start command is building your application.
Building your application means it bundles your js, css & assets files to a single chunk file which can be run in production.
Coming back to your question, when to run yarn start.
So whenever you done with your changes and ready to go live then you call this command which will give you a updated build folder for production.
It's a predefined command in your package.json
It will look like this:
in your package.json
{
"scripts": {
"start": "terminal go do something"
}
}

npm script error while trying to install react-router-dom

While working on my react project, I just tried to install react-router-dom and somehow it seems it erased all my scripts and modules. Now I cannot run the server again no matter what I do. I also cleaned working directories and even deleted the branch, but it still doesn't work at all..
and below is the error message when I hit 'npm start'.
Although I don't know why installing react-router-dom removed all my packages, I reinstalled node modules and now it works again. :)

AngularJS local build works dist build crashes browser

I'm afraid I don't have much to show and that's my issue. I have an angular app which works fine locally but crashes the browser when I deploy it. Used angularjs-generator to build it. The browser crashes when attempting to use the dist build. The biggest issue is that the JavaScript console doesn't show any errors before the browser crashes so I'm at a loss on how to debug this? I've confirmed everything is in the dist folder that should be.
If anyone has run into this or has suggestions on how to troubleshoot this, I'd appreciate it.
I think I have an idea. For me the yeoman angular generator crashed when I tried to perform 'grunt test' on so I was thinking that the problem you have was related. For me the reason was that there were some dependencies missing namely :
npm install grunt-karma --save-dev
npm install karma-phantomjs-launcher --save-dev
Hope this works for you

Resources