diff --git a/packages/react-app-polyfill/README.md b/packages/react-app-polyfill/README.md
index b3572849eb2..32c207ad9cd 100644
--- a/packages/react-app-polyfill/README.md
+++ b/packages/react-app-polyfill/README.md
@@ -1,11 +1,7 @@
# react-app-polyfill
This package includes polyfills for various browsers.
-It includes minimum requirements and commonly used language features used by [Create React App](https://github.com/facebook/create-react-app) projects.
-Please refer to its documentation:
-
-- [Getting Started](https://github.com/facebook/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
-- [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
+It includes minimum requirements and commonly used language features used by [Create React App](https://github.com/facebook/create-react-app) projects.
### Features
@@ -17,9 +13,17 @@ Each polyfill ensures the following language features are present:
1. `Symbol` (a built-in object used by `for...of` syntax and friends)
1. `Array.from` (a built-in static method used by array spread, i.e. `[...arr]`)
-### Entry Points
+### Usage
+
+First, install the package using Yarn or npm:
+
+```bash
+$ npm install react-app-polyfill --save
+$ # or
+$ yarn add react-app-polyfill
+```
-You can import the entry point for the minimal version you intend to support. For example, if you import the IE9 entry point, this will include IE10 and IE11 support.
+Now, you can import the entry point for the minimal version you intend to support. For example, if you import the IE9 entry point, this will include IE10 and IE11 support.
#### Internet Explorer 9
diff --git a/packages/react-dev-utils/formatWebpackMessages.js b/packages/react-dev-utils/formatWebpackMessages.js
index eed11380864..a6872a18971 100644
--- a/packages/react-dev-utils/formatWebpackMessages.js
+++ b/packages/react-dev-utils/formatWebpackMessages.js
@@ -102,6 +102,13 @@ function formatMessage(message, isError) {
];
}
+ if (lines[1].match(/Cannot find module.+node-sass/)) {
+ lines[1] =
+ 'To import Sass files in this project, you need to install node-sass.\n';
+ lines[1] +=
+ 'Please run `npm i node-sass --save` or `yarn add node-sass` inside your workspace.';
+ }
+
// Cleans up syntax error messages.
if (lines[1].indexOf('Module build failed: ') === 0) {
lines[1] = lines[1].replace(
diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 33091b2d9a7..f606e4d2b79 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -14,7 +14,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [npm run build](#npm-run-build)
- [npm run eject](#npm-run-eject)
- [Supported Browsers](#supported-browsers)
-- [Supported Language Features and Polyfills](#supported-language-features-and-polyfills)
+- [Supported Language Features](#supported-language-features)
- [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor)
- [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor)
- [Debugging in the Editor](#debugging-in-the-editor)
@@ -203,11 +203,10 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm
## Supported Browsers
-By default, the generated project uses the latest version of React.
+By default, the generated project supports all modern browsers.
+Support for Internet Explorer 9, 10, and 11 requires [polyfills](https://github.com/facebook/create-react-app/blob/next/packages/react-app-polyfill/README.md).
-You can refer [to the React documentation](https://reactjs.org/docs/react-dom.html#browser-support) for more information about supported browsers.
-
-## Supported Language Features and Polyfills
+### Supported Language Features
This project supports a superset of the latest JavaScript standard.
In addition to [ES6](https://github.com/lukehoban/es6features) syntax features, it also supports:
@@ -223,16 +222,10 @@ Learn more about [different proposal stages](https://babeljs.io/docs/plugins/#pr
While we recommend using experimental proposals with some caution, Facebook heavily uses these features in the product code, so we intend to provide [codemods](https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb) if any of these proposals change in the future.
-Note that **the project only includes a few ES6 [polyfills](https://en.wikipedia.org/wiki/Polyfill)**:
-
-- [`Object.assign()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) via [`object-assign`](https://github.com/sindresorhus/object-assign).
-- [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) via [`promise`](https://github.com/then/promise).
-- [`fetch()`](https://developer.mozilla.org/en/docs/Web/API/Fetch_API) via [`whatwg-fetch`](https://github.com/github/fetch).
+Note that **this project includes no [polyfills](https://en.wikipedia.org/wiki/Polyfill)** by default.
If you use any other ES6+ features that need **runtime support** (such as `Array.from()` or `Symbol`), make sure you are including the appropriate polyfills manually, or that the browsers you are targeting already support them.
-Also note that using some newer syntax features like `for...of` or `[...nonArrayValue]` causes Babel to emit code that depends on ES6 runtime features and might not work without a polyfill. When in doubt, use [Babel REPL](https://babeljs.io/repl/) to see what any specific syntax compiles down to.
-
## Syntax Highlighting in the Editor
To configure the syntax highlighting in your favorite text editor, head to the [relevant Babel documentation page](https://babeljs.io/docs/editors) and follow the instructions. Some of the most popular editors are covered.