Not really any code for this, essentially used this blog as reference: https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/
basically, the scripts look like this
"scripts": {
"watch": "npm-watch",
"build-css": "lessc src/main.less src/index.css",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch start-js",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"test:staged": "echo 'write some tests'",
"eject": "react-scripts eject"
}
it runs fine up until "npm start" where everything is fine up until this moment:
[nodemon] clean exit - waiting for changes before restart
? We're unable to detect target browsers.
Would you like to add the defaults to your package.json? (Y/n) n
Unrecognized input: n
Unrecognized input:
where it's this weird loop because input isn't parsing input properly or something, as in I can't even exit because it's detected as an input, so the only way to stop is to shut down the terminal
In the package.json
"browserslist": [
"defaults"
]
Related
My node version is 16.14.0. I have created a react app.
In the package.json file, I have the following script:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"loc": "./node_modules/.bin/env-cmd -f ./envs/.env-local react-scripts start",
"stage": "./node_modules/.bin/env-cmd -f ./envs/.env-staging react-scripts start"
},
In the same folder where the package.json resides, there is a folder called envs which contain env files with names like this:- .env-staging, .env-local, etc.
In the command prompt, when I am entering
npm run stage
I am getting the follwoing error
> parkyt-admin#1.0.0 stage
> ./node_modules/.bin/env-cmd -f ./envs/.env-staging react-scripts start
'.' is not recognized as an internal or external command, operable program or batch file.
How can I fix this?
I have a .env file that is supposed to define sensitive variables for me. I have a package.json file that I want to expose these variables for but I'm getting an error that says the file can't be found.
Here is the .env file
REACT_APP_HTTPS=true
REACT_APP_SSL_CRT_FILE=C:\Users\techNerd\SSL\rootSSL.pem
REACT_APP_SSL_KEY_FILE=C:\Users\techNerd\SSL\rootSSL.key.pem
REACT_APP_PORT=3000
package.json file:
"scripts": {
"start":"set HTTPS=true&&set SSL_CRT_FILE={process.env.REACT_APP_SSL_CRT_FILE}&&set SSL_KEY_FILE=process.env.REACT_APP_SSL_KEY_FILE&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Here is the error that I get:
set HTTPS=true&&set SSL_CRT_FILE=process.env.REACT_APP_SSL_CRT_FILE&&set SSL_KEY_FILE=process.env.REACT_APP_SSL_KEY_FILE&&react-scripts start
You specified SSL_CRT_FILE in your env, but the file "C:\Users\techn\WebstormProjects\AuthInMern2\client\process.env.REACT_APP_SSL_CRT_FILE" can't be found.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
What am I doing wrong?
Since you're not using the variable inside of the React app, you can remove the REACT_APP_ from the env var name.
In .env:
SSL_CRT_FILE=C:\Users\techNerd\SSL\rootSSL.pem
package.json:
"scripts": {
"start":"set HTTPS=true&&set SSL_CRT_FILE=$(grep SSL_CRT_FILE .env | cut -d '=' -f2)
react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I'm trying to attach another command to yarn start. I'm not sure if it is possible but when I run command yarn start I want my react app to start and I also want to fire up my server at the same time.
What I do know is use 2 terminals one with react app directory and call on yarn start
C:\Users\ivanr\Documents\GitHub\bees\business-scheduler>
and one with server directory (which is inside react app directory) and call on node src/index.js
C:\Users\ivanr\Documents\GitHub\bees\business-scheduler\server>
"scripts": {
"start": "react-scripts start", // is it possible that I can say in server directory run node src/index.js here?
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
You can use concurrently
First install it
$ npm install concurrently
Then use it in your command
"scripts": {
"start": "concurrently \"yarn start-client\" \"yarn start-server\"",
"start-client": "react-scripts start",
"start-server": "cd .\server && node src/index.js"
}
You can use npm-run-all
"scripts": {
"clean": "rimraf dist",
"lint": "eslint src",
"build": "babel src -o lib"
}
npm-run-all clean lint build
I am using create-react-app to create a react application. When I executes npm test -- --coverage the test never exists. npm test actually runs react-scripts test. Any Idea?
-- --coverage part won't work, and should use one of the commands below to set CI to true.
By default npm test runs the watcher with interactive CLI. However, you can force it to run tests once and finish the process by setting an environment variable called CI.
source: React docs
Windows (cmd.exe)
set CI=true && npm test
set CI=true && npm run build
Windows (Powershell)
($env:CI = "true") -and (npm test)
($env:CI = "true") -and (npm run build)
Linux, macOS (Bash)
CI=true npm test
CI=true npm run build
NOT included in the docs
For Docker (node and react):
docker run -e CI=true [myImage] npm run test
Coverage won't work with Jest in watch mode.
Because "react-scripts test --env=jsdom" works in watch mode by default, the watch mode has to be switched off while generating the coverage output.
The following excerpt from the package.json contains a line "coverage" for illustration, how code coverage can be achieved within an app which was bootet by create-react-app.
It's just the modified "test" script, where the options --watchAll=false and --coverage are added in combination:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"coverage": "react-scripts test --env=jsdom --watchAll=false --coverage",
"eject": "react-scripts eject"
}
Please note that it is obsolete to use standalone double-dash -- .
Most of the time this issue can be occur because of following reasons.
Not mentioning the required npm-script arguments in the
package.json file. If you use create-react-app to create your
react application, then it will not accept any command line
arguments. To resolve this problem, add following line under the
script tag in your package.json.
"test": "react-scripts test --coverage --watchAll", //mark --watchAll=false if you want.
Not mentioning the required jest configuration arguments in
the package.json or jest.config.js files. You should mention the files
which needed to include in your test coverage under the jest
configurations. Add following configurations in your
package.json.
package.json
"jest": {
"collectCoverageFrom": [
"src/**/*.js",
"!src/index.js", // files you need to avoid in test coverage
"!src/hooks/*.js",
"!src/context/*.js"
],
"coverageThreshold": {
"global": {
"branches": 90,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"coverageReporters": [
"html",
"text"
]
},
Specifying a directory worked in my case
"test:cover": "react-scripts test --coverage src"
I tried all the solutions above, and for me it was still hanging with the message: Ran all test suites..
But this little hack helped:
"test:ci": "cross-env CI=true react-scripts test --forceExit --detectOpenHandles",
Explanation: The problem was coming from Jest not being able to close all processes. The above is a quick workaround. Ideally you should track the process that's stopping Jest from exiting.
In my case just added a new script "test:coverage": "react-scripts test --coverage"
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:coverage": "react-scripts test --coverage",
"eject": "react-scripts eject"
},
My react folder structure is as below
I've not used the create-react-app version. I tried using GENERATE_SOURCEMAP=false. But It didn't work.
Where can I find the .map files. How can I delete those files?
I cannot find a build folder.
I've tried using the below script But It cannot work in removing source maps
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false && npm run build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
just remove &&
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
You have to create a .env file in your root directory (same folder as package.json) and set GENERATE_SOURCEMAP=false on a single line.
for additional configurations, you may refer to the documentation here:
https://facebook.github.io/create-react-app/docs/advanced-configuration
What I have tested and which is working is to add this code in your .env.production file or .env file
GENERATE_SOURCEMAP=false
Solution 1
Edit your package.json like below:
Windows:
"scripts": {
"start": "react-scripts start",
"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Linux:
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Solution 2 (Recommended)
This solution is not operating system dependent and works on both Linux and Windows. Just create a file called .env in the root path of your project and add the following line to it:
GENERATE_SOURCEMAP=false
For windows cmd and create-react-app + react-scripts,
You should use set and close with \" YOUR_TMP_ENV_VAR \"
See example:
"deploy:prod:hosting": "set \"GENERATE_SOURCEMAP=false\" && npm run build
this answer helped me:
How to set environment variable in React JS..?
This works for me. Hope it helps anyone.
// package.json
"build": "react-scripts build",
"postbuild": "rimraf build/**/*.map"
This way, it will auto delete map files during build generation.
Solution for ejected create-react-app v2.1.3.
Go to /config/webpack.config.js directory and change the following line:
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
To:
const shouldUseSourceMap = false;
And Bob is your uncle.
just add GENERATE_SOURCEMAP=false in .env
Put this one in your package.json
"build": "cross-env GENERATE_SOURCEMAP=false react-scripts build",
It works on Windows and Linux...
After long struggle nothing worked. Finally what worked for me is
changing sourcemap: false in webpack.config.prod.js inside nodemodules/react-script/config
hopefully it will work for you too.