what is the minimum react version for #fluentui/react-northstar? - reactjs

This project using react ^17.0.1" with fluentui/react-northstar
but I am getting error as below package.json while running npm i #fluentui/react-northstar. what can be the reason ?
npm i #fluentui/react-northstar npm ERR! code ERESOLVE npm
ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR!
While resolving: client-app#0.1.0 npm ERR! Found: react#17.0.2 npm
ERR! node_modules/react npm ERR! react#"^17.0.1" from the root
project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer
react#"^16.8.0" from #fluentui/react-northstar#0.60.1 npm ERR!
node_modules/#fluentui/react-northstar npm ERR!
#fluentui/react-northstar#"*" from the root project
package.json
{
"name": "client-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.4.0",
"#types/node": "^16.11.21",
"#types/react": "^17.0.38",
"#types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"typescript": "^4.5.5",
"web-vitals": "^2.1.4"
},
"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"
]
}
}

It seems like older versions of the fluientUI library require React16, which is the error you are hitting as you are running React17.
I have a project which uses react 17 and was able to install the following versions:
"#fluentui/react-icons-northstar": "^0.64.0",
"#fluentui/react-northstar": "^0.64.0",

Related

yarn install node-sass problem on macOS 12.4

I cannot install all dependencies for my React project. I am using macOS 12.4, node version is v17.6.0, npm version is 8.5.1 and finally yarn version is 1.22.19.
I am getting this error when I type 'yarn' in terminal:
2 warnings generated.
rm -f Release/sass.a && ./gyp-mac-tool filter-libtool libtool -static -o Release/sass.a Release/obj.target/libsass/src/libsass/src/ast.o Release/obj.target/libsass/src/libsass/src/ast_fwd_decl.o Release/obj.target/libsass/src/libsass/src/backtrace.o Release/obj.target/libsass/src/libsass/src/base64vlq.o Release/obj.target/libsass/src/libsass/src/bind.o Release/obj.target/libsass/src/libsass/src/cencode.o Release/obj.target/libsass/src/libsass/src/check_nesting.o Release/obj.target/libsass/src/libsass/src/color_maps.o Release/obj.target/libsass/src/libsass/src/constants.o Release/obj.target/libsass/src/libsass/src/context.o Release/obj.target/libsass/src/libsass/src/cssize.o Release/obj.target/libsass/src/libsass/src/emitter.o Release/obj.target/libsass/src/libsass/src/environment.o Release/obj.target/libsass/src/libsass/src/error_handling.o Release/obj.target/libsass/src/libsass/src/eval.o Release/obj.target/libsass/src/libsass/src/expand.o Release/obj.target/libsass/src/libsass/src/extend.o Release/obj.target/libsass/src/libsass/src/file.o Release/obj.target/libsass/src/libsass/src/functions.o Release/obj.target/libsass/src/libsass/src/inspect.o Release/obj.target/libsass/src/libsass/src/json.o Release/obj.target/libsass/src/libsass/src/lexer.o Release/obj.target/libsass/src/libsass/src/listize.o Release/obj.target/libsass/src/libsass/src/memory/SharedPtr.o Release/obj.target/libsass/src/libsass/src/node.o Release/obj.target/libsass/src/libsass/src/operators.o Release/obj.target/libsass/src/libsass/src/output.o Release/obj.target/libsass/src/libsass/src/parser.o Release/obj.target/libsass/src/libsass/src/plugins.o Release/obj.target/libsass/src/libsass/src/position.o Release/obj.target/libsass/src/libsass/src/prelexer.o Release/obj.target/libsass/src/libsass/src/remove_placeholders.o Release/obj.target/libsass/src/libsass/src/sass.o Release/obj.target/libsass/src/libsass/src/sass2scss.o Release/obj.target/libsass/src/libsass/src/sass_context.o Release/obj.target/libsass/src/libsass/src/sass_functions.o Release/obj.target/libsass/src/libsass/src/sass_util.o Release/obj.target/libsass/src/libsass/src/sass_values.o Release/obj.target/libsass/src/libsass/src/source_map.o Release/obj.target/libsass/src/libsass/src/subset_map.o Release/obj.target/libsass/src/libsass/src/to_c.o Release/obj.target/libsass/src/libsass/src/to_value.o Release/obj.target/libsass/src/libsass/src/units.o Release/obj.target/libsass/src/libsass/src/utf8_string.o Release/obj.target/libsass/src/libsass/src/util.o Release/obj.target/libsass/src/libsass/src/values.o
env: python: No such file or directory
make: *** [Release/sass.a] Error 127
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/Users/macbook/VSCode/business-front/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack at ChildProcess.emit (node:events:527:28)
gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
gyp ERR! System Darwin 21.5.0
gyp ERR! command "/Users/macbook/.nvm/versions/node/v17.6.0/bin/node" "/Users/macbook/VSCode/business-front/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/macbook/VSCode/business-front/node_modules/node-sass
gyp ERR! node -v v17.6.0
My package.json:
{
"name": "business",
"version": "0.1.5",
"description": "Front-end service fo business",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/egaranti/business-front.git"
},
"author": "eGaranti Devs",
"license": "ISC",
"bugs": {
"url": "https://github.com/business/business-front/issues"
},
"homepage": "www.google.com",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.3",
"#material-ui/lab": "^4.0.0-alpha.60",
"#testing-library/jest-dom": "^5.15.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.24.0",
"dotenv": "^10.0.0",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"node-sass": "^6.0.1",
"on-finished": "~2.3.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-range": "^1.8.13",
"react-redux": "^7.2.6",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-select-search": "^3.0.9",
"react-switch": "^6.0.0",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",
"uuid": "^8.3.2",
"validator": "^13.7.0",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"prod": "serve -l 4001 -s build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "prettier --config .prettierrc \"src/**/*.js\" --write"
},
"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"
]
},
"devDependencies": {
"prettier": "^2.5.0",
"serve": "^13.0.2"
}
}
I tried to solve this problem by installing python3 and Xcode, but it didn't work for me. I didn't any problem for my Windows machine. How can I solve this or Anyone solve this?
SOLVED: I installed pyenv and also install python 2.7.18 using pyenv, then restart the terminal. It works!

