Version
System:
OS: macOS 15.7.4
CPU: (10) arm64 Apple M1 Max
Memory: 117.13 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Browsers:
Chrome: 145.0.7632.110
Firefox: 147.0.4
Safari: 26.2
npmPackages:
@modern-js/app-tools: 3.0.2 => 3.0.2
@modern-js/runtime: 3.0.2 => 3.0.2
@modern-js/tsconfig: 3.0.2 => 3.0.2
Details
When using the ESM build of Modern.js (triggered by "type": "module" in the project's package.json) and running pnpm dev, editing any component or page and then refreshing the browser results in a hydration error. It appears that the old SSR bundle is not being properly invalidated.
Although the SSR bundle is loaded here: resource.ts#L107, which eventually calls importPath (require.ts#L11) and passes a timestamp that correctly invalidates dist/index.js, this does not affect sub-imports inside that file (for example, page.tsx in a template bootstrapped with npx @modern-js/create@latest myapp). As a result, modules like page.tsx remain cached.
The only workaround that seems to help is registering a custom module loader that patches module URLs inside the dist directories. However, this is not an ideal solution. It raises concerns about whether the current version is fully ready for ESM adoption in production projects.
Could you please also clarify whether it is considered safe to use Modern.js with ESM despite this issue?
Reproduce link
https://github.com/demidyuk/modernjs-v3-esm-cache-bug
Reproduce Steps
After cloning the repo and installing the dependencies, follow these steps:
- Start the dev server with
pnpm dev
- Open the app in the browser
- Edit any page or component (e.g., src/routes/page.tsx) and save
- Refresh the browser manually
- Observe a hydration error caused by stale SSR sub-module caching
Version
Details
When using the ESM build of Modern.js (triggered by
"type": "module"in the project's package.json) and runningpnpm dev, editing any component or page and then refreshing the browser results in a hydration error. It appears that the old SSR bundle is not being properly invalidated.Although the SSR bundle is loaded here: resource.ts#L107, which eventually calls
importPath(require.ts#L11) and passes a timestamp that correctly invalidatesdist/index.js, this does not affect sub-imports inside that file (for example,page.tsxin a template bootstrapped withnpx @modern-js/create@latest myapp). As a result, modules likepage.tsxremain cached.The only workaround that seems to help is registering a custom module loader that patches module URLs inside the dist directories. However, this is not an ideal solution. It raises concerns about whether the current version is fully ready for ESM adoption in production projects.
Could you please also clarify whether it is considered safe to use Modern.js with ESM despite this issue?
Reproduce link
https://github.com/demidyuk/modernjs-v3-esm-cache-bug
Reproduce Steps
After cloning the repo and installing the dependencies, follow these steps:
pnpm dev