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
,
2
Answers
I solved the issue by changing
proxyOptions.ws
to trueI solved the issue by changing proxyOptions.ws to true