Issues with HMR in Vite React App with Node.js and Shopify Integration

Question

I'm currently configuring a Shopify app using React (with Vite) and Node.js. However, I've encountered an issue with Hot Module Replacement (HMR).

My vite.config.js file is as follows:

import path, { dirname } from 'node:path';

import { fileURLToPath } from 'node:url';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import sassDts from 'vite-plugin-sass-dts';
import react from '@vitejs/plugin-react';

const proxyOptions = {
    target: `http://127.0.0.1:${process.env.WEB_PORT}`,
    changeOrigin: false,
    secure: true,
    ws: false,
};

const host = process.env.HOST ? process.env.HOST.replace(/https?:\/\//, '') : 'localhost';

let hmrConfig;

if (host === 'localhost') {
    hmrConfig = {
        protocol: 'ws',
        host: 'localhost',
        port: 64999,
        clientPort: 64999,
    };
} else {
    hmrConfig = {
        protocol: 'wss',
        host: host,
        port: process.env.FRONTEND_PORT,
        clientPort: 443,
    };
}

export default defineConfig({
    root: dirname(fileURLToPath(import.meta.url)),
    plugins: [react(), tsconfigPaths(), sassDts()],

    resolve: { preserveSymlinks: true, alias: { '@/styles': path.join(__dirname, 'src', 'styles') } },

    server: {
        host: 'localhost',
        port: process.env.FRONTEND_PORT,
        hmr: hmrConfig,
        proxy: {
            '^/(\\?.*)?$': proxyOptions,
            '^/api(/|(\\?.*)?$)': proxyOptions,
        },
    },
});

The problem arises when I add proxyOptions to the server configurations. Once added, HMR doesn't function as expected. I can only see changes in my React components after manually refreshing the web page.

Conversely, when I remove the proxyOptions from the server configurations, HMR works correctly.

I have verified that process.env.WEB_PORT corresponds to the port where my server is listening.

Any insights or solutions to fix the HMR issue while using proxyOptions would be greatly appreciated.

@shopify/app": "3.46.5,

Answer 1

I solved the issue by changing proxyOptions.ws to true