Unable to resolve dependency for installing html-parser

I am trying to install npm install react-html-parser in my current project. So I am trying to install the npm install react-html-parser but after I use the command.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
PS D:\Ecommerce\user\ecom> npm install react-html-parser
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: ecom#0.1.0
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.0 || ^15.0.0 || ^16.0.0-0" from react-html-parser#2.0.2
npm ERR! node_modules/react-html-parser
npm ERR! react-html-parser#"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\hp\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\hp\AppData\Local\npm-cache\_logs\2022-02-19T13_09_05_987Z-debug-0.log
Here is my package json file
{
"name": "ecom",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"bootstrap": "^5.1.3",
"is-buffer": "^2.0.5",
"react": "^17.0.2",
"react-bootstrap": "^2.1.1",
"react-dom": "^17.0.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-router-transition": "^2.1.0",
"react-scripts": "5.0.0",
"react-slick": "^0.28.1",
"react-toastify": "^8.2.0",
"slick-carousel": "^1.8.1",
"web-vitals": "^2.1.3"
},
"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"
]
}
}
I don't understand what I can do. Please help me find the solution. Any sort of help would be appreciated. Thank you in advance.
Here is a solution I found in the following answer
The idea is to replace react-html-parser with html-react-parser.
import parse from "html-react-parser";
...
{parse("<HTML string>")}
...
The last release for react-html-parser seems to be from 4 years ago.
If you do not need anything specifically from React version 17, I would go with version 16 in your situation if you really want to use react-html-parser in your project. Looking at the peer dependencies of the react-html-parser package tells us that it is not ok with react 17.
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0 || ^16.0.0-0"
}
Here is a package.json file with the React and ReactDOM version changed accordingly. To keep it simple.
{
"name": "ecom",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"bootstrap": "^5.1.3",
"is-buffer": "^2.0.5",
"react": "^16.8.0",
"react-bootstrap": "^2.1.1",
"react-dom": "^16.14.0",
"react-html-parser": "^2.0.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-router-transition": "^2.1.0",
"react-scripts": "5.0.0",
"react-slick": "^0.28.1",
"react-toastify": "^8.2.0",
"slick-carousel": "^1.8.1",
"web-vitals": "^2.1.3"
},
"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 could also use the --force flag when you run npm install if you really want React 17 and html-react-parser together with the recommended protections disabled.
npm install react-html-parser --force
Instead of using react-html-parser, why don't you use html-react-parser ?
react-html-parser updated 5 years ago, I think something in the body doesn't "match" with current version of react. hmtl-react-parser is updated 7 days ago.
I have faced the same problem with react version "react": "^18.1.0",
I Have Solved the issue using
npm install react-html-parser --legacy-peer-deps .

How do I install and create a sortable tree in ReactJs?

