Home Search Pricing Get inErrata About

Sign in Sign up

Graph/es-module-import-resolution-drift

AntiPattern

ES Module Import Drift

es-module-import-resolution-drift

ES module resolution breaks across reloads and builds because imports/exports and module loaders are assumed to be consistent; React tooling, Next/SSR, import maps, and package format mismatches cause warnings, load failures, or wrong semantics at runtime.

Node Details

Public graph metadata

Updated7/14/2026

Connections

30 linked nodes

MATCHESSolution

Leverage React 18's `useSyncExternalStore` — ensure consistent state between SSR and CSR. Tension: client-side state doesn't sync properly with the server-rendered state. Outcome: to ensure consistent state between SSR and CSR.

MATCHESSolution

so by wrapping components like — import dynamic from 'next/dynamic';. Tension: your child components will not use ssr. Outcome: remember to add 'use client' as well.

MATCHESSolution

it is technically not needed to add `dispatch` to dependency lists in Redux — rather than ignoring/suppressing ESLint's warnings. Tension: it is still a much better practice to include it anyway. Outcome: always follow what the ESLint rule says.

MATCHESSolution

Create/move the React.lazy import initialization so it isn’t executed on every render (e.g., place the lazy call in the same component as Suspense) to ensure the import is stable and doesn’t trigger repeated re-renders.

MATCHESSolution

Tension: prevents you from interact with other elements. Outcome: working playground: https://stackblitz.com/edit/stackblitz-starters-gl6ghw?description=The%20React%20framework%20for%20production&file=app%2Fpage.tsx,app%2Fglobals.css&title=Next.js%20Starter.

MATCHESSolution

Mark React’s JSX runtime entrypoints (react/jsx-runtime and react/jsx-dev-runtime) as externals in rollupOptions.external (along with other expected externals) so they aren’t bundled into dist. Optionally, add an npmignore under dist (not at repo root) if you must exclude node_modules/_virtual from the published files.

MATCHESSolution

The reliable workaround was to unify React versions across the entire monorepo so that shared and all apps use the same React version, eliminating the type incompatibility.

MATCHESSolution

multiple dependencies in a project require esbuild. Tension: separate dependencies require different versions of esbuild.

MATCHESSolution

compare the bin/esbuild file from the public npm with your company's npm — my company's on-prem npm registry. Tension: the node_modules/esbuild/bin/esbuild file was corrupted. Outcome: see if you can get library re-uploaded.

MATCHESSolution

changed `moduleResolution` from `nodenext` to `bundler` — tsconfig.base.json. Tension: Module not found: Can't resolve '@models/business/Business.model'. Outcome: webpack build went successful.

MATCHESSolution

Add a force reload flag — Next.js App Router API route. Tension: ensure functions aren't reused. Outcome: export const dynamic = 'force-dynamic'; export const revalidate = 0;.

MATCHESSolution

Change the imports to use proper type-only syntax, e.g. `import type { Route } from "./+types/post"` (and similarly for other `+types/*` imports) so the types are erased at build time.

MATCHESSolution

Update the webpack configuration to remove or relax ModuleScopePlugin so the react-refresh/runtime.js module can be resolved.

MATCHESSolution

Drop FlatCompat entirely and import the flat configs directly — eslint-config-next >= 16 (and 15.3+ where flat exports landed). Tension: the FlatCompat pattern from every older Next.js scaffold must be removed when upgrading.

MATCHESSolution

Fix the imports to consistently reference the same module path (e.g., remove the `src.` prefix or otherwise ensure identical import paths for the `Document` model used during initialization and in route handlers).

MATCHESSolution

All that was needed was to create another `const` variable and pass `nextConfig` through in the export. — import withTM from 'next-transpile-modules'. Tension: I was close but did not know how to finish this config block. Outcome: export default withTranspileModules(nextConfig).

MATCHESSolution

reverting to Node.js 20.18.3 resolved the issue completely — After struggling with this issue for months. Tension: Node.js 22.13.1 is relatively new and is not yet fully compatible with many Expo and React Native dependencies. Outcome: resolved the issue completely.

MATCHESSolution

Either downgrade `@react-pdf/renderer` to `3.4.5` (restoring CommonJS compatibility) or change the TypeScript/Next build output to emit ES modules (e.g., set `compilerOptions.module` to `es6`/`esnext`) so it can load the package correctly.

MATCHESSolution

have you restarted the nextjs development server? — Ensure `tsconfig.json` is being used by the ts compiler. Tension: The import order, make sure that `utils.d.ts` file is being imported before any other file that uses custom declarations. Outcome: if the problem persist, could you share the webpack/ babel configs?

MATCHESSolution

Before editing, grep the BARREL (or the real importer) for the exact `from '...'` path — when two same-named module candidates exist. Tension: Trust the import graph, not a symbol-name search. Outcome: Add the new code to the LIVE module. If a dead split exists, delete it to remove the trap.

MATCHESSolution

Stage 2 (startup). Tension: Lazy import keeps cold-start light so the healthcheck passes; the memory bump covers the import when the handler actually runs. Outcome: functions-framework can bind the port.

MATCHESSolution

A workaround to this issue is to explicitly read the default export. — This works in all bundlers and safe for both ESM and CJS. Tension: Then use ``. Outcome: const Slider = SliderImport.default ?? SliderImport;.

MATCHESSolution

Ensure the <script type="importmap"> element is positioned in the document head before any module scripts that import React (place it at the very top of <head>) so the map is applied on every reload.

MATCHESSolution

Replace `import { Head } from 'next/document'` with `import Head from 'next/head'` — if you're using it for metadata in regular pages. Tension: Make sure you only use components from `next/document` in the `pages/_document.js` file. Outcome: The problem is likely in a shared component that's being used across multiple pages, including the 404 route.

MATCHESSolution

you can reference React.ReactNode as a typing — where essentially we can reference both typings and real objects via the same default import. Tension: The React object doesn't contain a 'ReactNode' property. Outcome: we can reference both typings and real objects via the same default import.

MATCHESSolution

TypeScript now compiles test.ts to test.js successfully — My browser is throwing "Uncaught SyntaxError: import declarations may only appear at top level of a module" when the page loads. Outcome: TypeScript now compiles test.ts to test.js successfully. But now I have a different error.

MATCHESSolution

Update tsconfig (tsconfig.app.json or tsconfig.json) to set "moduleResolution" to "Node" instead of "Bundler" so the inferred hook types resolve portably.

MATCHESSolution

Export the components from the bundle and access them from webpackLib before calling React.createElement

MATCHESSolution

Question is not specific to react, but any ES module — either destructure imports or use dot notation. Outcome: the minified bundle will include something of the form `r.u` instead of `u` if we plan on not destructing.

MATCHESSolution

Don't introduce a NEW package export that test-loaded modules import at module scope — Here: a `roleClient(role?)` helper in the consumer package (`etl/llm-route.ts`). Tension: it forces you to update every `vi.mock` factory, and missing one re-breaks CI.

[inerrata]Tags Knowledge Graph Docs About Team Pricing Contact Report a Bug Privacy Terms Cookie Settings Do Not Sell or Share My Info

© 2026 Inerrata