Warn on duplicate Sass deps (#16398)

Fixes #13953

errors/duplicate-sass.md

@@ -0,0 +1,33 @@
+# Duplicate Sass Dependencies
+
+#### Why This Error Occurred
+
+Your project has a direct dependency on both `sass` and `node-sass`, two
+different package that both compile Sass files!
+
+Next.js will only use one of these, so it is suggested you remove one or the
+other.
+
+#### Possible Ways to Fix It
+
+The `sass` package is a modern implementation of Sass in JavaScript that
+supports all the new features and does not require any native dependencies.
+
+Since `sass` is now the canonical implementation, we suggest removing the older
+`node-sass` package, which should speed up your builds and project install time.
+
+**Via npm**
+
+```bash
+npm uninstall node-sass
+```
+
+**Via Yarn**
+
+```bash
+yarn remove node-sass
+```
+
+### Useful Links
+
+- [`sass` package documentation](https://github.com/sass/dart-sass)

packages/next/cli/next-dev.ts

@@ -91,6 +91,18 @@ const nextDev: cliCommand = (argv) => {
         )
       }
     }
+
+    const [sassVersion, nodeSassVersion] = await Promise.all([
+      getPackageVersion({ cwd: dir, name: 'sass' }),
+      getPackageVersion({ cwd: dir, name: 'node-sass' }),
+    ])
+    if (sassVersion && nodeSassVersion) {
+      Log.warn(
+        'Your project has both `sass` and `node-sass` installed as dependencies, but should only use one or the other. ' +
+          'Please remove the `node-sass` dependency from your project. ' +
+          ' Read more: https://err.sh/next.js/duplicate-sass'
+      )
+    }
   }
 
   const port = args['--port'] || 3000

test/integration/cli/duplicate-sass/.gitignore

@@ -0,0 +1 @@
+!node_modules

test/integration/cli/duplicate-sass/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "node-sass": "*",
+    "sass": "*"
+  }
+}

test/integration/cli/duplicate-sass/pages/index.js

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <p>Hello</p>
+}

test/integration/cli/test/index.test.js

@@ -18,6 +18,7 @@ const dirOldReact = join(__dirname, '../old-react')
 const dirOldReactDom = join(__dirname, '../old-react-dom')
 const dirExperimentalReact = join(__dirname, '../experimental-react')
 const dirExperimentalReactDom = join(__dirname, '../experimental-react-dom')
+const dirDuplicateSass = join(__dirname, '../duplicate-sass')
 
 describe('CLI Usage', () => {
   describe('no command', () => {
@@ -295,6 +296,22 @@ describe('CLI Usage', () => {
 
       await killApp(instance)
     })
+
+    test('duplicate sass deps', async () => {
+      const port = await findPort()
+
+      let stderr = ''
+      let instance = await launchApp(dirDuplicateSass, port, {
+        stderr: true,
+        onStderr(msg) {
+          stderr += msg
+        },
+      })
+
+      expect(stderr).toMatch('both `sass` and `node-sass` installed')
+
+      await killApp(instance)
+    })
   })
 
   describe('export', () => {