Cannot find module 'sass'

Question

I wrote a React app and tried to dockerize it. After I do this it doesn't compile correctly, it doesn't find the sass module and the error is:

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 [email protected] -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 the same Error:

RUN npm install -g sass

I don't think it's a problem with the docker, it's more kind of webpack problem or just packages — Vinicius Katata, Commented Apr 19, 2021 at 12:04
You must had sass installed globally so. Try to install it in your docker npm i -g sass — Vinicius Katata, Commented Apr 19, 2021 at 12:10

Mohamed Allal · Accepted Answer · 2021-07-10 12:44:41Z

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

I confirm that installing locally fixed my issue: npm i sass --save-dev in project folder. Thanks! — papesky, Commented Mar 31, 2023 at 10:51

Belayet Riad · Accepted Answer · 2021-07-16 17:33:25Z

14

npm cache clear --force
npm install sass

answered Jul 16, 2021 at 17:33

Belayet Riad

3694 silver badges13 bronze badges

Add a comment |

VibrationPositive · Accepted Answer · 2021-12-09 15:16:35Z

11

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

answered Dec 9, 2021 at 15:16

VibrationPositive

4204 silver badges10 bronze badges

Add a comment |

Dharman · Accepted Answer · 2021-04-21 08:30:42Z

5

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"

edited Apr 21, 2021 at 8:30

Dharman♦

33.6k27 gold badges101 silver badges149 bronze badges

answered Apr 21, 2021 at 8:24

Alora

9011 gold badge6 silver badges16 bronze badges

Add a comment |

ekimas · Accepted Answer · 2022-08-05 07:43:27Z

4

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

answered Aug 5, 2022 at 7:43

ekimas

5468 silver badges16 bronze badges

Add a comment |

Hassan Khan · Accepted Answer · 2021-06-16 19:54:03Z

3

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" }

answered Jun 16, 2021 at 19:54

Hassan Khan

1268 bronze badges

Add a comment |

Shah Fahad · Accepted Answer · 2023-03-17 11:42:18Z

2

First install sass Globally OR Locally

Globally : npm i -g sass

Locally :npm i sass --save-dev

Check package.json file for sass dependency if it is not present there try adding it manually.

Check sass version : npm sass --version

In package.json File

Add this in dependency section: "sass": "^version-number"
Add this in scripts section: "scss": "sass --whatch scss -o css"

answered Mar 17, 2023 at 11:42

Shah Fahad

2271 silver badge4 bronze badges

Add a comment |

shailesh gokhale · Accepted Answer · 2023-09-12 11:59:58Z

2

enter image description here

I have added "devDependencies": { "sass": "^1.66.1" } at the end in package.json stop server run npm install run npm start it works for me.

edited Sep 12, 2023 at 11:59

answered Sep 12, 2023 at 11:58

shailesh gokhale

313 bronze badges

Add a comment |

ucMax · Accepted Answer · 2024-04-02 05:41:57Z

2

You'll just need to install sass-loader:

npm install sass-loader sass webpack --save-dev

or

yarn add -D sass-loader sass webpack

answered Apr 2, 2024 at 5:41

ucMax

5,5465 gold badges52 silver badges57 bronze badges

Add a comment |

Chems NOUIOUA · Accepted Answer · 2023-06-15 12:32:57Z

0

Have the same problem and i fixed by executing : yarn add sass --dev

answered Jun 15, 2023 at 12:32

Chems NOUIOUA

13 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Cannot find module 'sass'

10 Answers 10

What should be done

old version of react scripts

How to add support for SCSS and SCSS modules in Webpack

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

What should be done

old version of react scripts

How to add support for SCSS and SCSS modules in Webpack

Your Answer

Sign up or log in

Post as a guest

Linked

Related