[Bug]: Node 22/24 + dynamic require('@tailwindcss/postcss') in modern.config.ts crashes dev with ResolverFactory error

[Timeless0911]

版本信息

System:
  OS: macOS 26.4
  CPU: (10) arm64 Apple M1 Max
  Memory: 2.59 GB / 64.00 GB
  Shell: 5.9 - /bin/zsh
Browsers:
  Chrome: 146.0.7680.178
  Safari: 26.4

Additional package versions from the repro:

@modern-js/app-tools: 3.1.2
@tailwindcss/postcss: 4.2.2
tailwindcss: 4.2.2
react: 19.2.1
react-dom: 19.2.1
typescript: 5.7.3
pnpm: 10.33.0

Tested Node versions:

20.19.0: works
22.22.2: fails
24.13.0: fails

问题详情

In a Modern.js project using @modern-js/app-tools@3.1.2, if modern.config.ts dynamically loads Tailwind PostCSS inside the tools.postcss callback:

tools: {
  postcss(_, { addPlugins }) {
    addPlugins([require('@tailwindcss/postcss')]);
  },
}

then pnpm dev fails on Node 22 / 24 with:

TypeError: Cannot read properties of undefined (reading 'ResolverFactory')
    at .../@tailwindcss/node/dist/index.js

The same setup works on Node 20.

I narrowed it down further:

1. @modern-js/app-tools 3.1.1 works on Node 22 with the same project and the same dynamic require('@tailwindcss/postcss').
2. @modern-js/app-tools 3.1.2 fails on Node 22 / 24.
3. Keeping 3.1.2, but moving require('@tailwindcss/postcss') to top-level fixes the issue:

const tailwindcssPostcss = require('@tailwindcss/postcss');

tools: {
  postcss(_, { addPlugins }) {
    addPlugins([tailwindcssPostcss]);
  },
}

4. Keeping 3.1.2, but disabling Node's strip-types path also fixes it:
   • Node 22: NODE_OPTIONS=--no-experimental-strip-types
   • Node 24: NODE_OPTIONS=--no-strip-types

From local diffing, this seems related to the runtime registration changes introduced in @modern-js/app-tools 3.1.2, where Node 22+ can go through a new native TypeScript / node:module.register() / loader path.

So this looks like a compatibility regression in the dev/config loading path exposed by Node 22+ native strip-types support.

复现链接

https://gist.github.com/Timeless0911/a7a2c07127d2623d765cd34e8f90d86a

复现步骤

1. Create a minimal Modern.js project with:

{
  "scripts": {
    "dev": "modern dev"
  },
  "dependencies": {
    "react": "~19.2.1",
    "react-dom": "~19.2.1"
  },
  "devDependencies": {
    "@modern-js/app-tools": "3.1.2",
    "@tailwindcss/postcss": "^4.2.2",
    "tailwindcss": "^4.2.2",
    "typescript": "~5.7.3"
  }
}

2. Add a minimal valid entry such as src/entry.tsx:

export { default } from './App';

3. Use this modern.config.ts:

import { appTools, defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  plugins: [appTools()],
  tools: {
    postcss(_, { addPlugins }) {
      addPlugins([require('@tailwindcss/postcss')]);
    },
  },
});

4. Use Node 22.22.2 or 24.13.0.
5. Run pnpm install.
6. Run pnpm dev.
7. Observe the ResolverFactory error from @tailwindcss/node.

[zllkjc]

will fix in #8530