`module.hot.invalidate` is not a function

[aditya81070]

I am trying this plugin with webpack-dev-server. I followed the instructions to add this plugin to code and also checked example in webpack-dev-server in examples directory.

This is my devServer config:

    devServer: {
      host: '0.0.0.0',
      historyApiFallback: true,
      hot: true,
      clientLogLevel: 'info',
      inline: true,
      liveReload: false,
      overlay: true,
      port: 8080,
    },

I am also using following code snippet to use HMR:-

if (module.hot) {
    module.hot.accept('./app', () => {
     const App = require('./app').default
     ReactDOM.render(<App />, root);
})
}

After adding the plugin to my webpack.config.js, I changed the label text of Input component. (The input component and the component in which it is used both are functional components). I am getting following error:-

TypeError
module.hot.invalidate is not a function

Call Stack
 Object.eval
  //path of component
 eval
  //path of component
 Object..//path of component
  58.009bff0c7f3cf3782d9f.hot-update.js:6:1
 __webpack_require__
  main.js:794:31
 hotApply
  main.js:710:14
 undefined
  main.js:364:22

[pmmmwh]

I am trying this plugin with webpack-dev-server. I followed the instructions to add this plugin to code and also checked example in webpack-dev-server in examples directory.

This is my devServer config:

    devServer: {
      host: '0.0.0.0',
      historyApiFallback: true,
      hot: true,
      clientLogLevel: 'info',
      inline: true,
      liveReload: false,
      overlay: true,
      port: 8080,
    },

I am also using following code snippet to use HMR:-

if (module.hot) {
    module.hot.accept('./app', () => {
     const App = require('./app').default
     ReactDOM.render(<App />, root);
})
}

After adding the plugin to my webpack.config.js, I changed the label text of Input component. (The input component and the component in which it is used both are functional components). I am getting following error:-

TypeError
module.hot.invalidate is not a function

Call Stack
 Object.eval
  //path of component
 eval
  //path of component
 Object..//path of component
  58.009bff0c7f3cf3782d9f.hot-update.js:6:1
 __webpack_require__
  main.js:794:31
 hotApply
  main.js:710:14
 undefined
  main.js:364:22

Hi, are you using Webpack 4.43.0+?

Also, you most likely don't need that HMR snippet.

[aditya81070]

Hi, are you using Webpack 4.43.0+?

Hey @pmmmwh , I updated the webpack and webpack-deb-server version and now the error is gone. But still I am facing issues with it. I checked the console logs, it says that HMR is updated and also logs the file I changed but it doesn't refresh (update the content) page.

[pmmmwh]

Can you provide a reproduce repo?

Some checks:

• Is there any failed requests in the Console/Network tab in DevTools?
• Did you apply the react-refresh/babel plugin?
• Are you using React 16.9+?
• Do you have any other integrations intercepting HMR?
• Did you remove the HMR snippet?
• What versions of this plugin, react-refresh, react, webpack, wds are you on?

[aditya81070]

Hey @pmmmwh , I tried this plugin by creating a new project (using CRA) and it worked really well.
I am trying to use this plugin in a fairly complex and large level application (that is built using WDS). I noticed that the when I update code of any component then WDS logs that component is updated. I checked the code of the component into source tab and found that component code is also updated except that it doesn't update UI 😭 .

• Is there any failed requests in the Console/Network tab in DevTools?

No there is not failed requests in devtools and console.

• Did you apply the react-refresh/babel plugin?

Yes, I am using react-refresh/babel plugin and appended this to plugins array in bable config.

• Are you using React 16.9+?

I was on an older version of react but updating to latest version (react + react-router-dom) didn't work.

• Do you have any other integrations intercepting HMR?

As far as I can see, there are only two things that is related to HMR. hot: true in devServer config of the webpack.

• Did you remove the HMR snippet?

Yeah, I removed the HMR snippet I mentioned into the issue description. I tried both removing and keeping it, both didn't work. I had a lot of providers and I tried to remove everything and just rendered a test functional component. Because of this I am suspecting that there is some issue in my webpack config but I am not able to find it and have to dig more.

• What versions of this plugin, react-refresh, react, webpack, wds are you on?

Following are the versions of these packages:

"react": "^16.13.1",
"react-router-dom": "^5.2.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
"react-refresh": "^0.8.3",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.11.0",

[pmmmwh]

@aditya81070 would you mind posting your Webpack config here?

[aditya81070]

@pmmmwh Yeah here it is I have removed the aliases as there were a lot of aliases.

/* eslint-env node */
/* eslint-disable import/no-commonjs */

