I'm having some difficulty running full test coverage from a script in the package.json of my create-react-app. Link to repo here;
package.json
{
"name": "React Kitchen Sink",
...
"dependencies": {
...
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-scripts": "^3.4.4"
},
"scripts": {
"start": "react-scripts -r #cypress/instrument-cra start",
"start:silent": "BROWSER=none yarn start",
"start:server": "start-server-and-test start:silent http://localhost:3000",
"build": "react-scripts build",
"eject": "react-scripts eject",
"jest:test": "react-scripts test --env=jest-environment-jsdom-sixteen",
"jest:coverage": "react-scripts test --env=jest-environment-jsdom-sixteen --watchAll=false --coverage",
...
...
running
yarn jest:test
starts the test in watch mode with coverage and if I press a then I get a report with all test passing
but if I do
yarn jest:coverage
Then all test fails
The errors looks something like this:
FAIL src/components/Photo/index.test.js
● Console
console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Uncaught [Error: Photo(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]
at reportException (/Users/norfeldt/Abtion/Playground/react-kitchen-sink/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
at innerInvokeEventListeners (/Users/norfeldt/Abtion/Playground/react-kitchen-sink/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333:9)
at invokeEventListeners
...
The above error occurred in the <Photo> component:
in Photo (at Photo/index.test.js:32)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit <link> to learn more about error boundaries.
● has a test id
Photo(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
...
This seems to be a known issue in create-react-app version >3.4.1, in which this bug happens when running react-scripts test with the flags --watchAll=false and --coverage at the same time. It was reported in #facebook/create-react-app#8689
The bug was later fixed by updating the jest version used in CRA to version >25 in the PR #facebook/create-react-app#8362. The fix was included in the new major release of CRA, version 4.0.0.
Therefore, you should upgrade your react-scripts package to version >=4.0.0 and then follow this migration guide (to see if there are any breaking changes that affects you) and then the problem should be fixed.
In your case, I have downloaded your repo and done the following:
Deleted node_modules folder.
Upgraded the react-scripts to version 4.0.0 by executing this command yarn add --exact react-scripts#4.0.0 (could be a later 4.x version too).
Run yarn install again.
Finally, tried again yarn test:coverage and it worked like a charm:
If someone else is reading this and upgrading to version 4.0.0 is not an option for some reason, a short term easy fix would be to either:
Remove the flag --watchAll=false and run it like this: react-scripts test --env=jest-environment-jsdom-sixteen --coverage
Or downgrade react-scripts to version 3.4.0.
Try this script
react-scripts test --collectCoverage
To build an ExtJS application using sencha cmd I used the command below
sencha app build
But how I can build using open tooling? The docs is not clean about build application with open tooling.
npm run build should do the job
Check your package.json, you normally have a script section
You could build the app using the commands
npm run build:desktop
npm run build:phone
The above commands used based on the package.json file script section.Below is the snippet of code of script section of package.json file.
"scripts": {
"start": "npm run dev:desktop",
"clean": "rimraf build",
"dev:desktop": "webpack-dev-server --env.profile=desktop --env.browser=yes --env.verbose=no",
"dev:phone": "webpack-dev-server --env.profile=phone --env.browser=yes --env.verbose=no",
"build:desktop": "npm run clean && cross-env webpack --env.profile=desktop --env.environment=production --env.treeshake=yes",
"build:phone": "npm run clean && cross-env webpack --env.profile=phone --env.environment=production --env.treeshake=yes"
}
We were suffering a lot and spent significant effort to find the tooling what suits our needs the best. Finally we ended up using webpack because there is a large ecosystem around that so it opened up endless possibilities.
Although sencha did some webpack plugins but they are mostly just watching changes. Therefore we have created a webpack loader what is resolving ext's dependencies. This webpack loader will allow to use webpack to build your ext project. There is a small sample to help to configure it.
I have a react app created by create-react-app. After running npm start (the start script is present in package.json as "start": "react-scripts start") the console says Starting the development server as usual and fires up the browser. But after this both the console and the browser do absolutely nothing indefinitely. No error or output. It simply does nothing.
I have something similar happening to me.
I have a react project that I want to convert to Typescript and I started as you noted with the "create-react-app", added all my files and hoped for the best - but got stuck like you on the “Starting the development server” message.
I have an 8GB Ram with Windows 10 and once I used the default "npm start" for the first time I've seen the node process uses a lot of memory - So I tried to give it more and at the same time I tired to change the port react uses.
Added this to the start script in package.json:
"scripts": {
"start": "PORT=3001 react-scripts --max_old_space_size=8128 start",
...
}
Closed all my chrome browsers (they take pretty much memory)
And gave it around 1 minute to run
After 1 minute it started working and from that point it just starts quickly and not uses as much memory and not depended on the port I choose
In my case - I guess the first time you run "npm start" on the React Typescript project it probably index the files (or does something similar - I'm not sure and probably need to read about it - I'm new to typescript) which take a lot of memory.
In your case - It might be something similar
Hope it helps :)
First time you run the command it takes about 5 minutes before the page loads.
Check these two points
Run npm install command before you start the server.
Then if it is still not running, please try the second command
Remove the node modules and run npm install once again.
If these two points didn't work, please provide a screenshot for further analysis.
I created my react app by create-react-app too.
I've tried all the method mentioned above. But it didn't work for me.
Then I accidentally found out if you have unused import or any unused statements. You will stuck.
My react version is 17.0.1.
Make sure that your dependencies in package.json includes the following:
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
And scripts to be:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Once you ensure that, you can follow the following steps:
1. npm install
2. npm run build
3. npm start
Hope will works for you.
the same problem as i met; npm start but got stuck like you on the “Starting the development server” message.
after i trying the following ways but didn't worked:
npm install
npm run build
npm start
it seems not the version matter.
finally, i recheck my code, and found the mistake that's the cause of development server fail to start:
useEffect()
this is the hook incorrect using, maybe i forgot to finish it; then i fixed it, and npm run start, it worked, server started successfully.
This is my react version:
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
My node version is 12.18.1, and it didn't work.
I try to change the version to 14.15.0, and then run success.
For me, the problem was the name of the parent directory. For some reason it choked on "#" when I tried to install into a directory named "#TEMP". Switched to another directory with success.
This has previously worked on my old MBP i9, I'm now on a MBP M1 Monterey 12.2.1.
FWIW, I restarted my macbook, changed nothing and everything worked again 🤦♂️🤣
Finally solved this. For me the issue lay in my webpack configuration. I had a webpack alias in there whose alias name was the same as the name of my npm package.
i.e.
My package.json had the following at top.
"name": "#mycompany/react-common-components"
Within my webpack.config.js I had
alias: {
'#mycompany/react-common-components': path.resolve(__dirname, '../src/components')
},
Once I changed the webpack alias to the following everything worked fine
alias: {
'react-common-components': path.resolve(__dirname, '../src/components')
},
I believe you may have some issues with Node and npm.
I would recommend checking the versions first - you’ll need to have Node >= 8.10 and npm >= 5.6 on your machine, and update if needed. It could worth trying to reinstall node.
Checking into node logs could provide some clues on your issue (more information on how to log here)
I was also having the same issue. Try installing a previous version of react-scripts.
npm install react-scripts#2.1.8
Hope this helps!
had the same issue,
I had to build it first
npm build
then
npm start
I was running react on my Mac and had to give permission for the terminal to interact with chrome before it worked.
For me the issue was that I had .css files.
I renamed my css files to .scss and it works.
For some reason create-react-app chokes on CSS files for me.
Weird.
My team also faced this same issue but we managed to solve it.
Run npm install to update packages
then run npm audit fix to fix vulnerabilities
Finally close all browser tab to free up RAM. I have seen node processes take a significant amount of memory.
Run npm start and the development server spins up within a minute or two.
NOTE
Make sure that your dependencies in package.json includes the following:
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
And scripts to be:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Once you ensure that, you can follow the steps given above.
I ran into this issue. In my case, there was an .eslintcache file that had incorrect information in it, and was causing an issue. Simply deleting the file solved it for me.
For me, it was because of using StrictMode, the server starts, but the app keeps loading for a long period.
This is my case.
In my react app project I configured eslint with
https://github.com/prettier/eslint-plugin-prettier
After removing minimized source file(in my case, mapbox-gl.js) from the source tree, everything works.
Here are tow points checked:
Remove package.lock and node_modules, re-install: npm i.
Check the node version. Maybe you currently use version is 12.0.0, but this project limited 14.0.0.
I had similar issue. I just opened chrome to check if it's actually running on there (chrome is my default browser for vs code) and npm could then run the next step after that. So try opening the browser if you're stuck on "starting dev...."
This is not so much an answer as how to fix the problem in all cases since I think there are likely multiple things that affect this.
Following the ticket here https://github.com/facebook/create-react-app/issues/12090 allowed me to track down the issue to being something to do with the chunks within the bundles having the same file name.
I was getting timeouts on yarn install and after that worked, getting stuck on Starting development server... which it never did before on this computer.
It may have to do that I am not in the USA, so I set my VPN to Los Angeles and deleted the yarn lock file and the node_modules directory, re-ran yarn install and ran yarn start and everything worked!
this error can occur because of multiple reasons , my particular case (as shown in the picture attached) occurred abruptly when I was installing splide and styled-components probably because of some vulnerabilities
My error was resolved by running
npm audit fix --force
We are working on a previously ejected create-react-app and now want to add flowtype.
We have followed the guide at: https://flow.org/en/docs/tools/create-react-app/
Should that work for an ejected app?
This has unfortunately caused the webpack-dev server launched with yarn start to stop automatically reloading on file updates.
Additionally, after adding // #flow to some files there is no output or indication of flow enforcing type checking.
Will we need to manually update the webpack configs?
Heres the package.json scripts
"scripts": {
"start": "node scripts/start.js",
"build": "yarn build-client && yarn build-server",
"build-client": "node scripts/build.js",
"build-server": "./node_modules/.bin/webpack --config ./config/webpack.server.config.js",
"test": "node scripts/test.js --env=jsdom",
},
The output for running yarn start is:
Compiled successfully!
You can now view cra in the browser.
Local: http://localhost:3000/
On Your Network: http://192.168.1.65:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
The doc you linked tells you how to install the flow-bin and to make a configuration file but don`t tells how to launch it.
Flow is separated tool that should be launch by own command (depends on how you wanna run it):
if you want to check types check manually, you need to add npm command on the "scripts" section of your package.js: "example-comand-flow": "flow". Then call it by npm run example-comand-flow and you`ll get errors directly on a terminal you running the script.
if you wanna have continuing type checking, you should find a manual how to configure it in your IDE. For example, in WebStorm you should go Preferences -> Languages & Frameworks -> JavaScript and set JavaScript language version to Flow and specify flow executable.
I just started coding in React using create-react-app. In the documentation it's said
The page will reload if you make edits.
I don't know which module is responsible for auto reload (webpack or react-hot-reloader?) but it's not working. I edited file using different editors (Sublime, VIM, ..) but it seems problem is for something else. Any advice how to debug it?
After too many searches I found Webpack watch uses inotify to observe file changes and in ubuntu it's set to a low value. a quick fix:
sudo -i
echo 1048576 > /proc/sys/fs/inotify/max_user_watches
exit
If you want change it permanently (from Ronald answer):
echo "fs.inotify.max_user_watches=524288" >> /etc/sysctl.conf
sudo sysctl -p
You may also need to add a .env file in the root directory of your project with this line "FAST_REFRESH=false" as noted in create react app docs.
echo "FAST_REFRESH=false\n" | cat > .env
Year 2021
I had this issue in react ^17.0.2 I fixed it by adding a .env file and setting FAST_REFRESH=false.
Just create a .env file in the root directory of your project and add FAST_REFRESH=false in the file.
For Ubuntu users, run this in the terminal:
sudo gedit /etc/sysctl.conf
Scroll to the bottom and paste:
fs.inotify.max_user_watches=524288
Save and close the editor, then run this:
sudo sysctl -p
To check your success:
cat /proc/sys/fs/inotify/max_user_watches
This should return 524288
by apsrcreatix
Ref: https://github.com/flathub/com.visualstudio.code/issues/29#issuecomment-477126012
I had the same problem in Ubuntu.
The problem was resolved by deleting node_modules and then run
yarn install // or npm install
I hope to save someone else the same pain I experienced.
I'm using Windows 10 and Ubuntu 20.04 WSL, with nvm to manage node/npm.
I had to:
Use Node v16.14.2 in nvm (which also uses npm 8.5.0)
Change react-scripts from "react-scripts": "5.0.0" to "react-scripts": "4.0.3" in my package.json file
Change my package.json start script to
"start": "CHOKIDAR_USEPOLLING=true react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
I then ran npm install to update react scripts and restarted the bash terminal
I also followed Ronald Araújo's advice in his answer for good measure.
5 hours later, it's finally working!
Good luck everyone!
There actually is solution to get Fast refresh working.
Use this patch https://github.com/facebook/create-react-app/pull/11105/files
From #pmmmwh
Use https://www.npmjs.com/package/patch-package for editing your dependencies.
install patch-package (via npm or yarn into your project)
npm: npm i patch-package
yarn: yarn add patch-package postinstall-postinstall
Edit package.json and add postinstall script
"scripts": {
+ "postinstall": "patch-package"
}
Edit file YOUR_PROJECT/node_modules/react-dev-utils/webpackHotDevClient.js - with changes introduced in github pull request above
run npx patch-package react-dev-utils
commit changes created by this script (e.q. ./patches/react-dev-utils+11.0.4.patch)
run your app, now it will refresh on changes
Or wait for new release of react-dev-utils (it is not yet released, last version #11.0.3 doesn't contain this update).
My hot reload in Create React app broke due to updating some packages (probably because of typescript). I had to solve it without the ejecting of CRA.
I managed to fix it by upgrading to version 16.10 of these packages:
"react": "^16.10.0",
"react-dom": "^16.10.0"
And it worked just fine!
My code in index.tsx:
...
const isDev = process.env.NODE_ENV === 'development'
const rootEl = document.getElementById('root')
ReactDOM.render(<App />, rootEl)
if (isDev && module.hot) {
module.hot.accept('screens/App', () => {
ReactDOM.render(<App />, rootEl)
})
}
Hint:
First try just this code (maybe you are setting wrong path)
if (module.hot) {
module.hot.accept()
}
If this start working then you want to specify the path in order to make hot loading more effective (less bubbling = shorter loading)
Try adding CHOKIDAR_USEPOLLING=true in a .env file.
If the React webpage is not reloading upon saving changes, try adding this line to the App.js file:
import React from 'react';
After create-react-app,I change my project's name.This is one of reasons which make reload not working.Then I create-react-app again,reload is working now.