epic-stack: HMR breaks on invalid imports/syntax errors

I just tried this on a newly created vanilla epic-stack app. If I save a file with an invalid input, I get an error like the one below. After that, if I save it again with the correct path, HMR is not picking up the change (also no full reload is happening). I need to kill the dev server and run npm run dev again, which can take a while. This slows me down quite a bit, happening tens of times per hour. Did not have this problem before upgrading to Vite, which was aimed to dramatically reduce the time we waste on reloading changes. Sadly for me it did the opposite.

Press Ctrl+C to stop
9:42:13 PM [vite] Pre-transform error: Failed to load url ./components/error-boundar.tsx (resolved id: ./components/error-boundar.tsx) in /Users/simon/dev/epic-app-test/app/root.tsx. Does the file exist?
9:42:14 PM [vite] Error when evaluating SSR module /app/root.tsx: failed to import "./components/error-boundar.tsx"
|- Error: Failed to load url ./components/error-boundar.tsx (resolved id: ./components/error-boundar.tsx) in /Users/simon/dev/epic-app-test/app/root.tsx. Does the file exist?
    at loadAndTransform (file:///Users/simon/dev/epic-app-test/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:53601:21)
    at instantiateModule (file:///Users/simon/dev/epic-app-test/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:54623:10)

9:42:14 PM [vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "/app/root.tsx"
|- Error: Failed to load url ./components/error-boundar.tsx (resolved id: ./components/error-boundar.tsx) in /Users/simon/dev/epic-app-test/app/root.tsx. Does the file exist?
    at loadAndTransform (file:///Users/simon/dev/epic-app-test/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:53601:21)
    at instantiateModule (file:///Users/simon/dev/epic-app-test/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:54623:10)

Error: Failed to load url ./components/error-boundar.tsx (resolved id: ./components/error-boundar.tsx) in /Users/simon/dev/epic-app-test/app/root.tsx. Does the file exist?
Error: Failed to load url ./components/error-boundar.tsx (resolved id: ./components/error-boundar.tsx) in /Users/simon/dev/epic-app-test/app/root.tsx. Does the file exist?
    at loadAndTransform (file:///Users/simon/dev/epic-app-test/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:53601:21)
    at instantiateModule (file:///Users/simon/dev/epic-app-test/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:54623:10)

About this issue

Original URL
State: closed
Created 4 months ago
Comments: 22 (14 by maintainers)

Commits related to this issue

fix HMR Closes #638 — committed to ardi-zanki/epic-stack by kentcdodds 2 months ago

Most upvoted comments

So the problem I have run into now is that I broke my production system. everything works except the site root just shows up blank. I think this is related to some changes I have stashed though. I’ll figure that out later. for now:

change dev script in package.json to "dev": "remix vite:dev",
change tsconfig.json includes to "include": ["types/vite.env.d.ts", "**/*.ts", "**/*.tsx"],
added types to vite.env.d.ts This may be the cause of my blank page issue.

/// <reference types="vite/client" />
/// <reference types="@remix-run/node/globals" />


interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // more env variables...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

then changed the server/index.ts get build and app.all to:

async function getBuild() {
	const build =
		viteDevServer
			? await viteDevServer.ssrLoadModule('virtual:remix/server-build')
			: await import('#build/server/index.js')
	return build 
}

app.all(
	'*',
	async (req, res, next) => {
		const build = await getBuild();
		createRequestHandler({
			getLoadContext: async (_: any, res: any) => ({
				cspNonce: res.locals.cspNonce,
				serverBuild: await getBuild(),
			}),
			mode: MODE,
			build: build,
		})(req, res, next);
	}
);

This isnt yet a complete solution but it works well in dev.

ajwtech on Mar 13, 2024

I believe I did get a complete solution to this. I can go back possibly today and look at what I did.

On Mon, Apr 29, 2024, 2:38 PM Kent C. Dodds @.***> wrote:

Hmmm… After checking it some more, I’m pretty sure this solution is unrelated. I don’t get any difference before/after.

I’m not sure which tool in the tool chain is causing the problems, but I’m pretty sure the fix will not come in the epic stack but one of the underlying tools.

— Reply to this email directly, view it on GitHub https://github.com/epicweb-dev/epic-stack/issues/638#issuecomment-2083403515, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABS6NMBEFGJCQOG7Y2OG7IDY72HRVAVCNFSM6AAAAABEF4KLUCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOBTGQYDGNJRGU . You are receiving this because you were mentioned.Message ID: @.***>

ajwtech on Apr 29, 2024