module is not defined

[Gajus Kuizinas]

After adding this plugin I am getting this error:

ReferenceError: module is not defined

[Gajus Kuizinas]

Somehow including import gql from 'graphql-tag'; is causing module to be undefined. I am puzzled.

[Gajus Kuizinas]

haven't figured out what is the issue with how craco-plugin-react-hot-reload is patching CRA, but simply doing:

/* eslint-disable import/no-commonjs, filenames/match-regex, import/unambiguous, global-require */

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.module.rules.push({
        test: /\.(js)$/,
        use: 'react-hot-loader/webpack',
        include: /node_modules/,
      });

      return webpackConfig;
    },
  },
};

works.

[Aspen]

haven't figured out what is the issue with how craco-plugin-react-hot-reload is patching CRA, but simply doing:

/* eslint-disable import/no-commonjs, filenames/match-regex, import/unambiguous, global-require */

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.module.rules.push({
        test: /\.(js)$/,
        use: 'react-hot-loader/webpack',
        include: /node_modules/,
      });

      return webpackConfig;
    },
  },
};

works.

Thank you so much!! I've been struggling to get this working in IE 11 for awhile now and this was the ticket. All other browsers were working prior to the above, I've removed the Craco package and the webpack config code above resolved it.

[fridaystreet]

I was having this same issue and thanks @gajus your solution got me going again. I dug a bit further and found the cause of the problem.

This plugin adds the bable config for react-hot-loader and the webpack alias @hot-loader/react-dom. It should just be one or the other, preferably the latter and then you don't need to use the legacy way of enabling it you just use

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

export default hot(App)

you can confirm this by just manually adding it to the craco.config.js, you don't even need the rest of the webpack stuff, well or this plugin I guess. Apologies @hasanayan don't mean to make it redundant, thanks for taking the time to do it in the first place.

module.exports = function({ env, paths }) {
  return {
    webpack: {
      alias: {
        'react-dom': '@hot-loader/react-dom',
      }
    }
  };
};

[Rayat Rahman]

@fridaystreet are you saying all you added to your craco config was the webpack alias and hot reloading works just like that?

[fridaystreet]

@riotrah yep that's right