メニュー
Use when migrating React code or libraries to Preact, configuring preact/compat, bundler aliases, react/jsx-runtime, react-dom, Jest, Node SSR aliases, or diagnosing duplicate React/Preact copies and compat behavior differences.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | preact-compat-aliasing |
| description | Use when migrating React code or libraries to Preact, configuring preact/compat, bundler aliases, react/jsx-runtime, react-dom, Jest, Node SSR aliases, or diagnosing duplicate React/Preact copies and compat behavior differences. |
Start by deciding whether the code needs React ecosystem compatibility. Use Preact core for Preact-native apps; use preact/compat when React libraries import react, react-dom, or React JSX runtimes.
@preact/preset-vite: aliases are handled for you — just install the preset.react → preact/compat, react-dom → preact/compat, react-dom/test-utils → preact/test-utils, and react/jsx-runtime → preact/jsx-runtime."react": "npm:@preact/compat" and "react-dom": "npm:@preact/compat" in package.json when the runtime imports React directly.paths for react, react/jsx-runtime, react-dom, and react-dom/*. skipLibCheck may be needed for third-party React library types.moduleNameMapper or resolver config.Vite (only needed outside @preact/preset-vite):
// vite.config.js
export default {
resolve: {
alias: {
'react': 'preact/compat',
'react-dom': 'preact/compat',
'react-dom/test-utils': 'preact/test-utils',
'react/jsx-runtime': 'preact/jsx-runtime',
},
},
};
Webpack:
// webpack.config.js
module.exports = {
resolve: {
alias: {
'react': 'preact/compat',
'react-dom': 'preact/compat',
'react-dom/test-utils': 'preact/test-utils',
'react/jsx-runtime': 'preact/jsx-runtime',
},
},
};
Jest:
// jest.config.js
module.exports = {
moduleNameMapper: {
'^react$': 'preact/compat',
'^react-dom$': 'preact/compat',
'^react-dom/test-utils$': 'preact/test-utils',
'^react/jsx-runtime$': 'preact/jsx-runtime',
},
};
preact/compat/client provides React-style createRoot() and hydrateRoot() wrappers, but hydration still uses Preact hydration semantics.Observed risk areas: Radix/floating-ui event behavior, newer React API surface, type conflicts, and mixed module hook failures.
Doc anchors: Switching to Preact from React, Differences to React.
Use when hardening npm package release workflows with trusted publishing, OIDC, GitHub environments, pinned GitHub Actions, disabled publish-path caching, Changesets release PRs, direct tag-based npm publish flows, staged publishing, or npm release-supply-chain reviews.
Use when enabling preact/debug, interpreting Preact debug warnings, invalid HTML nesting or table parser problems, hydration mismatch diagnostics, duplicate keys, invalid refs/events, or component stack traces.
Use when building or debugging Preact forms, controlled or uncontrolled inputs, onInput versus onChange, checkbox, radio, select, textarea behavior, hydration of form state, cursor preservation, or compat event normalization.
Use when Preact hooks fail with invalid hook calls, __H undefined or null errors, mixed CJS/ESM imports, no-build import maps, duplicate Preact copies, useId SSR mismatches, or effect scheduling problems.
Use when Preact SSR, prerendering, hydrate(), Suspense, lazy, streaming SSR, renderToStringAsync(), or browser-parsed HTML produces hydration warnings, duplicate nodes, mismatched DOM, lost focus, stale fallback markup, or client-only conditional render bugs.
Use when starting a Preact app, choosing Vite versus no-build HTM or import maps, setting JSX pragmas, CDN ESM imports, create-preact, or integrating Preact into an existing build pipeline.