How can I create and install a sortable tree from npm command (npm i react-sortable-tree).
I am trying to install a react-sortable-tree but I am getting following errors:
npm i react-sortable-tree
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: admin-panel#0.1.0
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.3.0" from react-sortable-tree#2.8.0
npm ERR! node_modules/react-sortable-tree
npm ERR! react-sortable-tree#"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\child\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\child\AppData\Local\npm-cache\_logs\2021-08-20T12_59_52_880Z-debug.log
Moreover, I didn't just try to install this package, I tried many npm packages and got the same error message.
I have tried rc-tree, react-sortly react-dnd react-dnd-html5-backend immutability-helper memoize-one, react super tree view, #atlaskit/tree, react-treeview, react-vtree and react-super-treeview plugins but the error is same.
What I did in the morning is just by upgrading the npm version to 7.21.0 and node to v16.7.0.
May be after upgrading, application stopped working and installation but I am not sure.
following is my package.json
========================package.json============================================
{
"name": "admin-panel",
"version": "0.1.0",
"private": true,
"dependencies": {
"#hookform/resolvers": "^2.7.0",
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"bootstrap": "^4.6.0",
"faker": "^5.5.3",
"node-sass": "^4.14.1",
"react": "^17.0.2",
"react-bootstrap": "^1.6.0",
"react-bootstrap-sweetalert": "^5.2.0",
"react-data-table-component": "^6.11.7",
"react-dom": "^17.0.2",
"react-hook-form": "^7.12.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"styled-components": "^5.3.0",
"web-vitals": "^1.1.2",
"yup": "^0.32.9"
},
"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"
]
}
}
My expected result is to develop a sortable tree using reactjs. thank you for the help.

EVERY TIME I RUN "npm run build" i got this error

this is the error shown in terminal when i run "npm run build"
'CI' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reminder#0.1.0 build: `CI= react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reminder#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
this is my package.json
and i think i have error due to "build" : "CI= react-scripts build"
so please review my code and answer it
{
"name": "reminder",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "CI= react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}

Issue with use of env-cmd in react application

System:
OS: Windows 10
IDE: Visual Studio Code
I'm working on a react application which contains below package.json
{
"name": "test-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"animakit-expander": "^2.1.4",
"animakit-rotator": "^2.1.3",
"axios": "^0.19.0",
"circular-json": "^0.5.9",
"env-cmd": "^10.0.1",
"file-saver": "^2.0.2",
"jquery": "^3.4.1",
"jsonwebtoken": "^8.5.1",
"jszip": "^3.2.2",
"mdbreact": "^4.22.1",
"rc-queue-anim": "^1.8.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-if-elseif-else-render": "^1.0.2",
"react-lazylog": "^4.4.1",
"react-loading-overlay": "^1.0.1",
"react-native-orientation-loading-overlay": "^0.1.6",
"react-overlay-loader": "0.0.3",
"react-overlay-loading": "^1.0.3",
"react-scripts": "3.2.0",
"react-scrollbar": "^0.5.6",
"react-transition-group": "^4.3.0",
"reactjs-popup": "^1.5.0",
"reactstrap": "^8.1.1",
"velocity-react": "^1.4.3"
},
"scripts": {
"start": "env-cmd -f ./.env.dev react-scripts start",
"start-dev": "env-cmd -f ./.env.dev react-scripts start",
"test": "react-scripts test --coverage",
"eject": "react-scripts eject",
"build": "react-scripts build",
"start1": "react-scripts start"
},
"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"
]
}
}
When I run the command in the terminal, npm run start, I'm facing below issue:
> test-app#0.1.0 start C:\dev\test-app
> env-cmd -f ./.env.dev react-scripts start
'-f' is not recognized as an internal or external command,
operable program or batch file.
spawn -f ENOENT
internal/process/per_thread.js:189
throw errnoException(err, 'kill');
^
Error: kill ENOSYS
at process.kill (internal/process/per_thread.js:189:13)
at TermSignals._terminateProcess (C:\dev\test-app\node_modules\env-cmd\dist\signal-termination.js:47:28)
at process.terminateSpawnedProcessFuncHandlers.<computed> (C:\dev\test-app\node_modules\env-cmd\dist\signal-termination.js:20:30)
at Object.onceWrapper (events.js:300:26)
at process.emit (events.js:210:5)
at process.exit (internal/process/per_thread.js:158:15)
at TermSignals._uncaughtExceptionHandler (C:\dev\test-app\node_modules\env-cmd\dist\signal-termination.js:68:17)
at process.<anonymous> (C:\dev\test-app\node_modules\env-cmd\dist\signal-termination.js:40:53)
at process.emit (events.js:210:5)
at process._fatalException (internal/process/execution.js:150:25) {
errno: 'ENOSYS',
code: 'ENOSYS',
syscall: 'kill'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 7
npm ERR! test-app#0.1.0 start: `env-cmd -f ./.env.dev react-scripts start`
npm ERR! Exit status 7
npm ERR!
npm ERR! Failed at the test-app#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\me\AppData\Roaming\npm-cache\_logs\2020-01-09T07_15_50_457Z-debug.log
and where as, when I run env-cmd -f ./.env.dev react-scripts start directly in any terminal, my application is working fine.
Please provide your suggestions.
Can you try placing the .env.dev file at the same folder level as package.json and try running the script by changing it to
env-cmd -f .env.dev react-scripts start

Resources