Anyone have any experience with this? Running yarn build completes the build but never exits the process, it just hangs... The same thing happens when i run npm run build
stars-app|master⚡ ⇒ yarn build
yarn build v0.27.5
$ react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
132.04 KB build/static/js/main.54f97667.js
24.93 KB build/static/css/main.43aab3e7.css
The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
Totally fine build, no errors. Yet the process never completes and just hangs... Ideas? There's nothing special about my package.json either. Also, building any other project completes fine so I know it's not my global yarn / npm packages... it is something with this particular project... Suggestions on how to even begin to troubleshoot this sort of thing?
Related
When I run command npm start it's giving me error
ERROR
gatsby develop
Start development server. Watches files, rebuilds, and hot reloads if
something changes
And when I run command gatsby build it's giving me this error:
gatsby can only be run for a gatsby site. Either the current
working directory does not contain a valid package.json or 'gatsby' is
not specified as a dependency
I tried to delete node_modules and install again but still giving me the same error. How can I fix this?
It seems that you are not running the commands in the proper folder.
npm start, gatsby develop or gatsby build must be triggered in the root of your Gatsby project, where the package.json is located.
Share more details about where and how are you trying to run npm start and even your project structure in order to know what's going on.
I'm using create-react-app. When I run npm start (react-scripts start) it continuously builds the changes for me and does it magic. But what is the output folder for that? I know when I build it manually where the files go.
I want to use firebase emulator to serve the current version (the continuous build) of my react all but I don't understand where's the output folder or how to achieve it.
You could try this package https://github.com/Nargonath/cra-build-watch
Install it and add the script to your package.json
{
"scripts": {
"watch": "cra-build-watch"
}
}
and run it
npm run watch
more info here
https://ibraheem.ca/writings/cra-write-to-disk-in-dev/
and if you go to the react repo issue linked in the article you would find more workarounds
tl;dr
run npm run build, not npm run start
More Detail
react-scripts start runs webpack-dev-server internally. As a default setting, webpack-dev-server serves bundled files from memory and does not write files in directory.
If you want to write files with webpack-dev-sever, you could set writeToDisk option to true in your dev server configuration.
However, I dont think this is what you want to serve on firebase emulator. Webpack-dev-server does not build optimal app for production, and you also need to use react-app-rewired to customize dev server configuration in cra template.
What you want to do is npm run build to run react-scripts build, which builds optimized production app in /build directory.
I am new on Next JS, I have created a small application. It is using API calls and more features.
During development, Using the command as npm run build I am able to create .next folder as build and using npm run start I am able to run that build.
Now the client is asking for build, so what should I send to him? Either complete project and ask him to do the
npm run build and npm run start (which I don't think so)
or only the .next folder. But how he will run this build?
Open package.json in your editor and add the following export script to the file:
"export": "npm run build && next export -o _static"
run this code in the terminal:
npm run export
Open _static folder and there is all of your file.
Some possible ways of sharing your project:
You can easily build and host your project with services like vercel or netlify. Easy and quick. Check out the vercel CLI in particular.
Your client can clone the git repo, install all dependencies, run build, and run start. This'll start a production server. Check here: https://nextjs.org/docs/api-reference/cli#production. Bad idea if your client is not a dev.
You can build your project and send the output to your client, which he/she can then view by spinning up a server (python simpleHTTPServer, Mamp). Also a bad idea if your client is not a dev.
Long story short, host your project somewhere and send them a production URL.
There is some license issue with one of the dependencies getting installed with react-scripts.
Project is created using CRA, so react-scripts is marked as dependency in package.json.
If I mark react-scripts as dev-dependency, since i don't need it for production, and install all the packages using 'npm install --production', I will not be able to use build script as react-scripts is not installed.
Browsing around this I see react-scripts should ideally be a Dev-dependency.
So just wanted to check if anyone can help here, how to use build script keeping react-scripts as Dev-dependency? is using webpack as a to bundle would be the only option here?
NPM and package.json initially were created for Node.js, which is intended to either run some scripts, or to run continuously. In this cases you might need some dependencies only when you are developing (for example some debuggers, or nodemon and so on), but don't need them in production.
In case of CRA, you don't need any dependencies on production, since you are building bunch of static files. Generally, you have some build pipeline, that will install all dependencies, build your static files and then transfer only built files to produciton (where only production dependencies may be installed again, or it can be another build step in pipeline). If you don't have such pipeline, you can install all dependencies, build on server and then delete node_modules.
I am trying to create a React.js App however once created and I try to run using 'yarn start' in the terminal I get this:
yarn run v1.12.3
$ react-scripts start
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-eslint": "10.0.1"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-eslint was detected higher up in the tree:
/Users/olliesaunderson/node_modules/babel-eslint (version: 9.0.0)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if /Users/olliesaunderson/node_modules/babel-eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls babel-eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-eslint.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I have tried following the steps suggested however none of this seems to works. I have also tried yarn add --exact react-scripts#3.0.1 and yarn cache clean
I fixed it!
So as the error shows, there is an existing folder of 'babel-eslint' somewhere higher up in my dependency tree. All I had to do was search in finder for that folder and then delete it, once done you can just 'yarn install' again and 'yarn start' then it should work :)
I have no idea where this other 'babel-eslint' folder came from btw...