hot-module-loader apply cold to node_module package

Question

I'm trying to figure out how I can apply cold() to just a single node package.

according to the docs I need to use setConfig and also apply another babel-loader to include just node_modules. However I can't for the life of me figure out where or how to implement this.

import { setConfig, cold } from 'react-hot-loader'
setConfig({
  onComponentRegister: (type, name, file) =>
    file.indexOf('node_modules') > 0 && cold(type),
})

I'm using Kendo UI React which does not support HMR. So I need to wrap the PanelBarItem so that react-hot-loader doesnt wrap the component. What I would like to do is apply this rule all my kendo packages so I don't have to explicitly call cold on each component when I use it.

import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import messages from './messages';
import { Button } from '@progress/kendo-react-buttons';
import { PanelBar, PanelBarItem } from '@progress/kendo-react-layout';
import { changeLocale } from '../LanguageProvider/actions';
import { cold } from 'react-hot-loader';

class Home extends React.Component {
   render() {
      cold(PanelBarItem);
      return (
         <div>
            <PanelBar title="Test">
               <PanelBarItem title={'Sales Forecasts'}>
                  <PanelBarItem title={'Q1 sdfds'} />
                  <PanelBarItem title={'Q2 Forecast'} />
                  <PanelBarItem title={'Q3 Forecast'} />
                  <PanelBarItem title={'Q4 Forecast'} />
               </PanelBarItem>
            </PanelBar>
         </div>
      );
   }
}

Answer 1

When you configure your webpack, you probably have something like this:

{
    module: {
      rules: [{
        // testing for js/jsx files, and using babel-loader load them int webpack
        test: /\.jsx?$/,
        
        // Maybe looking only on your source folder
        // (and looking aside from the node_modules as a consequence)
        include: [
          path.resolve(__dirname, '../src'),
        ],
        
        use: [{
          loader: 'babel-loader', // Ask babel to eat up those files and prep them for webpack
          options: {
            presets: [
              // What ever babel presets you might use
            ],
            plugins: [
              // Some babel plugins you might use, like transform-runtime, or lodash
              
              // This plugin is RHL's dude that goes over your code and marks
              // things for patching later by the client
              'react-hot-loader/babel',
            ]
          },
      }, {
        // some other loaders for styles, images etc.
      },]
    }

    // More webpack stuff
  }

Usually, you would not apply the "js/jsx" loader to node_modules (as shown above) and this is why the babel plugin which RHL uses to patch things up never gets a chance to process the Kendo code.

What the documentation asks you to do it to add another loader that looks for js/jsx files but only applies the RHL babel plugin. like this:

{
  module: {
    rules: [{
      // Your usual loaders including the usual babel-loader for your code
    }, {
      test: /\.jsx?$/,
      include: [
        // Focus on the folder of the module you want to "cold" later
        // or go for all node_modules if you need to
        path.resolve(__dirname, '../node_modules/<YOUR MODULE>'),
      ],
      use: [{
        loader: 'babel-loader',
        options: {
          plugins: [
            // The only plugin
            'react-hot-loader/babel',
          ]
        },
    }]
  }
}

Then, when you configure RHL on the client (first thing you do) by calling setConfig you will also get the files from the now marked modules to apply cold on.

On your very very first file, just like they show in the documentation, require the rhlconfig.js file. The onComponentRegister should now also see files from node_modules.