Create-react-app: Is it possible to get hot-reload with typescript working?

[kanekv]

[kumar303]

Why not? It seems like it should be possible: https://github.com/gaearon/react-hot-loader#typescript

I was able to get it working by adding react-app-rewire-hot-loader but that starts to complicate things.

[kanekv]

@kumar303 does it work at all? What are complications?

[kumar303]

@kumar303 does it work at all?

Yes, after following the instructions in react-app-require-hot-loader, hot reloads seem to be working just fine. This is all I had to change in a standard create-react-app project: https://github.com/mozilla/addons-code-manager/pull/276/files

What are complications?

Well, it involves replacing all react-scripts commands with react-app-rewired. This makes me think that upgrading to new versions of react-scripts would be difficult. Also, it would introduce a non-officially supported babel/webpack configuration which might get out of sync with react-scripts and might create confusing bugs. It's not as bad as ejecting, though.

[kanekv]

It seems it works with that setup, closing this issue.

[kumar303]

It seems it works with that setup, closing this issue.

Could you please re-open the issue so that it gets fixed properly in create-react-app?

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[kumar303]

Could someone from the team please consider this feature? I think it's really important.

As an example: sometimes I need to perform a few clicks to set up my UI in a state for development. Without proper hot reloading, the whole page gets reloaded as I edit files and I lose my state.

[iansu]

We would be happy to consider this feature but without someone from the community doing the work and submitting a PR it's probably not going to happen. We have very limited resources and can barely keep up with all the issues and PRs that come in every day.

[kumar303]

OK, I can look into making a patch for it. I just wanted to make sure there wasn't already some reason that hot reloading is disabled.

[iansu]

I think the reason is just that it's tricky to get it working properly.

[esetnik]

All that react-app-rewire-hot-loader does is add react-hot-loader/babel to the list of plugins for babel-loader. Can't we just modify https://github.com/facebook/create-react-app/blob/master/packages/babel-preset-react-app/create.js#L106 to include react-hot-loader/babel plugin and add it as a package dependency?

[esetnik]

I published a version of babel-preset-react-app that enables react-hot-loader/babel plugin. If you're using yarn you could try it out and let me know if it's working for you. If so I'll submit a PR to create-react-app.

    "babel-preset-react-app-react-hot-loader": "^8.0.1",
    "babel-preset-react-app": "npm:babel-preset-react-app-react-hot-loader",

[kamal94]

Would definitely appreciate this working out of the box 👍

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[wzup]

It is still not working.

I've included TS in my create-react-app as described here and hot reload stopped working for .tsx files. It works for .js files but not for .tsx.

What is the fix? Where are docs about fix?

[esetnik]

@wzup here's what I finally got working:

1) create config-overrides.js in the root of your project:

const rewireReactHotLoader = require('react-app-rewire-hot-loader');

/* config-overrides.js */
module.exports = function override(config, env) {
  if (env === 'development') {
    config.resolve.alias['react-dom'] = '@hot-loader/react-dom';
  }
  config = rewireReactHotLoader(config, env);
  return config;
};

2) Change your scripts to launch with react-app-rewired, e.g.:

  "scripts": {
    "start": "react-app-rewired start",
  }

3) Mark your module as hot, e.g. App.tsx:

import { hot } from 'react-hot-loader/root';
import React from 'react';

const App = () => (
  ...
);

export default hot(App);

[7Kronos]

Don't forget to add those dependencies :

• react-app-rewire-hot-loader
• react-app-rewired
• react-hot-loader
• @hot-loader/react-dom@xxx (xxx must match your react-dom package version as it is a patched version of the original one)

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[kumar303]

A team member has agreed in https://github.com/facebook/create-react-app/issues/6503#issuecomment-480149442 that this is an important feature.

[bugzpodder]

I don't think we'll support react-hot-loader out of the box so I'm closing this issue. You can also use one of the workarounds provided above.
Dan is working on a new version and it is tracked in https://github.com/facebook/create-react-app/pull/5958

[kumar303]

@bugzpodder why wouldn't create react app support hot reloading a typescript application out of the box?

Reloading hooks (https://github.com/facebook/create-react-app/pull/5958) is only a small piece so I don't see how tracking that PR would be helpful.

[bugzpodder]

We also don't support react-hot-loader for js applications, it's not just typescript. It will be supported when #5958 lands. Webpack HMR is already supported out of the box
...

[saranshkataria]

@bugzpodder any reason for not supporting react-hot-loader out of the box?

[bugzpodder]

Dan has a list of things he want to accomplish and I can't find it right now. You can see https://gist.github.com/gaearon/a4d9fb3e6ea487a9296a8d2d9a6e3bf2 for some of his ideas.

[bugzpodder]

Found it: https://overreacted.io/my-wishlist-for-hot-reloading/

[kumar303]

We also don't support react-hot-loader for js applications, it's not just typescript. It will be supported when #5958 lands. Webpack HMR is already supported out of the box
...

Oh, my bad. I thought this issue was about hot reloading in general. I am using Webpack HMR in a create react app (with TypeScript) and hot reloading still doesn't work for some cases, even with all the suggested redux/router setup. I will try to remember what those cases are. For some reason I thought all my trouble with this was related to TypeScript but now I can't remember why.