Create-react-app: npm warnings about sass-loader

[eddiemonge]

Describe the bug

npm throws warnings about sass-loader missing peer dependencies

Environment

node --version && npm --version
v12.1.0
6.13.4

Steps to reproduce

Run npm install react-scripts

Expected behavior

npm should not throw errors or warnings.

Actual behavior

npm WARN [email protected] requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of sass@^1.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.

According to the docs, node-sass should be installed separately. Since that is the case, then sass-loader should be an optional dependency or only installed if it finds node-sass.

[miraage]

sass-loader is included to CRA, because it allows users to use Sass seamlessly, without ejecting. It is used in webpack's configuration at module.loaders directive, and only executes upon facing imported sass/scss files.

NPM warnings are totally normal, despite the fact that one could think of them as something bad. NPM tries to warn users about potential pitfalls.

node-sass is not installed by default, because it would add complexity and compile redundant binaries for people who doesn't use sass/scss.

According to the docs, node-sass should be installed separately. Since that is the case, then sass-loader should be an optional dependency or only installed if it finds node-sass.

What you ask, is to dynamically check if node-sass exists, then install sass-loader. Looks like magic to me.

Here is my log of creating an app, I see no node-sass warning

➜  /tmp npx create-react-app test13
npx: installed 91 in 5.407s

Creating a new React app in /private/tmp/test13.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

yarn add v1.21.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "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".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 35 new dependencies.
info Direct dependencies
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 12.20s.

Installing template dependencies using yarnpkg...
yarn add v1.21.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "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".
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=5".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 18 new dependencies.
info Direct dependencies
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ @sheerun/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 5.00s.
Removing template package using yarnpkg...

yarn remove v1.21.1
[1/2] 🗑  Removing module cra-template...
[2/2] 🔨  Regenerating lockfile and installing missing dependencies...
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=5".
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "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".
success Uninstalled packages.
✨  Done in 4.51s.

Initialized a git repository.

Success! Created test13 at /private/tmp/test13
Inside that directory, you can run several commands:

  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 test13
  yarn start

Happy hacking!

[eddiemonge]

I don't use yarn (and no I don't plan on using it either) but npm does issue warnings.

If node-sass has to be installed separately, might as well install sass-loader then too. The webpack config can check if they are installed and then require them if they are. That way no magic. Using sass requires extra work so typing an extra 12 characters doesn't seem that unreasonable.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.