better typescript playbooks. #884 #909

README.md

@@ -6,7 +6,7 @@
 
 [![PRs Welcome][prs-badge]][prs] [![Chat][chat-badge]][chat]
 [![Backers on Open Collective][oc-backer-badge]](#backers)
-[![Sponsors on Open Collective][oc-sponsor-badge]](#sponsors) 
+[![Sponsors on Open Collective][oc-sponsor-badge]](#sponsors)
 
 [![Watch on GitHub][github-watch-badge]][github-watch]
 [![Star on GitHub][github-star-badge]][github-star]
@@ -98,9 +98,13 @@ Follow [these code examples](https://github.com/Grimones/cra-rhl/commit/4ed74af2
 
 ### TypeScript
 
-When using TypeScript, Babel is not required, but React Hot Loader will not work without it.
+When using TypeScript, Babel is not required, but React Hot Loader will not work (properly) without it.
 Just add `babel-loader` into your Webpack configuration, with React Hot Loader plugin.
 
+There is 2 different ways to do it.
+
+##### Add babel AFTER typescript.
+
 ```js
 {
   test: /\.tsx?$/,
@@ -117,7 +121,7 @@ Just add `babel-loader` into your Webpack configuration, with React Hot Loader p
 }
 ```
 
-You **also have to modify your `tsconfig.json`**:
+In this case you have to modify your `tsconfig.json`, and compile to ES6 mode, as long React-Hot-Loader babel plugin could not understand ES5 code.
 
 ```json
 // tsconfig.json
@@ -127,7 +131,29 @@ You **also have to modify your `tsconfig.json`**:
 }
 ```
 
-Yet again - module = es6 **will not work**.
+##### Add babel BEFORE typescript (preferred)
+
+```js
+{
+  test: /\.tsx?$/,
+  use: [
+    'ts-loader', // (or awesome-typescript-loader)
+    {
+      loader: 'babel-loader',
+      options: {
+        plugins: [
+          '@babel/plugin-syntax-typescript',
+          '@babel/plugin-syntax-decorators',
+          '@babel/plugin-syntax-jsx',
+          'react-hot-loader/babel',
+        ],
+      },
+    }
+  ],
+}
+```
+
+In this case you can compile to ES5. More about [typescript and react-hot-loader](https://github.com/gaearon/react-hot-loader/issues/884)
 
 We also have a [full example running TypeScript + React Hot Loader](https://github.com/gaearon/react-hot-loader/tree/master/examples/typescript).
 
@@ -458,8 +484,6 @@ Support this project by becoming a sponsor. Your logo will show up here with a l
 <a href="https://opencollective.com/react-hot-loader/sponsor/8/website" target="_blank"><img src="https://opencollective.com/react-hot-loader/sponsor/8/avatar.svg"></a>
 <a href="https://opencollective.com/react-hot-loader/sponsor/9/website" target="_blank"><img src="https://opencollective.com/react-hot-loader/sponsor/9/avatar.svg"></a>
 
-
-
 ## License
 
 MIT