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

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.

Related

Next.js is not recognizing '#types/react'

When I try to run my Next.js app with npm run dev I get an error message saying that I don't have the required packages to run Next with Typescript:
Please install #types/react by running:
npm install --save-dev #types/react
If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).
However, the module '#types/react' is installed. I tried running npm install --save-dev #types/react and got no error messages (just a bunch of warnings but I don't think they are the problem).
How can I solve this and run the project?
Seems like there is a bug in the current #types/react version (specifically v18.0.2), you can downgrade to 18.0.1 with npm install --save-dev #types/react#18.0.1
Source: https://github.com/vercel/next.js/issues/36085
I used yarn add -D #types/react#18.0.1 and it worked perfectly!
Netsu is right, seems like there is a bug in the current #types/react version (specifically v18.0.2).
My solution was to add --only to production:
RUN yarn install --only=production
An alternative approach i took here was to create a new nextjs project using npx create-next-app. And then copied the versions of all the dependencies and devDependencies.
Here is a sample package.json. I got this after create new nextjs project.
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.2.4",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"#types/node": "18.7.1",
"#types/react": "18.0.17",
"#types/react-dom": "18.0.6",
"eslint": "8.21.0",
"eslint-config-next": "12.2.4",
"typescript": "4.7.4"
}
}
Copy all the versions listed in the package.json you get after create new nextjs project. This will ensure that your core dependencies are compatible with each other.

How to fix dependency error with React App using Jest

So I installed Jest in a new project and the app stopped running, due to the error below.
Summary: It's telling me that I've manually installed a dependency to node_modules, something I didn't do, and it's asking me to delete my entire node_modules and yarn.lock. But those steps aren't working.
Note: Removing the dependency from package.json then deleting node_modules and yarn.lock does fix the problem, but when I install jest again, it falls into the same problem.
The steps I took to install jest, here:
$ yarn add --dev react-test-renderer
$ yarn add --dev jest babel-jest #babel/preset-env #babel/preset-react react-test-renderer
The error message
$ 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:
"jest": "26.6.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of jest was detected higher up in the tree:
C:\WORK\plotting-a-chart\node_modules\jest (version: 26.6.3)
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 "jest" 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:\WORK\plotting-a-chart\node_modules\jest is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls jest in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed jest.
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!
I tried doing all the steps, I already use yarn, I even cleared my yarn cache before doing the steps 1 to 4.
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder;
Delete node_modules in your project folder;
Remove "jest" from dependencies and/or devDependencies in the package.json file in your project folder;
Run npm install or yarn, depending on the package manager you use.
I'm out of ideas.
// package.json
{
"name": "project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"node-sass": "^5.0.0",
"prismjs": "^1.23.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-hook-form": "^6.15.5",
"react-icons": "^4.2.0",
"react-resizable": "^1.11.1",
"react-scripts": "4.0.3",
"react-vis": "^1.11.7"
},
"scripts": {
"dev": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"unit": "jest"
},
"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": {
"#babel/preset-env": "^7.13.12",
"#babel/preset-react": "^7.13.13",
"babel-jest": "^26.6.3",
"babel-plugin-root-import": "^6.6.0",
"jest": "^26.6.3",
"react-test-renderer": "^17.0.2"
}
}
// babel.config.js
module.exports = {
presets: ['#babel/preset-env', '#babel/preset-react'],
};
You don't have to npm install jest. The error is telling you :
Don't try to install it manually.
Here is what it says on react documentation
If you use Create React App, Jest is already included out of the box
with useful defaults.
To solve your issue you should run this :
npm uninstall --save-dev jest
npm uninstall --save jest
rm node_modules
npm i
I did solved this issue by creating a .env file in the project folder, with SKIP_PREFLIGHT_CHECK=true, and now the test runner seems to be working perfectly.
When I encountered this problem, I used the stack trace to figure out what version of jest it was looking for. I then yarn removed it and reinstalled the version it wanted. Just to be safe I would do the entire process it suggests but make sure you install the version it asks for

I am facing some vulnerabilities issue while deploying React App via NPM

