HMR not refreshing

I think I have followed all the parts on the implementing react-native with HMR.

I’m getting the following logs: [Haul HMR] Client connected, however until you Enable Hot Reloading, you will not get any updates hotClient.js?485c:24 [Haul HMR] Bundle rebuilding hotClient.js?485c:24 [Haul HMR] Bundle rebuilt in 1158ms process-update.js?e13e:41 [HMR] Checking for updates on the server… process-update.js?e13e:114 [HMR] Updated modules: process-update.js?e13e:116 [HMR] - ./src/components/service-method-selection/service-method-page.tsx process-update.js?e13e:116 [HMR] - ./src/components/service-method-selection/index.ts process-update.js?e13e:116 [HMR] - ./src/components/index.ts process-update.js?e13e:116 [HMR] - ./src/navigators/app-navigator.tsx process-update.js?e13e:121 [HMR] App is up to date. But the page doesn’t update until I change navigation.

any thoughts?

[zamotany]

@jrwpatterson

There’s a high chance that the HMR is not working for you, because your component might have not been registered by react-hot-loader.

Usually this is done in Babel config by using react-hot-loader/babel plugin. However since, you are using TS, this means that .ts/.tsx files will (probably) be processed only by awesome-typescript-loader.

So, here’s what you can do:

• either add babel-loader to your /\.tsx?$/ rule in webpack.haul.js as shown below:

 module: {
    ...module,
    rules: [
      ...module.rules,
      {
        test: /\.tsx?$/,
        exclude: undefined,
        use: [{
          loader: 'babel-loader',
          options: {
            plugins: ['react-hot-loader/babel'],
            // babelrc: false, // you might need this
          }
        },
        {
          loader: 'awesome-typescript-loader',
          options: {
            transpileOnly: true,
            useTranspileModule: false,
            sourceMap: true,
            useBabel: true
          }
        }]
      }
    ]
  },

• or add react-hot-loader/webpack to your /\.tsx?$/ rule in webpack.haul.js as shown below:

 module: {
    ...module,
    rules: [
      ...module.rules,
      {
        test: /\.tsx?$/,
        exclude: undefined,
        use: [{
          loader: 'react-hot-loader/webpack',
        },
        {
          loader: 'awesome-typescript-loader',
          options: {
            transpileOnly: true,
            useTranspileModule: false,
            sourceMap: true,
            useBabel: true
          }
        }]
      }
    ]
  },

EDIT: since in awesome-typescript-loader options useBabel is set to true you can try passing react-hot-loader/babel plugin to it somehow or adding it to .babelrc.

[zamotany]

Closing due to inactivity and the fact that in @haul-bundler/cli we dropped support for HMR.