Hello everyone I just added sass in all possible ways to my app by npm install sass by npm install node-sass by yarn add sass-loader even by sudo npm install --save-dev --unsafe-perm node-sass all these commands by yarn also and my app tells me to add sass :/
Oh I finally did it, I don't know for sure but I guess when installing a new thing node sass or anything you should re-run the react app refresh or even ctrl+f5 won't work I have right now 2 tabs of my react app one is http://localhost:3000/ the other one http://localhost:3001 I commanded yarn start again after installing and it work while the first one is still open and it doesn't work
Hope this will help others
Below is the documented process for adding sass to react app using yarn
yarn add node-sass
Rename the .css files to .scss and update the import statements.
I just did it on my machine and it works.
Related
I'm new to react and decided to try another method to start a project instead of create-react-app which i regret, I used a site createapp.dev which uses a parcel bundler instead of react-scripts bundler so after i was done with the project i tried deploying it to github pages but could not i've read the parcel documentation but still no help so i restarted the project with create-react-app then copied the code but now i'm swimming in a bunch of errors
1.Install missed packages
if you use:
1.npm : npm install --save react-router-dom sass-loader sass
2. yarn : yarn add react-router-dom sass-loader sass
I want to install SASS to my react app.
I try yarn add node-sass my console return error:
./src/comopnents/Form/Form.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./src/comopnents/Form/Form.scss)
Node Sass version 7.0.1 is incompatible with ^4.0.0.
I found advice to uninstall node-sass and install sass. I did it, but then I have got this error:
../src/comopnents/Form/Form.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./src/comopnents/Form/Form.scss) To import Sass files, you first need to install node-sass. Run npm install node-sass or yarn add node-sass inside your workspace. Require stack:
/Users/madlen/(...)/node_modules/sass-loader/lib/loader.js
/Users/madlen/(...)/node_modules/loader-runner/lib/loadLoader.js
/Users/madlen/(...)/node_modules/loader-runner/lib/LoaderRunner.js
/Users/(...)/node_modules/webpack/lib/NormalModule.js
/Users/(...)/node_modules/webpack/lib/NormalModuleFactory.js
/Users/(...)/node_modules/webpack/lib/Compiler.js
/Users/(...)/node_modules/webpack/lib/webpack.js
/Users/(...)/node_modules/react-scripts/scripts/start.js
I try to upgrate yarn, add sass-loader, nothing helps
Do this in your package json
"node-sass": "npm:sass#^1.49.9",
React still asks for node-sass after removing it and replacing with sass so you can alias it like this and now react will use sass
Maybe try updating your project's react-scripts, as doing so fixed the issue for me.
I was having the same issue - saw advice elsewhere to switch node-sass out for sass, and then had the same errors mentioned in the OP. Tried Mark O's solution to alias sass, which worked. However, then I tried setting up absolute imports in my project (with jsconfig.json in the way described here), and that was mysteriously failing too.
I then realized that my project had a very old version of react-scripts for some reason, as it was on 2.x.x. So I swapped react-scripts in my package.json to be "react-scripts": "4.0.3", ran npm install, did npm run start and now absolute imports work. I then tried using sass instead of node-sass again and that works too (npm uninstall node-sass, then npm install sass).
try stopping the current development server, and install node-sass again.
I was having similar problem. These steps fixed my problem.
Delete node_modules rm -rf node_modules
Delete package-lock.json rm package-lock.json
Run npm install or yarn install
I am using;
node-sass: ^6.0.1
npm: 7.24.2
node: v16.13.0
I'm going in circles with npx trying to start a new project. Here's what I get:
"PS C:\Users\John\Documents\WebSites\react_projects> npx create-react-app material-ui
Need to install the following packages:
create-react-app
Ok to proceed? (y) y
"You are running create-react-app 4.0.3, which is behind the latest release (5.0.0).
"We no longer support global installation of Create React App.
Please remove any global installs with one of the following commands:
npm uninstall -g create-react-app
yarn global remove create-react-app
The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/"
When I type npm uninstall -g create-react-app, I get "up to date, audited 1 package in 495ms. found 0 vulnerabilities."
So I try to create the app again with npx, and I get this:
"Need to install the following packages:
create-react-app
Ok to proceed? (y)"
So I press y, and I get the first error message again. I just go in circles. How can I fix this?
Refer to official reactjs website you need to have ""Node >= 14.0.0 and npm >= 5.6"" on your machine. https://reactjs.org/docs/create-a-new-react-app.html .
Also yarn create is available in Yarn 0.25+
so you might want to check these versions
npm
stands for node package manager. It helps to install, migrate apps by adding dependencies in package.json file. You only need to run npm i. For example in react API call npm i axios you should run and import in file in order to use axios features. Also all you need to have is package.json following dependencies and packages will be added(except node_modules folder as it comes with packages and more in size).
You can use npm to start, build, eject, watch and test.
npx is a CLI tool which provide way to install and manage dependencies hosted in npm registry. It is bundled with npm since 5.2.0v. It is helpful in installing and getting started with frontend JS libraries like reactjs, angularjs, vuejs, Sveltejs or boilerplate apps.
Missing package "metro" in the project at D:\ReactNative\FirstProject. This usually means react-native is not installed. Please verify that dependencies in package.json include "react-native" and run yarn or npm install.
Error: Missing package "metro" in the project at D:\ReactNative\FirstProject. This usually means react-native is not installed. Please verify that dependencies in package.json include "react-native" and run yarn or npm install.
enter image description here
I had the same issue after installing
react-native-paper
After follow this steps all worked again
Remove node_modules folder.
Install all dependencies again, run npm install. If show any error Remove package-lock.json.
Run npm start again.
Happy coding.
you don't really need to delete node_modules folder.
just update it by typing:
1/ npm : npm install
or
2/ yarn : yarn install
in your terminal. That will update the node_modules folder content as well as creating all missing files without the need to reinstall it from scratch.
I deleted the folder "node_modules" then run "npm install" again. It worked for me.
I had this issue after I installed react-native-svg
Maybe there is some sort of naming conflict is causing this error? Deleting node_modules and running npm install again fixed it for me.
I was getting the same problem, after running 'npm install --global expo-cli' it solved the issue or you can run npm install
I had this issue after installing #react-native-community/hooks
You don't need to delete any node_modules folder.
Installing react-native again solved the problem for me.
npm i react-native
Try Using npm i metro
Worked for me
try to start the project from main folder created by expo init.
i.e opening the project folder directly on you visual studio
It happened to me when you tried install #react-native/bottom-tabs. But I've installed this package with npm, so I removed this package and installed it again with yarn and it fix my problem with no need to remove node_modules.
You are getting this problem based on how you created the program. So, when I created it from the terminal, following this instruction: https://reactnative.dev/docs/environment-setup it worked, but when I tried to create the program inside of the terminal in an existing project, I got the error.
installing expo and expo start working for me.
I experienced the same issue, I'm using expo managed workflow, and cleaning cache has worked for me.
expo r -c is the command I used.
I installed bootstrap via npm install already and i tried to import it to my App.js file:
import './bootstrap/dist/css/bootstrap.min.css'
But then the app return this on the browser:
TypeError: t(...).isPlaceholder is not a function
Could someone please explain why and how to fix?
Thank you
For me, I saw these errors when I bumped #babel dependencies a few minor versions (several packages and plugins).
What helped was removing the node_modules directory and then installing all the packages again.
Remove node_modules: rm -rf ./node_modules
Install packages yarn or npm i
Run your project again
I just encountered this error.
To fix it, make sure you're not mixing up your package managers. I was using yarn, but then used npm because that's what we use at work.
you should add or install your modules using the same package manager
For me it works with a standard create-react-app structure via:
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
For us, it's a yarn bug related to using yarn link with a messy lockfile. The solution was to use yarn-deduplicate.
Prior to finding that fix, my workaround was
yarn link other-repo from main-repo
yarn install from main-repo
yarn install --check-files from other-repo
Which can be done using an alias