I am trying to install and use the eslint-plugin-react-hooks plugin in a project. Usually I'd simply run npm install or yarn add but the directions say to use react-scripts because I'm using create-react-app. How do I do that? Do I add a script and list it as a dependency on the package.json file or is there some other way?
Any help is appreciated.
Related
I write a react app and tried to dockerized it.
after i do this it doesn't compile corectly, it doesn't find "sass" module and this is my error:
Failed to compile.
./src/index.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-
1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-
oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/index.scss)
Cannot find module 'sass'
Require stack:
- /app/node_modules/sass-loader/dist/utils.js
- /app/node_modules/sass-loader/dist/index.js
- /app/node_modules/sass-loader/dist/cjs.js
- /app/node_modules/loader-runner/lib/loadLoader.js
- /app/node_modules/loader-runner/lib/LoaderRunner.js
- /app/node_modules/webpack/lib/NormalModule.js
- /app/node_modules/webpack/lib/NormalModuleFactory.js
- /app/node_modules/webpack/lib/Compiler.js
- /app/node_modules/webpack/lib/webpack.js
- /app/node_modules/react-scripts/scripts/start.js
and this is my dockerfile:
From node:14.16.1-alpine
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts#4.0.3 -g --silent
COPY . ./
CMD ["npm", "start"]
and I don't have docker-compose.
any solution?
I add this line to my docker file but it doesn't work and gets me same Error:
RUN npm install -g sass
To note! node-sass is deprecated as by now!
Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.
Instead you can see that Sass is followed on the Dart sass project!
react-scripts already moved that direction!
The used package now is sass! npm i -g sass or npm i sass --save-dev
If you go to npm sass page
This package is a distribution of Dart Sass, compiled to pure JavaScript with no native code or external dependencies. It provides a command-line sass executable and a Node.js API.
You can install Sass globally using npm install -g sass which will provide access to the sass executable. You can also add it to your project using npm install --save-dev sass. This provides the executable as well as a library.
What should be done
Install sass
Globally
npm i -g sass
or
Locally
npm i sass --save-dev
I personally prefer to always go with local installs! So that npm install will add it automatically! Sometimes too to maintain the versions per project!
And
App compilling and running after install!
old version of react scripts
If you are running on an old version that require node-sass!
Then you can Update to the latest version! And before that! You may like to remove node_modules and package-lock.json.
npm i react-scripts --save
After that npm install to install again the project dependencies
And you can go for installing sass step
npm cache clear --force
npm install sass
To be clear:
1st) try uninstalling it by using this command
npm uninstall node-sass
and then 2nd) try installing sass
npm install --save-dev sass
this worked for me when I was having issues installing sass on a project using create react app
I solve it!
you just need to add this line in to your "dockerfile" so when you build your docker image it should install sass automaticly:
RUN npm install -g sass
and in your "package.json" add this in the "dependencies" that it tells to program what we have in this case we mean we have the specific version of "sass":
"sass": "version number(example:^5.0.0)"
and add this in "scripts" part that tells to program how to work in this case I think it tells that for "scss" files whatch that file and recognize and open it like a "css":
"scss": "sass --whatch scss -o css"
Try install in your terminal this
npm install --save-dev node-sass
and restart your localhost by typing
npm start
Hit Enter on your prompt
After doing these steps make sure to check your dependency go into
package.json
and find
"devDependencies": {
"node-sass": "^yourversion" }
How to add support for SCSS and SCSS modules in Webpack
npm install --save-dev node-sass sass-loader style-loader css-loader mini-css-extract-plugin
Source: https://www.developerhandbook.com/webpack/how-to-configure-scss-modules-for-webpack/#how-to-add-support-for-scss-and-scss-modules-in-webpack
I have the following error with npm start in my React application:
The react-scripts package provided by Create React App requires a dependency:
"webpack-dev-server": "3.11.1"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack-dev-server was detected higher up in the tree:
C:\Users\Username\node_modules\webpack-dev-server (version: 3.11.0)
Usually I fixed this type of issue by running the following code: npm install react-scripts#latest.
But now it seems like that React is not updated yet to the latest webpack-dev-server
Now the question is how to fix that. By the way, I use npx create-react-app for my project, Thanks!
I have write following commands in react project
Open project in command prompt
npm uninstall -g webpack-dev-server
remove web-dev-server folder from node_modules(C:/Users/UserName/Node_Modules)
npm i -g webpack-dev-server#3.11.1
remove package-lock.json and write npm install
after it your react project may be start by npm start
First, remove the node_modules folder and yarn-lock or package-lock.json file.
And, then add this line in your .env file:
SKIP_PREFLIGHT_CHECK=true
Now you can do npm start or yarn start after re-installing the packages. It should work.
Explanation:
For some reasons, you have two versions of webpack-dev-server installed in your project's node_modules. By setting SKIP_PREFLIGHT_CHECK=true in .env file, we are telling npm to ignore such version issues.
Check if node_modules and package-lock.json are present in your home folder, instead of your project folder. If yes, delete those two folders and then go for npm start.
I kind of rushed into creating a React app based on a tutorial that used yarn. Now I'm going to re-create the app from scratch because I'm not satisfied with the reactstrap library, and I'd like to switch to react-bootstrap.
I've re-installed node. However, when I run create-react-app, it says to use "yarn" instead of "npm" as follows:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd react-test
yarn start
I'd like to use npm because it seems like it's more widely used and there are more examples based on it. Am I stuck with yarn, or can I go ahead and use npm?
You can either
1) Remove yarn.lock, and running npm i,
or
2) Run create-react-app app --use-npm
1 ⇢ If you have installed create-react-app then use:
create-react-app --use-npm
2 ⇢ If you are using npx command then use:
npx create-react-app --use-npm
3 ⇢ For existing yarn app, remove the yarn.lock file and run:
npm i
or
npm install
Install create-react-app npm i -g create-react-app --use-npm
Go to desired path using cd command
Add --use-npm create-react-app my-app-name --use-npm
This command will create a folder with the name that you mentioned inside your current path . This folder consists all necessary configuration files needed for a starter code for react application
# Run this to create-react-app using npm
npx create-react-app my-app
# Or run this to create-react-app using yarn
yarn create react-app my-app
I dont know if this helps. But I was having the same problem and did this
npx expo-cli init --npm
and it installed with npm
hope this helps you or someone in the future
For latest versions, the flag is changed to --npm
So if you want to use npm then use it like
npx react-native init YourProject --npm
The npm init react-app my-app command imports many packages to the project, but, why this dependencies are not in the package.json?
The dependencies are in the package.json of react-scripts which your project will depend on when initializing it. The only dependency of your project will be react-scripts.
If you want to manage these yourself you need to eject your project.
I am seeing tutorials with NPM and Node.js that have the ng package handler. However, they run this straight from the command prompt. I am curious if I am missing something to install to run commands like ng serve for example, without having to preface them with npm run like npm run ng serve --open ?
Thank you!
You don't naturally prefix the ng server with npm run
Install the angular-cli globally
npm i -g #angular/cli
Then you will be able to do:
ng serve
ng new [appname]
ng generate component [name]
Without any prefix and from anywhere.
It's not recommended to install #angular/cli globally. Some projects will use different version of angular#cli and executing ng commands will have unexpected result.
Instead, install locally into dev dependencies with:
npm install --save-dev angular#cli
or Yarn:
yarn add --dev angular#cli
After you install locally, you can setup various npm scripts to execute ng commands:
scripts: {
"dev": "ng serve"
}
Run the script:
npm run dev
** Please note, if you have globally installed angular#cli, running the commands mentioned above will use the local angular#cli package from node_modules/.bin.
Also, npx is a tool intended to help round out the experience of using packages from the npm registry. You can read about it more here