Create React App - Can't run npm run test - reactjs

I've had to eject my Create React App and now I can run my tests but the watch is completely broken.
If my tests fail or pass they do not carry on watching and I get the below error instead.
Error watching file for changes: EMFILE
Failed at the portfolio#0.1.0 test script 'node scripts/test.js --env=jsdom'.
I get this error when running npm run test
I've tried installing watchman to see if this made a difference with no success.
another thing that I've tried is adding the below line to my package.json file:
"setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js",

I feel like someone else might get this issue so I'm going to say how I fixed it.
It turns out that I need to run the below commands and your tests will be watching test files again.
rm -rf ./node_modules
npm cache clean
npm install
I must of been out of sync or something.. Such a simple thing to do to fix a really annoying problem.

Related

Create-react-app 'Failed to compile.' due to css import

Appearing out of nowhere, this error has me stomped. It appears any time I try to import a css file, whether in full or as a module.
E.g.
import "./index.css"
or
import styles from "./button.module.css"
It MAY have been due to the latest macOS beta at least it seems to have coincided with its release. I tried rolling back from it, but that didn't work.
Failed to compile
./src/index.css (./node_modules/css-loader/dist/cjs.js?modules=true!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
CssSyntax error: Unknown word (1:1)
> 1 | var api = require("!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
| ^
2 | var content = require("!!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-4-1!../node_modules/postcss-loader/src/index.js??postcss!./index.css");
3 |
This error occurred during the build time and cannot be dismissed.
I've tried manually adding web pack, checked everything for syntax errors, re-installed the whole repo, went back several commits and so on. Nothing seems to do anything. Happy to supply more context.
(I found one other person mentioning the same problem on SO 15 hours ago, but he hadn't supplied debugging information so the ticket was closed).
Note: The same codebase runs perfectly well on my MacBook, no problems!
It's seems like your npm project setup is broken. This type of problem famously called Failed to compile generally occurs when we are moving one branch to another branch more often and we sometimes forgot to do npm install and continue to work on another branch which has new packages without doing npm install and many more cases which is very hard to tell that in which cases your npm setup is broken.
There are couple of ways of solving this issue.
First way
Delete the node_modules directory and package-lock.json file.
Close the editor and open it again and in new terminal do npm i. Then check whether it is compiled or not.
If that didn't work then follow the second way.
Second way
Clear the npm cache forcefully of your project setup.
npm cache clear -f
Then restart the system for closing all the node service for this session. After restart do npm i and check again.
If that didn't work then follow the third way which I think that fail compilation issue will be easily solved.
Third way
Just clone your project again in another directory and do npm install.
Can you try this?
👉 Delete these folders: node_modules and package-lock.json.
(You can also delete a cache folder if there is)
🚧 Run this Commands:
With yarn: yarn
With npm: npm install
👋 You can also try to change your import method:
import * as styles from ...
This might help hopefully!
The code is right. There may not be a problem with code.
The steps mentioned below might help:
Delete node_modules folder.
run npm install
run npm cache clean -f (try without -f first)
*first 2 steps worked for me.

Custom NPM package throwing Error during build

I forked a project and made some changes to it and wanted to make use of it in my project. so in my React projects package.json I made a reference to this forked link and it is working fine in development. The main issue arises when I'm pushing it to my container and now the build fails.
https://blaipratdesaba.com/how-to-use-an-npm-node-module-that-has-been-forked-b7dd522fdd08 mentions about using the package.json script called postinstall to help with the issue, are there any alternatives to this?
What's the error when the build fails to run in the container?
If you don't want to use npm's postinstall you could always write a script that you run before or after you issue the install command. (This is not that different from using preinstall/postinstall)
Maybe something like:
#!/bin/bash
cd - && npm install
cd node_modules/my-package && npm my-script

npm start errors - React.js

I am trying to run a server so I can start coding my website. However, I run "npm start" I have been greeted with errors. The steps to fixing this error are laid out, however, for step three I do not see babel-loader within my package.json. In addition, I am not sure if the npm ERR!(s) I get on the bottom are caused because of the issue on top or another issue in itself.
package.json
"runs" npm ls babel-loader
It looks like you have globally installed babel-loader#8.0.2. See #6, it points to the exact case you have.
Remove it from your home directory and that should fix it.

"npm start" command suddenly stopped working with "create-react-app" project folders with both old and newly created projects

I've been using create-react-app to make some projects in react and also for practicing, and usually the way to run the project is to use the command npm start from the root directory of that project in the terminal. This has since stopped working for both my old projects which I haven't touched or completely new ones, and followed the exact instructions given by the error already to no effect.
An image of the error, the very top of the terminal is immediately after the npm start command:
I have been googling this over the past two days and I simply can't figure it out. I'm hoping someone with better knowledge would know the root of why npm start has stopped working. Please keep in mind that I already tried the suggestions provided by the error in the terminal.
What's really mind boggling is I haven't changed pcs or done any editing in the old projects such as the one in the picture above, re-installed a bunch of stuff I thought might have been causing issues like npm or babel but they simply don't launch anymore.
Also almost forgot the error log, which has been even more confusing to figure out or google:
You have problem with your dependencies. Please run
npm i
inside project directory.
As your console shows, you can try
remove your node_modules directory
delete file package-lock
I suggest clean npm cache (npm cache clean -f)
and reinstall node_modules using
npm i
There are many reasons to cause this problem.Some suggestions here:
1.uninstall babel-loader and create-react-app globally
npm uninstall -g babel-loader
npm install -g create-react-app
2.remove the error package
rm -rf ~/node_modules/babel-loader
3.stop all the command then clean up the cache of npm

React Webpack creating boilerplate

I'm trying to make react boilerplate with webpack with this tutorial
enter link description here
But getting an error when trying run the code (npm run start). I'm getting the error when reaching the section -> Setting up webpack-dev-server
. Error message is this
From what I can tell, you lack the #babel/core npm package...
This is a classic example of when to do exactly what the error message is telling you to do. This took me A VERY LONG TIME to figure out as a developer, and I still waste time NOT following the directions on screen from time-to-time... So you are not alone if this is indeed the case.
The first issue in the error message that you have control over, is a missing #babel/core package in your node_modules/ directory. I say try satisfying the dependency by installing the package exactly as specified.
I'm sure you know how to do so already, but for clarity's sake, you'll want to enter the following command into your terminal prompt, from your project's root directory:
$ npm i #babel/core
after it's finished installing, re-enter $ npm run start and see if that fixed it.
If it doesn't, and the error message doesn't change, my only other idea would be to install babel-loader#7 like the error message is telling you to do.
$ npm i babel-loader#7
If it doesn't fix it and a new error is displayed, repeat the process until your dependencies are worked out.
Or, you can also move or rename your node_modules/ directory and enter $ npm i to rebuild your package dependencies.
make sure to keep your original node_modules/ folder handy though, just in case you need it. Once you have everything running, you are free to get rid of it.
I hope this helps!!!
run npm install --save-dev #babel/core then try building again.

Resources