Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot find module 'sass'

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 [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 same Error:

RUN npm install -g sass
like image 977
Alora Avatar asked Apr 19 '21 11:04

Alora


People also ask

Can not find Sass module?

To solve the error "Cannot find module 'node-sass'", make sure to install the node-sass package by opening your terminal in your project's root directory and running the following command: npm i -D node-sass and restart your IDE and development server.

Can't find module Sass react?

To Solve Cannot find module 'sass' in reactjs Error You just need to globally install sass module with this plugin. First of all you need to forcefully clear your cache with this plugin: npm cache clear –force Now, You have to install sass module with this command: npm install sass Now, your error must be solved.

What is node Sass npm?

Node-sass is a library that provides binding for Node. js to LibSass, the C version of the popular stylesheet preprocessor, Sass. It allows you to natively compile . scss files to css at incredible speed and automatically via a connect middleware. Find it on npm: https://www.npmjs.com/package/node-sass.


2 Answers

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.

enter image description here

Instead you can see that Sass is followed on the Dart sass project!

react-scripts already moved that direction!

enter image description here

The used package now is sass! npm i -g sass or npm i sass --save-dev

If you go to npm sass page

enter image description here

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

enter image description here

enter image description here

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

like image 155
Mohamed Allal Avatar answered Oct 12 '22 21:10

Mohamed Allal


npm cache clear --force
npm install sass
like image 26
Belayet Riad Avatar answered Oct 12 '22 22:10

Belayet Riad