const path = require('path');
const { IgnorePlugin, DefinePlugin } = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const DotenvPlugin = require('webpack-dotenv-plugin');
const MonacoPlugin = require('monaco-editor-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

const getPath = dir => path.resolve(__dirname, dir);
const source = getPath('src');
const nodeModules = getPath('node_modules');

/*
  please expect 1-2 min(s) for initial build time
  if you feel your build is slow try
  `export NODE_OPTIONS='--max-old-space-size=4096'`
*/

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';
  const plugins = [
    new DotenvPlugin(),
    new MonacoPlugin({
      languages: ['redshift', 'dockerfile'],
    }),
    new HtmlWebpackPlugin({
      template: './src/_common/index.html',
      inject: 'body',
      chunksSortMode: 'none',
    }),
    new IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
    }),
    new DefinePlugin({
      PRODUCTION: JSON.stringify(isProduction),
    }),
    new ForkTsCheckerWebpackPlugin({
      tsconfig: './tsconfig.json',
      reportFiles: ['src/**/*.{ts,tsx}'],
      async: false,
    }),
    new ReactRefreshWebpackPlugin(),
  ];

  if (isProduction) {
    plugins.push(
      new CompressionPlugin({
        test: /\.(jsx?|tsx?)$/i,
      })
    );
  }

  process.env.NODE_ENV = argv.mode;
  process.env.BABEL_ENV = argv.mode;

  const config = {
    entry: './src/_common/index.js',
    output: {
      publicPath: '/',
      path: path.resolve(__dirname, 'build'),
      filename: argv.mode === 'production' ? '[contentHash:8].js' : '[name].js',
      chunkFilename: argv.mode === 'production' ? '[contentHash:8].chunk.js' : '[name].js',
    },
    mode: argv.mode,
    devtool: argv.mode === 'development' ? 'eval-source-map' : false,
    node: {
      fs: 'empty',
      net: 'empty',
      tls: 'empty',
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          use: ['cache-loader', 'babel-loader'],
          include: [source],
        },
        {
          test: /\.(scss|css)$/,
          use: ['style-loader', 'css-loader'],
          include: [source, nodeModules],
        },
        {
          test: /\.tsx?$/,
          use: [
            { loader: 'cache-loader' },
            {
              loader: 'ts-loader',
              options: {
                happyPackMode: true,
                transpileOnly: true,
                experimentalWatchApi: true,
              },
            },
          ],
          include: [source],
        },
        {
          test: /\.(png|woff|woff2|eot|ttf|svg)$/,
          use: ['url-loader?limit=100000'],
        },
        {
          test: /\.(ico)$/,
          use: ['file-loader?name=[name].[ext]'],
        },
      ],
    },
    devServer: {
      host: '0.0.0.0',
      historyApiFallback: true,
      hot: true,
      clientLogLevel: 'info',
      inline: true,
      liveReload: false,
      overlay: true,
      port: 8080,
    },
    plugins,
  };

  // https://medium.com/@kenneth_chau/speeding-up-webpack-typescript-incremental-builds-by-7x-3912ba4c1d15
  // Official Microsoft team recommendations.
  if (!isProduction) {
    config.output.pathinfo = false;
    config.optimization = {
      removeAvailableModules: false,
      removeEmptyChunks: false,
      splitChunks: config.optimization.splitChunks,
    };
  }

  return config;
};

[pmmmwh]

@aditya81070 One thing I've noticed - is the file you're editing written in TypeScript by any chance? You'll have to pass output from ts-loader to babel-loader (maybe only with the react-refresh/babel plugin).

Also is it possible for you to look at your raw compiled code and check if there are traces of __webpack_require__.$Refresh$?

[aditya81070]

@pmmmwh Nope, I am using following simple functional component and only rendering that.

// test-component.js
import React, { useState } from 'react';

function TestComponent(props) {
  const [name, setName] = useState('');
  const [counter, setCounter] = useState(0);

  const handleCounter = () => {
    setCounter(counter + 1);
  };

  const handleInputChange = e => {
    setName(e.target.value);
  };

  return (
    <div>
      <h4>This is functional</h4>
      <div>
        <label htmlFor="name">
          Enter your first name:
          <input
            value={name}
            onChange={handleInputChange}
            id="name"
            name="name"
            placeholder="John Dero"
          />
        </label>
      </div>
      <div>
        <button type="button" onClick={handleCounter}>
          Increase counter
        </button>
        <p>Counter value: {counter}</p>
      </div>
    </div>
  );
}

export default TestComponent;

And yes I checked the main.js bundle and found following code snippet (There are 900 references of $Refresh 😛 :-

	__webpack_require__.$Refresh$.init();
/******/ 		try {
/******/ 			modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
/******/ 		} finally {
/******/ 			__webpack_require__.$Refresh$.cleanup(moduleId);
/******/ 		}
/******/

[pmmmwh]

@pmmmwh Nope, I am using following simple functional component and only rendering that.

This is really strange - I've just created a project with the exact same Webpack config and stuff ran smoothly for me. What version of react-dom are you on?

[aditya81070]

@pmmmwh My bad. I forgot to update react-dom to latest version it was <16.9. I updated this and things worked smoothly. Thank you for your help and time.

[aditya81070]

I have one question though. I am using Redux and most of the time I end up wrapping components in connect. How should I arrange/write my components so I can use this plugin.

Below is an example how I write my components most of the time. Will it work if I do changes in presentational.js?.

// presentational.js 
function Presentational (props) {
  const {title, list} = props;
  
  const onItemClick = (e) => {
    console.log(e)
  }
  return (
    <div>
      <Title>{title}</Title>
      <List list={list} onItemClick={onItemClick} />
    </div>
  )
}
export default Presentational;

// container.js
function Container(props) {
  const { title, list } = props;

  // some other stuff

  return (
    <div>
      {/* other stuff */}
      <Presentational list={list} title={title} />
    </div>
  );
}
export default connect(mapStatetoProps)(Container);

[pmmmwh]

Below is an example how I write my components most of the time. Will it work if I do changes in presentational.js?

It should be fine - state should be preserved without any problems. If you do hit anything though, you might have to report to Redux instead because it's most likely that they are "incompatible" with React's internals.

(I haven't used connect in a while and I assume it does follow the PascalCase rule for component names within it's internals)

[pmmmwh]

I'll close this issue since there's a resolution, but I'll still answer any further questions here 😉

[aditya81070]

Yeah, it names component according to what we pass in connect. We always pass named components to connect so there is no issue of anonymous component names. Thankyou for explanation.