Fix hot module reloading (react fast refresh)

[Lovor01]

I develop locally and use self-signed https. I struggled a lot until I got it working. If you have troubles, please follow my recipe:

1. create webpack.config.js in the root of project (where package.json is) and give it this content:

// change webpack default config
const defaultConfig = require( '@wordpress/scripts/config/webpack.config.js' );

if ( process.env.NODE_ENV !== 'production' ) {
	defaultConfig.devServer.server = {
		type: 'https',
		options: {
			cert: 'path to your certitificate (use forward slashes)/your-certificate.crt',
			key: 'path to ceritificate key (use forward slashes)/your-key.key'
		}
	};
	defaultConfig.devServer.allowedHosts = ['your-host-name(if changed)', 'localhost', '127.0.0.1'];

}

module.exports = defaultConfig;

2. navigate in browser to https://localhost:8887/. Browser will tell that it is unsafe... make exclusion (search in order how to do that). Reload. You must get message something like: Cannot GET /
3. in wp-config.php set define( 'SCRIPT_DEBUG', true );
4. Reload the page you are working on (perhaps hard reload is required).
5. Inspect console messages. It should not give errors. Only in logs you should see [HMR] Waiting for update signal from WDS...

Thats it. Test if it works!

[meshakeeb]

Hi can you help me with getting HMR working please below is my webpack

/**
 * External Dependencies
 */
const path = require('path');
const defaultConfig = require('@wordpress/scripts/config/webpack.config');
const { getWebpackEntryPoints } = require('@wordpress/scripts/utils/config');

const basePath = path.resolve(__dirname, 'src');

module.exports = {
	...defaultConfig,
	externals: {
		...defaultConfig.externals,
		window: 'window',
	},
	entry: {
		...getWebpackEntryPoints(),
		// CSS
		'screen-builder': path.join(basePath, 'scss/screen-builder.scss'),
		'ui-toolkit': path.join(basePath, 'scss/ui-toolkit.scss'),

		// JavaScript
		builder: path.join(basePath, '/js/builder.js'),
	},
	output: {
		filename: '[name].js', // Dynamically generate output file names
		path: path.resolve(__dirname, 'assets/dist'),
	},
};

[Lovor01]

I forgot to write that in wp-config.php SCRIPT_DEBUG should be set to true.
You should have React Developer Tools extension installed and active in browser.
You should set allowedHosts in webpack config to your host name(s).
Do you use https? If so, set type of server to https and provide certificates. Also, open the url at which HMR connects to web sockets, (typically port 8887), to be sure this url is allowed in browser.

[meshakeeb]

Hi Thanks @Lovor01 for the reply. Though I fixed my issue by doing this..

• Import the CSS in JS file that also made them use HMR.
• Drop the use of SASS as dart having to many issues. I opt to PostCSS with
  • tailwind
  • tailwind nesting
  • cssnano

And I dont know why I still have to include runtime.js if I want HMR to run.