Within my create-react-app build, if I run "eslint src/**/*.js", it happily shows me both the eslint warnings and errors. When I run "react start", it only shows me the eslint errors, and not the warnings. I'd like to see both the errors and warnings on "react start". Any obvious way to configure that ?
Did you have this in your package.json?
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
Related
I ran npx create-react-app project-a for my project and right away i found 27 vulnerabilities (16 moderate, 9 high, 2 critical) in my console.
As new developer this looks very scary, so i ran npm audit fix and noticed that many of them are related to Regular Expression stuff in browserslist , the npm audit fix didnt do anything, i still have 27 vulnerabilities.
After a bit of googling i found this closed github issue where the solution is apparently to move react-scripts to devDependencies ( that didnt remove the warnings ).
These warnings are false positives. There are no actual vulnerabilities affecting your app here.
To remove npm audit warnings, move react-scripts from dependencies to devDependencies in your package.json.
I found another github issue and someone said to add this to my package.json to change the version of the sub-dependency because react-dev-utils package uses a vulnerable version (7.0.9) of immer as a dependency ( it didnt fix it ).
"resolutions": {
"immer": "9.0.7",
"ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"ansi-regex": "5.0.1",
"nth-check": "2.0.1",
"glob-parent": "6.0.1",
"browserslist": "4.18.1"
}
At the very end of the audit it was suggested to run npm audit fix --force and that it includes breaking changes ! very-scary.
The breaking changes were this pretty much :
PS G:\Workspaces\React\project-a> npm audit fix --force
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating react-scripts to 0.9.5,which is a SemVer major change.
Big jump right there from version 4.0.3 down to 0.9.5 and of course it resulted in 43 vulnerabilities , and it suggested running npm audit fix --force yet again to go back to 4.0.3, so i did :
npm WARN audit Updating react-scripts to 4.0.3,which is a SemVer major change.
It's an infinite loop , going back and fourth between react-scripts 0.9.5 and 4.0.3 .
My Node version is : 16.13.1
My NPM version is : 8.1.2
I dont have CRA installed globally.
My Package.json :
{
"name": "project-a",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/css": "^11.5.0",
"#emotion/react": "^11.7.0",
"#emotion/styled": "^11.6.0",
"#mui/icons-material": "^5.2.1",
"#mui/material": "^5.1.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"styled-components": "^5.3.3"
},
"devDependencies": {
"react-scripts": "^4.0.3"
},
"resolutions": {
"immer": "9.0.7",
"ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"ansi-regex": "5.0.1",
"nth-check": "2.0.1",
"glob-parent": "6.0.1",
"browserslist": "4.18.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
You can use npm >8.3.0 with the overrides feature.
Just add to package.json:
...
"overrides": {
"immer": "9.0.7",
"ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"ansi-regex": "5.0.1",
"nth-check": "2.0.1",
"glob-parent": "6.0.1",
"browserslist": "4.18.1"
},
...
Assume I have a package.json like this:
{
"name": "my-app",
"version": "0.1.0",
"dependencies": {
"#aws-sdk/client-s3": "^3.21.0",
"#testing-library/react": "^11.2.5",
"axios": "^0.22.0",
"credit-card-type": "^8.3.0",
"csstype": "^3.0.8",
"dayjs": "^1.10.4",
"lodash": "^4.17.20",
"mathjax-full": "^3.2.0",
"mathjax-react": "^1.0.6",
"react": "^17.0.2",
},
"proxy": "http://localhost:5000",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject",
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
The problem is that the dependency mathjax-react & mathjax-full need react#"^15.0.0 || ^16.0.0". I have tested with npm i --force and npm i --legacy-peer-deps and It all seems to work fine with my react version which is react#17.0.2.
I wouldn't like to run npm i --force and npm i --legacy-peer-deps every time i need to install the dependencies, So I was looking for a way to automatically do that only for the mathjax-react & mathjax-full whenever I run npm i. I tried looking in the .npmrc docs and this reference, but could not find a way to do that. What might be a solution for this? Is there a native npm solution for this? Or do i have to write a script that reads my package.json and runs npm install for every dependency alone?
My reasoning is that if i need to install some other dependencies that have conflicts, I'd never be warned about it.
Legacy peer dependencies aren't per-package, they apply to the project as a whole. It's just that you might need it for your whole project to keep only one or two dependencies happy. You'll find if you install a package with --legacy-peer-deps and then install a different package without that flag, npm will complain about the first package again. So once you need --legacy-peer-deps, you need to specify it always no matter what package you install.
According to the docs, you can set it permanently with:
npm config set legacy-peer-deps=true --location=project
This just adds legacy-peer-deps=true to the end of the .npmrc in your project root.
Hei,
I updated my npm packages, including parcel, and after the update I could not run my application anymore and keep getting the following error:
🚨 Build failed.
#parcel/transformer-js: This experimental syntax requires enabling one of the following parser plugin(s): 'classPrivateProperties, classPrivateMethods' (3:2)
My package.json looks like below:
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"author": "Klei Rama",
"license": "ISC",
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-proposal-private-methods": "^7.13.0",
"#parcel/transformer-sass": "^2.0.0-beta.2",
"parcel": "^2.0.0-beta.2",
"sass": "^1.32.8"
},
"dependencies": {
"fractional": "^1.0.0"
},
"plugins": [
"#babel/plugin-proposal-private-methods",
"#babel/plugin-proposal-class-properties"
]
}
I keep trying to delete node_modules, clear the cache, and delete package.json and then reinstall again but it does not work. I tried to use experimantal versions of parcel such as 2.0.0-beta.1 and 2.0.0-beta.2, but none of these version does not seem to work with experimental phase of babel plugins (class-properties and private-methods) (7.13.0). I was wondering if there is any certain version of babel plugins which can work either with parcel 2.0.0-beta.1 or 2.0.0-beta.2?
Hei you, install babel and the following plugins:
{
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-private-methods"
]
}
Of course, also, to file .babelrc.
In Vuejs project,
node version: v10.6.0
Package.json version:
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.0-rc.4",
"#vue/cli-plugin-unit-jest": "^3.0.0-rc.4",
"#vue/cli-service": "^3.0.0-rc.4",
"#vue/test-utils": "^1.0.0-beta.20",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.0.1",
"vue-template-compiler": "^2.5.16"
},
When I run it with build in tasks,
"test:unit": "vue-cli-service test:unit"
But as I want to debug, so I run manually with node command:
node node_modules/.bin/jest
It gives following error:
FAIL tests/unit/HelloWorld1.spec.js
● Test suite failed to run
.../tests/unit/HelloWorld1.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "core-js/modules/es6.array.iterator";
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected string
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
After I added .babelrc with following content
{"env": {
"development": {
"plugins": ["transform-es2015-modules-commonjs"]
},
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}}
Things got a little better, It can pass the the test file without "import", once there's import, it will show a different error:
....tests/unit/HelloWorld1.spec.js:3
import _interopRequireWildcard from "..../node_modules/#babel/runtime/helpers/builtin/es6/interopRequireWildcard";
^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
After struggling for a few days. Finally, I got the solution to run jest in debug mode for VueJs application.
After debuging into vue-cli-service and in turn #vue/cli-plugin-unit-jest, I found the following code before it spawns the jest process:
process.env.VUE_CLI_BABEL_TARGET_NODE = true
process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true
Solution
So the solution is very simple.
Just add these two environment variables before running the jest command. The following commands will start jest in debug mode:
export VUE_CLI_BABEL_TARGET_NODE=true
export VUE_CLI_BABEL_TRANSPILE_MODULES=true
./node_modules/jest/bin/jest.js --clearCache
node --inspect-brk ./node_modules/jest/bin/jest.js -i
Notes
Make sure DON'T add ".babel.rc", this will mass up VueJS babel.
And often, you will need to run jest with the --clearCache option. Otherwise, the stale generated file will also mess up.
The jest option -i is also important. Otherwise, the test will be running in a separate process which will not be in debug mode.
Had the same issue.
FAIL tests/unit/example.spec.js
● Test suite failed to run
.../tests/unit/example.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "core-js/modules/es6.array.find";
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected string
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
Tried the answer above.This article solved my problem.
Solution:
npm uninstall "#vue/cli-plugin-unit-jest"
deleted tests folder with all content
deleted jest.config.js file
vue add #vue/cli-plugin-unit-jest
for VS Code use the next launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "vscode-jest-tests",
"type": "node",
"request": "launch",
"runtimeArgs": [
"--inspect-brk",
"./node_modules/#vue/cli-service/bin/vue-cli-service.js",
"test:unit",
"--runInBand"
],
"cwd": "${workspaceFolder}",
"protocol": "inspector",
"disableOptimisticBPs": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"outFiles": [ "${workspaceFolder}/src/**/*.js"],
"port": 9229
},
]
}
Another solution is to ensure your Node Environment is resolving correctly.
In my case, it would resolve to "development". Updating my package.json to the following resolved the issue:
"test": "NODE_ENV=test jest"
This will ensure that your babel config uses the test configuration.
Was your test suite working before and now it's throwing this error? This is what happened to me and before going off the deep-end there is a decent chance that something is cached that is causing this.
I resolved it using: npm test -- -u
If that fails you should delete your node_modules folder and do a fresh npm install and then try npm cache clean --force.
Another useful command if you want to run the tests without cache is npm test -- --no-cache -u.
Bundling `index.js` [development, non-minified] 0.0% (0/1), failed.
error: bundling failed: ambiguous resolution: module `C:\Users\mtlok\Desktop\RN2\pep_beta\index.js` tries to require `react-native`, but there are several files providing this module. You can delete or fix them:
* `C:\Users\mtlok\Desktop\RN2\pep_beta\node_modules\react-native-responsive-dimensions\node_modules\react-native\package.json`
* `C:\Users\mtlok\Desktop\RN2\pep_beta\node_modules\react-native\package.json`
Im getting this error when bundling react-native app.
This issue may be caused by the react-native-responsive-dimensions package
Here is the package.json file:
{
"name": "react-native-responsive-dimensions",
"version": "1.0.1",
"description": "Resposive fontSize, height and width for your react-native components.",
"main": "src/index.js",
"scripts": {
"start": "node src/index.js",
"test": "exit 0"
},
"keywords": [
"react-native",
"responsive",
"responsive-height",
"responsive-width",
"responsive-font-size",
"fontSize",
"responsive-dimensions"
],
"author": "DaniAkash <s.daniakash#gmail.com> (https://github.com/DaniAkash)",
"repository": "DaniAkash/react-native-responsive-dimensions",
"license": "MIT",
"dependencies": {
"react-native": "x"
}
}
Also, there is a node_modules folder located inside node_modules/react-native-responsive-dimensions.
Is there a quick fix?
Try this command. maybe it's because of cache.
yarn start -- --reset-cache
or
npm start -- --reset-cache
if it doesn't work you can try react-native-git-upgrade or you can just delete node_modules folder then run npm install,react-native upgrade ande react-native-link
You can uninstall react-native-responsive-dimensions package first.
npm uninstall react-native-responsive-dimensions --save
And then
yarn start -- --reset-cache or npm start -- --reset-cache
react-native run-android or react-native run-ios