Search code examples
node.jsreactjsnpmsassnode-sass

How can I fix node

When I try to build my react application by running 

react-scripts build

I get an error which is : 

react-scripts build
Creating an optimized production build...
Failed to compile.

./src/components/header/Header.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:
- C:\Users\ITland\AppData\Roaming\npm\node_modules\react-scripts\node_modules\sass-loader\dist\getDefaultSassImplementation.js
- C:\Users\ITland\AppData\Roaming\npm\node_modules\react-scripts\node_modules\sass-loader\dist\getSassImplementation.js
- C:\Users\ITland\AppData\Roaming\npm\node_modules\react-scripts\node_modules\sass-loader\dist\index.js
- C:\Users\ITland\AppData\Roaming\npm\node_modules\react-scripts\node_modules\sass-loader\dist\cjs.js
- C:\Users\ITland\AppData\Roaming\npm\node_modules\react-scripts\node_modules\loader-runner\lib\loadLoader.js
- C:\Users\ITland\AppData\Roaming\npm\node_modules\react-scripts\node_modules\loader-runner\lib\LoaderRunner.js
- C:\Users\ITland\AppData\Roaming\npm\node_modules\react-scripts\node_modules\webpack\lib\NormalModule.js
- C:\Users\ITland\AppData\Roaming\npm\node_modules\react-scripts\node_modules\webpack\lib\NormalModuleFactory.js
- C:\Users\ITland\AppData\Roaming\npm\node_modules\react-scripts\node_modules\webpack\lib\Compiler.js
- C:\Users\ITland\AppData\Roaming\npm\node_modules\react-scripts\node_modules\webpack\lib\webpack.js
- C:\Users\ITland\AppData\Roaming\npm\node_modules\react-scripts\scripts\build.js

So install node-sass by following command : 

npm install node-sass

and this is the log : 

> node-sass@4.14.1 install C:\Ecommerce\ecommerce\node_modules\node-sass
> node scripts/install.js

Cached binary found at C:\Users\ITland\AppData\Roaming\npm-cache\node-sass\4.14.1\win32-x64-72_binding.node

> node-sass@4.14.1 postinstall C:\Ecommerce\ecommerce\node_modules\node-sass
> node scripts/build.js

Binary found at C:\Ecommerce\ecommerce\node_modules\node-sass\vendor\win32-x64-72\binding.node
Testing binary
Binary is fine
npm WARN bootstrap@4.5.0 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta ||
>= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ node-sass@4.14.1
updated 1 package and audited 1794 packages in 21.637s

65 packages are looking for funding
  run `npm fund` for details

found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

Then I run react-scripts build and I get the same error which I got at first .

This is package.json file to be sure that node-sass is installed : 

{
  "name": "ecommerce",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.9.14",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.54",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.5.0",
    "clsx": "^1.1.0",
    "framer-motion": "^1.11.0",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-router-scroll-memory": "^2.0.6",
    "react-scripts": "3.4.1",
    "react-scroll": "^1.7.16",
    "redux": "^4.0.5"
  },
  "scripts": {
    "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"
    ]
  }
}

Now I get no problems by running it in development mode on localhost but only when I'm trying to build the application .

How can I solve this you need to install node-sass error ?

Solution

  • I did solve this error by running following commands : 

    npm i node-sass -g

    npm i sass-loader -g