I've started learning Gatsby, every time I make any changes in src/pages folder, it gives an error that comes from .cache folder like this:
Generating development JavaScript bundle failed
ENOENT: no such file or directory, open '...\Gatsby\src\pages\someFile.js'
I am deleting .cache folder then re-running gatsby develop command and it works, but it takes more time.
Question: Is there any command to make it faster or easier?
Question: Is there any command to make it faster or easier?
gatsby clean does the trick. It removes the .cache and the /public folders. From Gatsby's docs:
At the root of a Gatsby site, wipe out the cache (.cache folder) and
public directories:
gatsby clean
This is useful as a last resort when your local project seems to have
issues or content does not seem to be refreshing. Issues this may fix
commonly include:
Stale data, e.g. this file/resource/etc. isn’t appearing GraphQL
error, e.g. this
GraphQL resource should be present but is not
Dependency issues, e.g. invalid version, cryptic errors in console,
etc.
Plugin issues, e.g. developing a local plugin and changes don’t
seem to be taking effect
I personally add my own commands in the package.json, like:
"scripts": {
// other scripts
"start": "gatsby clean && gatsby develop",
},
So every time I need to run a gatsby develop I run yarn start or npm run start instead, executing the gatsby clean command before.
Related
I'm building an app using create-react-app and completely messed up my dependencies. I tried deleting node-modules and package-lock.json, but I messed up package.json too, so that didn't work. When I tried it and ran npm start, it gave me an error saying that react-scripts wasn't recognized as an internal or external command, operable program, or batch file.
I, stupidly, didn't commit/push anything to git before messing everything up, so I can't just do git clone and get back to an older version of my project that actually worked. I just want a way to get my project's environment looking like I just hit create-react-app. Is that possible without just literally doing that and copying/pasting all of my source code files?
If you want exact same dependecies as create react up just copy its package.json, otherwise you cant do much thats why VCS are so important.
I'm trying to use a centralised package manager (pnpm) instead of the vanilla npm, because, I like having space on my hard drive. I'm just trying to get the project started and running into difficulty and there is very little online to actually guide me through starting a project with this package manager. Does anyone have experience getting this to work for React/React Native?
Any ideas would be very welcome.
I've tried two different ways of setting this up:
Created a new project with pnpx create-react-app my-app. This just did exactly what npx create-react-app would do, which includes installing over 200MB of modules I've already had on my system a million times over. I've checked the node_modules folder and none of the files are hard links, they are the modules themselves.
Created a new project without helper commands (i.e. touch App.js, index.js, index.html etc.) then pnpm i react... etc. This worked in a fashion, all of the node packages were links to my global store (in ~/), but then when I try pnpm start to get my server going, I get the error: Cannot find module ... /my-project/server.js. I do not have a server.js file, but then again, using regular npm and npx commands, I have never needed one.
I have used pnpm i server to see if I can get it working that way. Nothing. I'm relatively new to React, so I'm sure I've done something ridiculous, however regardless of how junior I am, I followed the official instructions and they haven't worked for me.
pnpm debug file says the following:
{
"0 debug pnpm:scope": {
"selected": 1,
"workspacePrefix": null
},
"1 error pnpm": {
"message": {
"errno": 1,
"code": "ELIFECYCLE",
"pkgid": "my-cv#1.0.0",
"stage": "start",
"script": "node server.js",
"pkgname": "my-cv"
},
"err": {
"name": "Error",
"message": "my-cv#1.0.0 start: `node server.js`\nExit status 1",
"code": "ELIFECYCLE",
"stack": "Error: my-cv#1.0.0 start: `node server.js`\nExit status 1\n at EventEmitter.<anonymous> (/usr/local/lib/node_modules/pnpm/lib/node_modules/#zkochan/npm-lifecycle/index.js:302:16)\n at EventEmitter.emit (events.js:200:13)\n at ChildProcess.<anonymous> (/usr/local/lib/node_modules/pnpm/lib/node_modules/#zkochan/npm-lifecycle/lib/spawn.js:55:14)\n at ChildProcess.emit (events.js:200:13)\n at maybeClose (internal/child_process.js:1021:16)\n at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)"
}
}
}
UPDATE: So I've managed to get it to work, I think... I got hold of all of the required packages that are used in npx create-react-app and put them inside package.json before executing pnpm i. However, aside from wondering whether this is possible without going to that amount of trouble, looking at the file structure, in addition to the aliases I have inside the node_modules folder, I seem to have a hidden folder .registry.npmjs.org. This is exactly the same as the one I have in my system root, that I assumed was the central store.
TLDR: It appears that despite pnpm appearing to work (aliases are created inside the node_modules folder), I still have duplicate packages on my system. Can anyone confirm whether this is the case?
I realise this is an old question now.... but it's still not adequately resolved (ideally, create-react-app should have a switch which allows it to use pnpm natively.... but that's for another day).
My solution is a bit tedious, but works. First, create your react app as normal:
pnpx create-react-app my-app --template typescript
Wait the requisite time for npm to download ~350mb of stuff you've already got. Next, run the following (assuming Linux):
cd my-app
rm -rf node_modules/
pnpm i
Depending on how many modules got re-used, you'll be saving up to 350mb of disk space.
Regarding disk space usage. The packages inside node_modules are hard links. pnpm has a section about this in the FAQ:
pnpm creates hard links from the global store to project's node_modules folders. Hard links point to the same place on the disk where the original files are. So, for example, if you have foo in your project as a dependency and it occupies 1MB of space, then it will look like it occupies 1MB of space in the project's node_modules folder and the same amount of space in the global store. However, that 1MB is the same space on the disk addressed from two different locations. So in total foo occupies 1MB, not 2MB.
For more on this subject:
Why do hard links seem to take the same space as the originals?
A thread from the pnpm chat room
An issue in the pnpm repo
Regarding the hidden folder inside node_modules, you can read in this article: Flat node_modules is not the only way.
pnpm used to have issues with React Native. pnpm uses symlinks a lot and React Native doesn't like symlinks.
P.S. if you don't get help on SO, you can always post to our Gitter chat
I'm a little confused as to why I can't get my Gruntfile.js to run, here's the rub:
I installed grunt globally using npm. It lives in my /usr/local/bin/ directory, here it is:
Previously, I'd installed node.js using homebrew, then grunt with npm. Other issues led me to uninstall node via homebrew & reinstall node directly from the disk image node provides.
In my web project's index, there's a Gruntfile.js script that rebuilds my jekyll site everytime live-reload updates. When I run grunt, I get this message:
What I'm trying to wrap my head around:
Why isn't /usr/local/bin/grunt a valid path? Grunt exists at that location. My guess was that running grunt locally, from within my website's index, would fix things.
There's a node_modules folder there & everything was working fine before after all. I found this link, and tried running \grunt to bypass the bash alias, but that had no effect.
Any advice/suggestions are much appreciated! I feel like an imbecile using things, breaking things & not understanding why/how. Eager to finish my project, get a paycheck & finally have time to learn the ins and outs of terminal, bash & popular package managers so I don't run into these sorts of problems...
After discussion with OP, I find this is a Node.js environment issue. After install - do something - uninstall - reinstall in another way - do something, somehow, when npm install -g XXX is executed, the symbolic link is created and point to some place, but the package is installed some where else. That's why OP see /usr/local/bin/grunt but cannot run it.
I've recommended OP to clean up all Node.js stuff, make a clean environment and start right from the beginning.
I am pretty new to web development and I was asked to create a single-page application with tools of my choice. The only requirement is that it has to run locally on a GlassFish server (in NetBeans: Java Web > Web Application). I use the create-react-app starter kit provided by Facebook to build the application. When I run npm run build I get a build folder containing an html-file and a js-file. But when I double-click the html-file, the browser opens and just shows an empty page. Does anyone know what I have to configure in order to get a bundled html-file that shows the application when I open it?
Thank you
After running "npm run build" on your create-react-app generated code, it displays instructions to help with just this. It says something like:
You may also serve it locally with a static server:
npm install -g pushstate-server
pushstate-server build
The first command, "npm install -g pushstate-server" only needs to be run once, as it installs "pushstate-server" to global NPM. The second command "pushstate-server build" runs the simple static server, pushstate-server, and serves up any content in the "build" folder at http://localhost:9000. You can change the port number if you wish, by adding it at end of command line: "pushstate-server build 1234"
UDPATE: Serverless method...
If your goal is to run the page from the file system, and not from a web server, you'll need to tweak the build/index.html to fix the paths to your JS and CSS (and less importantly, your favicon.ico). The index.html generated by create-react-app expects your JS and CSS to be at "/static/...". However, when you open from the file system, that path is not correct. If you remove the leading forward slash, making the URLs relative, your page will load properly from the file system:
After running "npm run build", open the generated "build/index.html" file. Remove the leading forward slash from "/favicon.ico", "/static/js/main.[random string].js" and "/static/css/main.[random string].css" and save your changes (so that the all read "static/..." and not "/static/..."). Reload/refresh the page in the browser.
Webpack stops and shows an error in the bundle. If I fix that error it will happily rebundle. If I fix an error and it finds another error it will not show the new error. It shows the first error. I have to kill webpack and re-run it to show the new error.
Any ideas how to always show the most recent error?
package.json webpack scripts command:
"dev": "webpack -d --watch --progress",
I'm running webpack run dev, and above is the dev command config
Assuming that webpack is actually watching and reloading the files (check if the terminal scrolls down when you change one of your files), then it's probably something unusual going on with the way that your editor is saving your files.
For example, if your editor uses a "save and swap" technique, it's possible that webpack sees the old version of the file and loads that instead of the new version, thus showing you the original error. Check for editor settings related to "atomic saves" and such. The same situation can also be caused by temporary or backup files that your webpack configuration picks up as proper source files.