diff --git a/README.md b/README.md index fa54c60f2..60363d863 100644 --- a/README.md +++ b/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 - - ## License MIT