We Keep Coding

Compile Error: Module Not Found. React with Clarifai API

I tried to compile my project and ended with this error message....
package.json
"name": "facerecognitionbrain",
"version": "0.1.0",
"private": true,
"dependencies": {
"clarifai": "^2.9.1",
"particles-bg": "^2.5.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-parallax-tilt": "^1.7.67",
"react-scripts": "^5.0.1",
"tachyons": "^4.12.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"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"
]
},
"devDependencies": {
"web-vitals": "^3.1.1"
}
}
hope someone has a solution...thanks
Other suggestions I have tried is to copy package.json and package-lock.json from the github repo of our instructor, deleted all node_modules and re-installed with npm ci. It just reduced my errors to 2.

it seems you dont have these packages installed. You can try to run npm install clarifai-nodejs-grpc web-vitals.
Also deleting the package.lock.json and node_modules and running npm install again should work if you have these two packages listed on your package.json dependencies.
Added after addition of the package json to the question:
It seems from your package json that you have installed the clarifai package: github.com/Clarifai/clarifai-javascript, and not the clarifai-nodejs-grpc package: github.com/Clarifai/clarifai-nodejs-grpc.
Make sure to install the right one according to your use case, and use the right one on the code.
If you could also add how you are importing the package on your code, it could make things clearer. But it seems you are importing clarifai-nodejs-grpc package in the code while you have clarifai package installed.
According to their github you should use clarifai-nodejs-grpc
So:
remove the clarifai from the dependencies on you package json
run npm install
run npm install clarifai-nodejs-grpc

Define dependencies in package.json so that the react package written in React v17 works in react 18 also

I have written an npm package in React v17.0.2.
The package.json file looks like this
{
"name": "shoe-store",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.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"
]
},
"devDependencies: {
"react-scripts": "5.0.1"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"peerDependencies: {
"react": ">=17.0.2",
"react-dom": ">=17.0.2"
}
}
}
After publishing the package, the package works fine in React v17.0.2, but shows error when used in React v18.2.0. The error states mismatching version of React and renderer (such as React DOM) or you might have more than one copy of react in the same app.
My question is how can we write a package in React v17 or make changes to an existing package written in React v17 so that it works in React v17, React v18 and above(when it comes)
Thanks in advance to anyone who can provide a solution to this.

i think all looks gud you have react & react-dom specified as peerDependencies, you just need to remove react-dom & react from your dependencies, right now you are telling npm to explicitly install your deps version and not letting peerDependency do its thing and rely on app's react & react-dom version

How to fix this issue with Sass in my React project?

So i've been trying (without sucess) for 2 days straight every possible way of using sass in my project.
I'm using 7-1 architecture for sass and a basic components-layout-pages architecture for the javascript.
The problem is i keep getting this error :
Failed to compile ./src/sass/main.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/sass/main.scss) Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93) For more information on which environments are supported please see: https://github.com/sass/node-sass/releases/tag/v5.0.0 This error occurred during the build time and cannot be dismissed.
From what i've understood almost all sass compiler are deprecated and i found out that Dart sass might be the best one so i've been installing it and setting up the script, however even if most of the compiler did compile the code just fine, my app won't load...
I don't know what to do about it and can't wrap my head around it.
so i'm here begging for your help.
By the way I read almost all question related to sass dart sass node and react on here and havent found an answer to mine.
If you need some more details about the code please let me know.

Solved by installing sass loader this way yarn add -D sass-loader sass webpack and the matching webpack version.
This is the actual package.Json file right now:
{
"name": "cyzbot-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14",
"postcss-cli": "^9.1.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"sass": "dart compile-sass.dart ./src/main.scss ./src/main.css",
"prefix": "postcss ./src/main.css --use autoprefixer -d ./public/css/prefixed/",
"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"
]
},
"devDependencies": {
"sass": "^1.52.2",
"sass-loader": "^13.0.0",
"webpack": "^5.73.0"
}
}
Edit: it just happenned again and thanks god i posted the package when it was fixed...
So I just figured out the issue came from me triyong to do an 'npm audit fix' and or 'npm audit fix --force' and there's the code it outputed as i was trying to restart the server:
react-scripts start
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a
dependency:
"webpack": "4.28.3"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in
the tree:
C:\Users\Work\Documents\Code\CyzBot-React\node_modules\webpack (version: 5.73.0)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "webpack" from dependencies and/or devDependencies in
the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if C:\Users\Work\Documents\Code\CyzBot-React\node_modules\webpack is outside your project directory.
For example, you might have accidentally installed something
in your home folder.
7. Try running npm ls webpack in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed webpack.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above
:-) We hope you find them helpful!
And it seems it tried switching back to an older version of react script ( for security issues ) but like 2.1.3 ??
It makes it seems like it's an error from webpack when in fact it's just that the only version of webpack that looks like to be working with that version of react-script is : "webpack": "4.28.3".
So if you just delete your package in node_modules modify the react-script version to the one you use(d) then do yarn install or npm install then start the local server again it should work back now.
At least it did for me.

Npm start on offline win10

I have React project, created on MacOs and i want to run it on win10, but win10 computer in corp's LAN, so i cannot use "npm install" to download all dependencies. Hence i got all of them and builded project via Git, so for now on win10 i have all files are needed to "npm start".
But here are several errors, when i tried to run dev server or builded project:
npm start (== "react-scripts start")
'react-scripts' is not recognized as an internal or external command
npm start (== "node node_modules/.bin/react-scripts start")
Unexpected token '.'
Non of additional slashes before .bin to screening not helped.
npx serve -s build
network to registry.npmjs.org/serve failed.
Unclear why it needs internet at all, i just want to run builded project.
All of advices are to run "npm install" before "npm start", but i cannot connect to central artifactory from our LAN and i already have all of dependencies.
Hence, there are way to just start dev server or pack all project's files in some analogue of .jar totally without internet?
package.json
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^1.1.0",
"#material-ui/core": "^4.11.0",
"arui-feather": "^18.4.0",
"axios": "^0.21.0",
"core-js": "^3.7.0",
"date-fns": "^2.0.0-beta.5",
"material-table": "^1.69.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-router": "latest",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.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"
]
}
}

React app fails to compile after installing 'node-sass'. How to fix "Module not found" error?

I've built an react.js app which runs fine before installing 'node-sass' using npm install.
The app runs normally in the production build but fails to compile in development build, when using npm start.
This problem doesn't occur with any other package except 'node-sass'
The app worked fine when I imported it to another PC and installed 'node-sass' there.
I tried reinstalling node and npm but to no avail.
I've uninstalled node-sass globally too.
This is my package.json:
"name": "my_app_name",
"version": "0.1.0",
"private": true,
"dependencies": {
"gh-pages": "^2.1.1",
"node-sass": "^4.12.0",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-scripts": "3.2.0"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "npm run build && gh-pages -d build",
"start": "react-scripts start",
"build": "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"
]
}
}
This is the error message i keep getting:
Failed to compile.
./node_modules/react-dev-utils/formatWebpackMessages.js
Module not found: Can't resolve 'path\to\app\node_modules\babel-preset-react-app\node_modules\#babel\runtime/helpers/slicedToArray' in 'path\to\app\node_modules\react-dev-utils'

install node-sass globally and not as a package.
npm i node-sass