The react-scripts package provided by Create React App requires a dependency : Babel-Jest - html

I found this error message when running react-script test
The react-scripts package provided by Create React App requires a dependency "babel-jest": "^24.9.0"`
So the error message also recommend us to remove package-lock.json and also node_modules I tried but I have the same error message.
And I inspect the package-lock.json and for example jest-config (is a sub dependancies) use higher version than react-script accept.
Please if you have some advices
packages.json
{
"name": "creator-web-app",
"version": "0.1.0",
"private": true,
"main": "public/electron.js",
"homepage": "./",
"dependencies": {
"#craco/craco": "^5.6.4",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/react": "^16.9.34",
"await-to-js": "^2.1.1",
"axios": "^0.19.2",
"classnames": "^2.2.6",
"electron-is-dev": "^1.2.0",
"env-cmd": "^10.1.0",
"enzyme": "^3.11.0",
"history": "^4.10.1",
"i18next": "^19.4.2",
"i18next-browser-languagedetector": "^4.0.2",
"jest": "^25.3.0",
"jwt-decode": "^2.2.0",
"moment": "^2.24.0",
"nano-id": "^1.1.0",
"npm-watch": "^0.6.0",
"react": "^16.13.1",
"react-cookies": "^0.1.1",
"react-dom": "^16.13.1",
"react-i18next": "^11.3.4",
"react-inlinesvg": "^1.2.0",
"react-redux": "^7.2.0",
"react-router-dom": "5.1.2",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"redux-form": "^8.3.3",
"redux-thunk": "^2.3.0",
"typescript": "^3.7.0"
},
"scripts": {
"electron": "NODE_ENV=production npm run build && NODE_ENV=production electron .",
"start": "NODE_ENV=development react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"pack": "NODE_ENV=production && npm run build && electron-builder --dir",
"dist": "NODE_ENV=production && npm run build electron-builder"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/classnames": "^2.2.10",
"#types/enzyme": "^3.10.5",
"#types/jest": "^25.2.1",
"#types/react-redux": "^7.1.7",
"#types/react-router-dom": "^5.1.4",
"#types/redux-form": "^8.2.3",
"craco-alias": "^2.1.1",
"electron": "^8.2.1",
"electron-builder": "^22.4.1",
"enzyme-adapter-react-16": "^1.15.2",
"node-sass": "^4.13.1",
"react-test-renderer": "^15.6.2",
"ts-jest": "^25.4.0",
"whatwg-fetch": "^3.0.0"
},
"build": {
"appId": "studioapp.id",
"mac": {
"category": "your.app.category.type"
},
"files": [
"**/*"
],
"directories": {
"buildResources": "."
},
"protocols": {
"name": "studioapp-protocol",
"schemes": [
"studioapp"
]
}
},
"jest": {
"collectCoverageFrom": [
"<rootDir>/src/**/*.{ts,tsx}"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|yml)$": "<rootDir>/tests/test-file-mock.js",
"\\.(css|less|scss|sss|styl)$": "<rootDir>/tests/test-mock.js",
"#/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.(tsx|ts)?$": "ts-jest"
}
}
}
Thanks

I faced the same problem with create-react-app. Here is what I did
Go to the path
C:\Users\YOURNAME\node_modules
and then remove those packages which show an error.
More information here: https://github.com/creativetimofficial/argon-dashboard-react/issues/28

Ironically I was working on a similarish problem this morning. Could you provide a screenshot of your package.json and the error message?
Babel-Jest is used to compile javascript code into a format that jest can consume. I suspect that your problem is that you have a dependency that the lock file has subsequently locked in the incorrect version of babel-jest.

I can add some more details from the above response for solve this issue I found the problem.
When we use react-scripts we can't have jest packages or something is already manage by create-react-app
The problem when I have is package.json contain jest at superior version than react-script can accept
When I deleted this line in my package.json already seems to work

One of your dependencies is using a newer version of babel-jest. You can find which ones they are by running npm ls babel-jest in your project root directory.
A simple way to fix the problem then, is to try and link to an older version of those packages, e.g. "#types/jest": "^24.0.0" so that they don't use the newer version of babel-jest.

for mac user remove
/Users/{UserName}/node_modules

Related

NPM commands return error: package.json must be actual JSON, not just JavaScript

... and I know that my json is perfectly valid json.
The problem started when I added some dev dependencies to the package.json, but it seems to be getting tripped up on the first lines. I've verified and cleaned the cache, updated npm, and I've combed through the file and the posts on this problem for a while, but cannot figure out what's going on. I've also tried some suggestions I saw on here, like changing all the " characters to ' characters. Nada.
My package.json is below, as well as the full error message when I run a command:
{
"name": "Outlook Beaty",
"version": "0.2.1",
"description": "A custom experience enhancer for Outlook.",
"repository": {
"type": "git",
"url": "https://github.com/team5-devs/js-outlook-plugin/"
},
"license": "MIT",
"config": {
"app-to-debug": "outlook",
"app-type-to-debug": "desktop",
"dev-server-port": 3000
},
"dependencies": {},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/polyfill": "^7.11.5",
"#babel/preset-env": "^7.11.5",
"#types/find-process": "1.2.0",
"#types/office-js": "^1.0.108",
"#types/office-runtime": "^1.0.14",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.1.1",
"eslint": "^7.19.0",
"eslint-config-office-addins": "^1.0.19",
"find-process": "^1.4.3",
"file-loader": "^4.2.0",
"generator-office": "^1.7.8",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^4.5.0",
"jasmine": "^3.6.4",
"jsdoc": "^3.6.6",
"office-addin-cli": "^1.0.13",
"office-addin-debugging": "^3.0.34",
"office-addin-dev-certs": "^1.5.5",
"office-addin-lint": "^1.0.26",
"office-addin-manifest": "1.5.7",
"office-addin-prettier-config": "^1.0.12",
"source-map-loader": "^0.2.4",
"travis-ci": "^2.2.0",
"ts-loader": "^6.2.2",
"typescript": "^4.0.3",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
"yo": "^3.1.1"
},
"scripts": {
"build": "webpack -p --mode production --https false",
"build:dev": "webpack --mode development --https false",
"build-dev": "webpack --mode development --https false && echo . && echo . && echo . && echo Please use 'build:dev' instead of 'build-dev'.",
"dev-server": "webpack-dev-server --mode development",
"lint": "office-addin-lint check",
"lint:fix": "office-addin-lint fix",
"prettier": "office-addin-lint prettier",
"start": "office-addin-debugging start manifest.xml",
"start:desktop": "office-addin-debugging start manifest.xml desktop",
"start:web": "office-addin-debugging start manifest.xml web",
"stop": "office-addin-debugging stop manifest.xml",
"test": "jasmine",
"validate": "office-addin-manifest validate manifest.xml",
"watch": "webpack --mode development --watch"
}
}
npm install
npm ERR! JSON.parse "name": "Outlook Beaty",
npm ERR! JSON.parse "versio'
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.
Any help would be greatly appreciated!
P.S. I'm running Gitbash on Windows 10, but I tried to make sure that there are no Windows-specific characters. Maybe I'm mistaken.
the problem might be simpler than you overlooked?
I see on line (near yo dependency) you're missing a comma:
"webpack-dev-server": "^3.11.0"
"yo": "^3.1.1"
I suggest you add a comma, then try to run npm install again?
"webpack-dev-server": "^3.11.0",
"yo": "^3.1.1"

Getting undefined is not an object

I am looking for sample project of React-Native. First of all i got erro which is unable to resolve router flux. Then i added flux dependency and i run npm start. After that i got "Undefined is not an object" in package.json. How can i solve it. Can you please help me?
{
"name": "FirsTrial",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.3",
"react-native-router-flux": "3.38.0"
},
"devDependencies": {
"babel-jest": "22.4.3",
"babel-preset-react-native": "^2.1.0",
"jest": "22.4.3",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}
"FirsTrial" is underlined !!!

BabelJs over Heroku: Couldn't find preset "env" relative to directory "/app"

I have an application with SailsJs over NodeJs on Heroku and I can't run babeljs on. It runs ok on my localhost, but I always get the error:
Error: Couldn't find preset "env" relative to directory "/app"
The Heroku persists in look for itens at /app folder. This project does not have one /app folder
My app folders structure is:
app_name
- api
- assets
- config
- tasks
- views
I follow the documentation of http://babeljs.io to my .babelrc
.babelrc
now:
{
"presets": ["react", "env", "stage-1"],
"plugins": ["transform-class-properties"]
}
Already tried:
{
"presets": ["react", "es2015", "stage-1"],
"plugins": ["transform-class-properties"]
}
When I set the .babelrc to use es2015 I get the error:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
I already installed the dependencies
npm install babel-preset-es2015
npm install babel-preset-react
npm install babel --save-dev
My package.json
{
"name": "redux-cardeck",
"private": true,
"version": "0.0.1",
"engines": {
"node": "6.11.4"
},
"description": "a Sails-Redux application for multi-player online card game",
"keywords": [
"sailsjs",
"redux",
"es2015",
"webpack"
],
"dependencies": {
"axios": "^0.13.1",
"babel-cli": "^6.26.0",
"babel-plugin-transform-class-properties": "^6.11.5",
"babel-plugin-transform-object-rest-spread": "^6.6.5",
"babel-polyfill": "^6.7.2",
"babel-preset-stage-1": "^6.13.0",
"connect-mongo": "0.8.2",
"css-loader": "^0.23.1",
"ejs": "2.3.4",
"file-loader": "^0.8.5",
"grunt": "0.4.5",
"grunt-babel": "^6.0.0",
"grunt-contrib-clean": "0.6.0",
"grunt-contrib-coffee": "0.13.0",
"grunt-contrib-concat": "0.5.1",
"grunt-contrib-copy": "0.5.0",
"grunt-contrib-cssmin": "0.9.0",
"grunt-contrib-jst": "0.6.0",
"grunt-contrib-less": "1.1.0",
"grunt-contrib-uglify": "0.7.0",
"grunt-contrib-watch": "0.5.3",
"grunt-sails-linker": "~0.10.1",
"grunt-sync": "0.2.4",
"include-all": "~0.1.6",
"node-sass": "^3.8.0",
"postcss-modules-extract-imports": "^1.0.0",
"postcss-modules-scope": "^1.0.0",
"rc": "1.0.1",
"react": "^0.14.9",
"react-dom": "^0.14.9",
"react-redux": "^4.4.8",
"react-router": "^2.6.1",
"react-tap-event-plugin": "^0.2.2",
"redux": "^3.7.2",
"redux-form": "^5.3.2",
"redux-optimist": "0.0.2",
"redux-optimistic-ui": "^0.3.2",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"redux-undo": "^0.6.1",
"sails": "~0.12.1",
"sails-disk": "~0.10.9",
"sails-hook-babel": "^6.0.1",
"sails-mongo": "^0.12.2",
"sails-postgresql": "^0.11.4",
"sails-service-mailer": "^3.2.1",
"sails-webpack": "^1.0.13",
"sass": "^0.5.0",
"sass-loader": "^3.2.3",
"style-loader": "^0.13.1",
"unexpected-react": "^1.0.0",
"updeep": "^0.16.1",
"url-loader": "^0.5.7"
},
"scripts": {
"debug": "node debug app.js",
"start": "./node_modules/.bin/babel-node app.js"
},
"main": "app.js",
"repository": {
"type": "git",
"url": "git://github.com/vanphuong12a2/redux-cardeck.git"
},
"author": "phuong",
"license": "",
"devDependencies": {
"axios-mock-adapter": "^1.6.1",
"babel-cli": "^6.26.0",
"babel-core": "^6.7.2",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-modules-require-hook": "^4.0.0",
"jsdom": "^8.1.0",
"react-tools": "^0.13.3",
"redux-devtools": "^3.4.0",
"redux-logger": "^2.6.1",
"source-map": "^0.5.3",
"unexpected": "^10.10.8",
"webpack-dev-server": "^1.14.1"
}
}
Someone already used BabelJs on Heroku before? I can't understand why it cant find babeljs at the package.json. I set the local of babel on heroku as
"scripts": {
"debug": "node debug app.js",
"start": "./node_modules/.bin/babel-node app.js"
},
I think it could be a problem with the relative structure of heroku or the fact I do not have a folder with name app
Thanks if someone can help me with this.
By default Heroku doesn't install the dependencies listed on "devDependencies" in your package.json.
You can either move your presets to "dependencies" or follow the steps here to alter this behavior.

npm - not installed; illegal characters in path

Inherited a broken NLog project from a long-gone co-worker...
VS2015 update 2
Latest Node install
Latest npm update 3.10.3
'.net 5.0' project (pre-core 1.0)
My npm node always says 'npm - not installed'
When I right click, I instantly get 'illegal characters in path'
here's my package.json
{
"version": "0.0.0",
"name": "asp.net",
"devDependencies": {
"gulp": "^3.9.0",
"gulp-bower": "^0.0.11",
"gulp-concat": "^2.6.0",
"gulp-install": "^0.6.0",
"gulp-sass": "^2.1.1",
"gulp-uglify": "^1.5.1",
"gulp-util": "^3.0.7",
"gulp-watch": "^4.3.5",
"run-sequence": "^1.1.5",
"browser-sync": "^2.10.0",
"gulp-filter": "^3.0.1",
"main-bower-files": "^2.9.0",
"gulp-rename": "^1.2.2",
"gulp-sourcemaps": "^1.6.0"
}
here's my project.json:
{
"webroot": "wwwroot",
"version": "1.0.0-*",
"dependencies": {
"EntityFramework.Commands": "7.0.0-rc1-final",
"EntityFramework.MicrosoftSqlServer": "7.0.0-rc1-final",
"Microsoft.AspNet.Authentication.Cookies": "1.0.0-rc1-final",
"Microsoft.AspNet.Diagnostics": "1.0.0-rc1-final",
"Microsoft.AspNet.Diagnostics.Entity": "7.0.0-rc1-final",
"Microsoft.AspNet.Identity.EntityFramework": "3.0.0-rc1-final",
"Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",
"Microsoft.AspNet.Mvc": "6.0.0-rc1-final",
"Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-rc1-final",
"Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",
"Microsoft.AspNet.Server.WebListener": "1.0.0-rc1-final",
"Microsoft.AspNet.Session": "1.0.0-rc1-final",
"Microsoft.AspNet.SignalR.Server": "3.0.0-rc1-final",
"Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final",
"Microsoft.AspNet.Tooling.Razor": "1.0.0-rc1-final",
"Microsoft.Extensions.Caching.Memory": "1.0.0-rc1-final",
"Microsoft.Extensions.Configuration.Json": "1.0.0-rc1-final",
"Microsoft.Extensions.Logging": "1.0.0-rc1-final",
"Microsoft.Extensions.Logging.Console": "1.0.0-rc1-final",
"Microsoft.Extensions.Logging.Debug": "1.0.0-rc1-final",
"Microsoft.Extensions.Logging.NLog": "1.0.0-rc1-final",
"Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0.0-rc1-final",
"MvcWebApiCors": "0.3.0"
},
"commands": {
"web": "Microsoft.AspNet.Server.Kestrel",
"ef": "EntityFramework.Commands"
},
"frameworks": {
"dnx451": {
"dependencies": {
"Rally.RestApi": "1.0.0-*"
}
}
},
"exclude": [
"wwwroot",
"node_modules",
"bower_components"
],
"publishExclude": [
"node_modules",
"bower_components",
"**.kproj",
"**.user",
"**.vspscc"
],
"scripts": {
"postrestore": [ "npm install" ],
"prepare": [ "gulp" ]
}
Here's my Bower.json
{
"name": "WebApplication",
"private": true,
"dependencies": {
"bootstrap": "^4.0.0-alpha.2",
"signalr": "^2.2.0",
"font-awesome": "^4.5.0",
"moment": "^2.11.0",
"Chart-js": "^1.0.2",
"tether": "^1.1.1",
"bootstrap-daterangepicker": "2.1.17",
"handlebars": "^4.0.5",
"chosen": "^1.4.2"
}
global.json
{
"projects": [
"src",
"wrap"
],
"sdk": {
"version": "1.0.0-rc1-update1"
}
The overall problem is that none of the css/styles are showing. The site looks skeletal compared to what's on our iis box.
Faced the same issue when tried to install an npm package globally (with -g flag).
Any npm package which I tried to install globally was throwing the same error given below.
npm ERR! code EINVAL
npm ERR! path C:\Users\xxxxxxx'C:\Users\xxxxxxx\AppData\Roaming\npm
npm ERR! Illegal characters in path.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxxxxxx\AppData\Local\npm-cache\_logs\2021-12-15T10_49_39_874Z-debug.log
I checked the PATH variable. All is well.
After some research over the internet, tried the following command
npm bin -g
This showed a weird path.
C:\Users\xxxxxx'C:\Users\xxxxxx\AppData\Roaming\npm
(not in PATH env variable)
After reading this post, I tried to set the path prefix of npm config and it worked!
This is how I set it.
npm config set prefix C:\Users\xxxxxxx\AppData\Roaming\npm
You can check & confirm the same using,
npm config get prefix
Ideally, this path was getting added to the '.npmrc' file in my home directory (C:\Users\xxxxxxx). If you don't have any other content in the '.npmrc' file (like an access token to your private npm registry), deleting the file will fix this issue.
Just posting here, so that someone facing similar issue might find
this helpful as the question title relates to this issue.
Found the answer...
Some packages (for instance webpack) have dependency on packages that are not supported on windows which causes NPM to print warning about it. VS interprets it as generic problem and says that packages are not installed even though in reality this warning should be ignored.

ESLINT: Parsing error: Unexpected token in package.json

{
"name": "react-redux-starter-kit",
"version": "1.0.0",
"description": "This would be the starter kit for react projects.",
"main": "index.html",
"scripts": {
"start": "rm -rf build/ && rm -rf dist/ && webpack && webpack-dev-server --progress --colors",
"build": "rm -rf build/ && rm -rf dist/ && NODE_ENV=production webpack --config ./webpack.production.config.babel.js --progress"
},
"repository": {
"type": "git",
"url": "git+https://rahulshettyprdxn#bitbucket.org/rahulshettyprdxn/react-devops.git"
},
"keywords": [
"react",
"webpack",
"react-native"
],
"author": "Rahul Shetty",
"license": "MIT",
"homepage": "https://bitbucket.org/rahulshettyprdxn/react-devops#readme",
"devDependencies": {
"babel-core": "^6.5.2",
"babel-eslint": "^5.0.0",
"babel-loader": "^6.2.3",
"babel-plugin-react-transform": "^2.0.0",
"babel-preset-es2015-without-strict": "0.0.2",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"eslint": "^2.2.0",
"eslint-plugin-react": "^4.1.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.9.0",
"image-webpack-loader": "^1.6.3",
"node-sass": "^3.4.2",
"react-css-modules": "^3.7.5",
"react-transform-hmr": "^1.0.2",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"bootstrap": "^3.3.6",
"react": "^0.14.7",
"react-bootstrap": "^0.28.3",
"react-dom": "^0.14.7"
}
}
Below is the error that I am receiving:
Parsing error: Unexpected token at line 2 col 8 in Atom editor.
Note that I'm currently getting this error on Windows 10.
ESLint Version:
"eslint": "^2.2.0",
"eslint-plugin-react": "^4.1.0"
I have installed linter-eslint in my Atom editor and Global npm ESLint setting is off.
I am quite confused as the error message is not that descriptive. This in no way is hampering my project but I am quite inquisitive as to why I am getting this error in my editor.
ESLint is for validating JavaScript, not JSON.
From the website:
ESLint
The pluggable linting utility for JavaScript and JSX
[emphasis mine]
(You can try your code on the online demo here, and you get the same error)
If you want to use ESLint on a JSON file, you could use a package like eslint-plugin-json.