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.