New to React Js. Here is the short summary of my app, I created a small react app which filter the team members with the text input. It is working well in development environment. Which is working while start of NPM. Please check and where I am doing mistake or give me a chance to correctness of the process.
My project> NPM start
My site is loading in local or dev env.
Followed deployment process from this link. https://create-react-app.dev/docs/deployment/
But when I tried to deploy the site to GitHub, I am facing some vulnerabilities security issue. I have shared the step by step what I am currently doing. I see the issue is in the Mime Package. But I don`t know how to upgrade or degrade the package. Kindly check and guide in my wrong way.
My project> npm install --save gh-pages
My project>npm audit
Manual Review
Some vulnerabilities require your attention to resolve
Visit https://go.npm.me/audit-guide for additional guidance
Moderate Regular Expression Denial of Service
Package mime
Patched in >= 1.4.1 < 2.0.0 || >= 2.0.3
Dependency of git
Path git > mime
More info https://npmjs.com/advisories/535
found 1 moderate severity vulnerability in 1666 scanned packages
1 vulnerability requires manual review. See the full report for details.
But Facing issue when I try to deploy to github account. Can any one help me on this.
My Package.json is also attached
{
"name": "spiceliveteam",
"version": "0.1.0",
"homepage": "https://nachisgit.github.io/TeamMembers",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"git": "^0.1.5",
"npm-git-install": "^0.3.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"tachyons": "^4.12.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"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": {
"gh-pages": "^3.1.0"
}
}
After a few hours of R and D. I recreated the package.json which solves my issue. Thanks for who respond to my answer. This will help full to some one.
For creating Package Kindly use npm init.
Add the dependencies from previous packages and then proceed with build and deploy. Happy coding.

Explanation for angular 2 package.json file

I'm not willing to use typescript compiler provided in angular 2 quick start guide and will use gulp.js instead. However there are few questions I have about package.json file provided on angular website:
{
"name": "angular-starter",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}
I'm sure that few things like tsc, tsc:w script comands alongside typescript devDependency can be safely removed, but am not sure about purpose for things like concurently dependency as well as dependency section in general, could you guys provide more info on all dependencies that follow angular2? I tried looking these up in quickstart guide along apendixes, but had no luck as they are very short.
concurently is and npm package which allows to run multiple CLI commands in one shot, see line below in package.json. concurrent command is coming from concurrenlty. You can remove that safely.
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
dependency section in package.json file lets you keep track of project dependencies. Using reference of these packages in dependency section allows you to use module bundler like webpack, browserify etc. It also keeps your project linked to specific versions of each of these packages if new version introduce any breaking changes etc. Having this section in package.json file lets you remove packages directory (node_modules) to be under source control. Installing these packages again on lets say another machine requires only package.json and dependency section in it.
For each package in dependency section search npmjs website for more details.
Well adding some points with #nexus23's answer. my answer is not completed i know but for comment it is too long so posting as answer hope this will help somene.
Package.json is the important file for the project where you import our dependencies list which you used in your project.
Basically there are three types of dependencies
Dependency
DevDependency
peerDependency
for more documentation refer here in the answers.
now come to the point i.e answer to this question. there are few dependencies which we have to include for make our angular2 project run.which is listed below.
angular2 -- is the basic file for the angular2 project. which is most important file for our project. (stable latest version is angular2 beta)
systemjs -- is the Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS. Works with both Traceur and Babel.
we use systemjs Config for setup the baseUrl, to Import main file etc in our main file i.e index.html like following:
<script>
System.config({
baseURL: '<%= APP_BASE %>',
paths: {'*': '*.js?v=<%= VERSION %>'},
defaultJSExtensions: true
});
</script>

Node.js Heroku Deployment - Fails To Exec Postinstall Script To Install Bower

Deployment of my Node.js MEAN app to heroku fails with the following errors. I can't figure out what is wrong with the bower install...
Here is the error message:
2606 info postinstall App#1.0.0
2607 verbose unsafe-perm in lifecycle true
2608 info App#1.0.0 Failed to exec postinstall script
2609 error App#1.0.0 postinstall: `./node_modules/bower/bin/bower install`
2609 error Exit status 1
2610 error Failed at the App#1.0.0 postinstall script.
2610 error This is most likely a problem with the App package,
2610 error not with npm itself.
2610 error Tell the author that this fails on your system:
2610 error ./node_modules/bower/bin/bower install
! Push rejected, failed to compile Node.js app
Here is my Bower.json
{
"name": "mean",
"version": "1.0.0",
"dependencies": {
"bootstrap": "*",
"angular": "*",
"angular-resource": "*",
"angular-cookies": "*",
"angular-ui-utils": "*",
"angular-bootstrap": "*",
"json3": "*",
"jquery": "*",
"angular-ui-router": "*",
"angular-animate": "*",
"move.js": "git://github.com/visionmedia/move.js.git#~0.3.3",
"animate.css": "*",
"ngAnimate-animate.css": "*",
"angularLocalStorage": "~0.1.7",
"jquery-nicescroll": "*"
},
"resolutions": {
"angular": "1.2.4"
}
}
Here is my Package.json
"scripts": {
"start": "node node_modules/grunt-cli/bin/grunt",
"test": "node node_modules/grunt-cli/bin/grunt test",
"postinstall": "./node_modules/bower/bin/bower install"
},
I get this error a lot too. every third push to heroku fails because of bower postinstall.
While this is not a robust fix, and I don't fully understand why it helps! but this hepled me, so hopefully will help someone else.
Despite /lib folder is being added to .gitignore, force add it before deploying heroku
git add -f public/lib
git commit -m "force add bower libs"
git push heroku master
This is likely related to this issue with bower, the cause of which is currently still being investigated:
https://github.com/bower/bower/issues/933
I've also been having some similar issues with the bower install command failing on heroku. Here's what worked for me:
1. Temporarily remove node_modules and bower_components from .gitignore.
This seemed to fix an ENOENT error when trying to install Angular using bower through a postinstall script in heroku.
Note: If you specify a different installation directory for bower components in your .bowerrc file, then make sure that directory is not present in your .gitignore.
2. Edit (or create) .bowerrc and tell it to use temp directories that are local to the project directory:
{
"storage": {
"packages": ".bower-cache",
"registry": ".bower-registry"
},
"tmp": ".bower-tmp"
}
By default, bower was trying to use a directory in /app, which was resulting in ENOTEMPTY errors (maybe because it was trying to clear those directories, but it didn't have access because they are shared with other users? Just throwing out a guess...)
Using a directory that's local to the project fixed the conflicts.
Hope this helps someone else.
Note: Even after performing the above steps, the bower install command may still occasionally fail. However, it generally works the second or third time - just try running the command again... Until the underlying issue is resolved, that's the best advice that I can offer.
I had the same issue. The problem was that in the bower.json file:
{
"name": "mean",
"version": "0.1.3",
"dependencies": {
"angular": "1.2.8",
"angular-resource": "latest",
"angular-cookies": "latest",
"angular-mocks": "latest",
"angular-route": "latest",
"bootstrap": "3.0.3",
"angular-bootstrap": "0.10.0",
"angular-ui-utils": "0.1.0"
}
}
"bower install" is unable to determine the angular version and requires manual intervention to choose the right version:
Unable to find a suitable version for angular, please choose one:
1) angular#1.2.8 which resolved to 1.2.8 and has mean as dependants
2) angular#1.2.9 which resolved to 1.2.9 and has angular-cookies#1.2.9, angular-mocks#1.2.9, angular-resource#1.2.9, angular-route#1.2.9 as dependants
3) angular#>= 1.0.2 which resolved to 1.2.10-build.2176+sha.e020916 and has angular-ui-utils#0.1.0 as dependants
4) angular#>=1 which resolved to 1.2.10-build.2176+sha.e020916 and has angular-bootstrap#0.10.0 as dependants
Prefix the choice with ! to persist it to bower.json
[?] Answer:
So Heroku fails when it executes the script.
FIX
Just change the version of angular in your bower.json file:
"angular": "1.2.10",
1.2.9 will also work.
#ac360 This isn't an issue with bower at all. It's generally a warning you can get if different libraries use the same dependency however a different version. You should never add your public/lib to the repo. That defeats the purpose of what bower can be used for. Keep your repo as light as possible, and let dependencies download and resolve at build time so you can get the latest and greatest within the parameters defined in your bower.json
To resolve this issue completely for auto-deploys, bower gives us a property on the bower.json called resolutions
Simply create the following in your bower.json
"resolutions": {
"ember": "1.2.10"
}
The reason you still had problems even if you had resolutions defined was because the version you picked wasn't going to satisfy all dependencies so the question came up during the heroku install.
Alternatively, you can build locally, and when you are asked which version to choose from, if you preceed the number choice with the bang ! symbol, bower will update your bower.json for you!
See: https://github.com/bower/bower/issues/532
I got it working by ensuring to save bower in package.json using the command below. The save will install bower using npm on server before attempting to run bower install
npm install bower --save
the postinstall script in package.json
"postinstall:"bower install" worked on heroku after that.

Categories