From b25ed8f00578498341a707143437f90264cdb7b0 Mon Sep 17 00:00:00 2001 From: Alexander James Phillips Date: Wed, 22 Feb 2017 18:37:18 +0000 Subject: [PATCH] Add note for using CHOKIDAR_USEPOLLING in virtual machines to enable HMR (#1608) * Add note for using CHOKIDAR_USEPOLLING in virtual machines to enable HMR * Use br in react-scripts template README md * Use br in md for new line breaks * Update troubleshooting HMR to allow for VMs running Windows * Fix up the instructions --- README.md | 2 +- template/README.md | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 845e546c67c..8004b887004 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # react-scripts -This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). +This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).
Please refer to its documentation: * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app. diff --git a/template/README.md b/template/README.md index 6d237efd95a..f44cd23dd59 100644 --- a/template/README.md +++ b/template/README.md @@ -175,7 +175,7 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm ## Supported Language Features and Polyfills -This project supports a superset of the latest JavaScript standard. +This project supports a superset of the latest JavaScript standard.
In addition to [ES6](https://github.com/lukehoban/es6features) syntax features, it also supports: * [Exponentiation Operator](https://github.com/rwaldron/exponentiation-operator) (ES2016). @@ -402,7 +402,7 @@ Then in `package.json`, add the following lines to `scripts`: "test": "react-scripts test --env=jsdom", ``` ->Note: To use a different preprocessor, replace `build-css` and `watch-css` commands according to your preprocessor’s documentation. +>Note: To use a different preprocessor, replace `build-css` and `watch-css` commands according to your preprocessor’s documentation. Now you can rename `src/App.css` to `src/App.scss` and run `npm run watch-css`. The watcher will find every Sass file in `src` subdirectories, and create a corresponding CSS file next to it, in our case overwriting `src/App.css`. Since `src/App.js` still imports `src/App.css`, the styles become a part of your application. You can now edit `src/App.scss`, and `src/App.css` will be regenerated. @@ -1355,10 +1355,10 @@ You can find instructions in [Deploying React with Zero Configuration](https://b Sometimes `npm run build` works locally but fails during deploy via Heroku with an error like this: -``` +``` remote: Failed to create a production build. Reason: remote: Module not found: Error: Cannot resolve 'file' or 'directory' -MyDirectory in /tmp/build_1234/src +MyDirectory in /tmp/build_1234/src ``` This means you need to ensure that the lettercase of the file or directory you `import` matches the one you see on your filesystem or on GitHub. @@ -1452,6 +1452,7 @@ If this doesn’t happen, try one of the following workarounds: * Some editors like Vim and IntelliJ have a “safe write” feature that currently breaks the watcher. You will need to disable it. Follow the instructions in [“Working with editors supporting safe write”](https://webpack.github.io/docs/webpack-dev-server.html#working-with-editors-ides-supporting-safe-write). * If your project path contains parentheses, try moving the project to a path without them. This is caused by a [Webpack watcher bug](https://github.com/webpack/watchpack/issues/42). * On Linux and macOS, you might need to [tweak system settings](https://webpack.github.io/docs/troubleshooting.html#not-enough-watchers) to allow more watchers. +* If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, run `npm install --save-dev cross-env` in its root folder and then replace `"react-scripts start"` in the `scripts` section of its `package.json` with `"cross-env CHOKIDAR_USEPOLLING=true react-scripts start"`. This ensures that the next time you run `npm start`, the watcher uses the polling mode, as necessary inside a VM. If none of these solutions help please leave a comment [in this thread](https://github.com/facebookincubator/create-react-app/issues/659).