使用Preact部署Vercel失败：缺失React模块求解决方案

API 探路者

2026-7-21

解决Vercel部署时Cannot find module 'react'的问题（无需安装React）

问题本质

你使用Preact + Astro部署到Vercel时，报错找不到react模块，核心原因是依赖的pure-react-carousel直接引入了React，但你未安装该包。虽然Astro的Preact集成开启了compat: true，但这个配置仅对Astro编译的业务代码生效，第三方node_modules里的模块不会自动触发React到Preact的别名替换。

解决方案

修改Astro配置文件，在Vite的别名规则中添加react和react-dom指向Preact兼容层的配置，让第三方依赖也能通过别名解析到Preact：

// astro.config.mjs
import path from 'path';
import preact from '@astrojs/preact';
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [
    preact({ compat: true }),
  ],
  vite: {
    resolve: {
      alias: {
        '~': path.resolve(__dirname, './src'),
        // 新增React相关别名，指向Preact兼容层
        'react': 'preact/compat',
        'react-dom': 'preact/compat'
      },
    },
  },
});

原理说明

preact/compat是Preact官方提供的React兼容层，完全复刻React的API，可以直接替代react和react-dom包。
通过Vite全局别名配置，所有代码（包括第三方依赖）中引用的react/react-dom都会被解析为preact/compat，无需额外安装React。