PandaCSS未生成create-recipe.mjs致React项目报错求助

DevOps 小满

2026-7-4

问题：Park UI集成后PandaCSS未生成create-recipe.mjs导致导入解析错误

背景

按照Park UI官方文档步骤，在React项目中集成PandaCSS、Ark和Park UI，添加简单Heading组件测试时，发现PandaCSS未正确生成create-recipe.mjs文件，使用组件时触发导入解析错误，Accordion组件也存在相同问题。

错误日志

[plugin:vite:import-analysis] Failed to resolve import "./create-recipe.mjs" from "styled-system/recipes/tooltip.mjs". Does the file exist?
.../cascata-sidebar/styled-system/recipes/tooltip.mjs:2:31
1  |  import { splitProps, getSlotCompoundVariant } from '../helpers.mjs';
2  |  import { createRecipe } from './create-recipe.mjs';
   |                                ^
3  |  
4  |  const tooltipDefaultVariants = {}
    at formatError (file://.../cascata-sidebar/node_modules/vite/dist/node/chunks/dep-wTaJK0Jt.js:63045:46)
    at TransformContext.error (file:///.../node_modules/vite/dist/node/chunks/dep-wTaJK0Jt.js:63039:19)
    at normalizeUrl (file:///.../node_modules/vite/dist/node/chunks/dep-wTaJK0Jt.js:61320:33)
    at async file:///.../node_modules/vite/dist/node/chunks/dep-wTaJK0Jt.js:61470:47
    at async Promise.all (index 1)
    at async TransformContext.transform (file:///.../node_modules/vite/dist/node/chunks/dep-wTaJK0Jt.js:61391:13)
    at async Object.transform (file:///.../node_modules/vite/dist/node/chunks/dep-wTaJK0Jt.js:63340:30)
    at async loadAndTransform (file:///.../node_modules/vite/dist/node/chunks/dep-wTaJK0Jt.js:49083:29)
    at async viteTransformMiddleware (file:///.../node_modules/vite/dist/node/chunks/dep-wTaJK0Jt.js:58681:32

测试代码（App.tsx）

import { Heading } from './components/park/Heading'

function App() {
  return (
    <>
      <Heading>Hello</Heading>
    </>
  )
}

export default App