Detect node sass and react version

errors/correct-sass-dependency.md

@@ -0,0 +1,30 @@
+# Correct sass dependency
+
+#### Why This Error Occurred
+
+You are using both _sass_ and _node-sass_ in your project.
+
+#### Possible Ways to Fix It
+
+Your dependencies should contain only one of both, preferably node-sass.
+
+They should look like this
+
+```js
+ "dependencies": {
+    "node-sass": "^4.14.1",
+  }
+```
+
+instead of this
+
+```js
+ "dependencies": {
+    "node-sass": "^4.14.1",
+    "sass": "^1.26.8"
+  }
+```
+
+### Useful Links
+
+- [Related issue](https://github.com/vercel/next.js/issues/6681)

errors/minimum-react-version.md

@@ -0,0 +1,24 @@
+# Minimum React version
+
+#### Why This Error Occurred
+
+The version of react you are using is older than 16.10.
+Next.js requires React 16.10 or newer for Fast Refresh to work correctly.
+On older versions, Next.js will fallback to full page reload every time.
+
+Please, take in mind that in this case your dev experience would be suboptimal and unexpected behaviour may occour.
+
+#### Possible Ways to Fix It
+
+Be sure your React version is 16.10 or newer.
+
+```js
+ "dependencies": {
+    "react": "16.10",
+  }
+```
+
+### Useful Links
+
+- [fast-refresh](https://nextjs.org/blog/next-9-4#fast-refresh)
+- [react-refresh](https://github.com/facebook/react/tree/master/packages/react-refresh)

packages/next/build/webpack-config.ts

@@ -263,6 +263,26 @@ export default async function getBaseWebpackConfig(
     resolvedBaseUrl = path.resolve(dir, jsConfig.compilerOptions.baseUrl)
   }
 
+  if (isServer) {
+    const packageJsonPath = path.resolve(dir, './package.json')
+    const packageJsonFile = parseJsonFile(packageJsonPath)
+    const { dependencies } = packageJsonFile
+    if (dependencies['react']) {
+      const version = +dependencies['react'].substr(0, 5)
+      if (version < 16.1) {
+        console.warn(
+          'Next.js requires React 16.10 or newer for Fast Refresh to work correctly. https://err.sh/next.js/minimum-react-version'
+        )
+      }
+    }
+
+    if (dependencies['node-sass'] != null && dependencies['sass'] != null) {
+      console.warn(
+        'It is not recommended to use node-sass and sass together. https://err.sh/next.js/correct-sass-dependency'
+      )
+    }
+  }
+
   const resolveConfig = {
     // Disable .mjs for node_modules bundling
     extensions: isServer