我使用react-admin，但是构建很重并且发生了错误

Question

我现在正在使用react-admin开发前端。

由于我想使用 NextJS，所以我可以继续参考以下文章。

参考：https://marmelab.com/react-admin/NextJs.html

然后我尝试运行

next dev

，它成功了，并且没有发生错误，但是当我尝试运行

next build

时，它很重。

终端长时间显示“正在创建并优化生产版本...”，终究失败了。

我使用List组件的时候好像出现了错误。

■ src/app/user/page.tsx（之前）

import { List, Datagrid, TextField, EmailField } from "react-admin"

const UserList = () => {
    return (
        <List>
            <Datagrid　bulkActionButtons={false}>
                <TextField source="id"/>
                <TextField source="name"/>
                <EmailField
                    sx={{ mt: 2, mb: 1, display: 'block' }}
                    source="email"
                />
                <TextField source="phone"/>
                <TextField source="website"/>
            </Datagrid>
        </List>
    )
}

export default UserList

■ 构建结果

# yarn build

yarn run v1.22.19
$ next build
  ▲ Next.js 14.2.4
  - Environments: .env

   Creating an optimized production build ...
・
・
・

./node_modules/ra-core/dist/esm/controller/input/useReferenceArrayInputController.js
Attempted import error: 'useFormContext' is not exported from 'react-hook-form' (imported as 'useFormContext').

./node_modules/ra-core/dist/esm/controller/input/useReferenceInputController.js
Attempted import error: 'useWatch' is not exported from 'react-hook-form' (imported as 'useWatch').

./node_modules/ra-core/dist/esm/form/FormDataConsumer.js
Attempted import error: 'useFormContext' is not exported from 'react-hook-form' (imported as 'useFormContext').

./node_modules/ra-core/dist/esm/form/useInput.js
Attempted import error: 'useController' is not exported from 'react-hook-form' (imported as 'useController').
・
・
・
> Build error occurred
Error: Failed to collect page data for /
    at /node_modules/next/dist/build/utils.js:1268:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
error Command failed with exit code 1.

上面的错误似乎是在react-admin的模块端给出的。

当我尝试删除

List

组件

■ src/app/user/page.tsx（之后）

import React from "react";

const UserList = () => {
    return <div>list page</div>
}

export default UserList

■ 构建结果

# yarn build
・
・
Route (app)                              Size     First Load JS
┌ ○ /                                    1.19 kB        88.6 kB
├ ○ /_not-found                          875 B          88.3 kB
└ ○ /user                                142 B          87.6 kB
+ First Load JS shared by all            87.4 kB
  ├ chunks/23-078fee2ec5684719.js        31.7 kB
  ├ chunks/fd9d1056-ced9a5a82a1efc0b.js  53.6 kB
  └ other shared chunks (total)          2.11 kB


○  (Static)  prerendered as static content

Done in 43.45s.

通过了。

这是react-admin方面的一个错误吗？或者有正确的使用方法吗？

如果有人有解决方案请告诉我。

仅供参考

• 下一个版本：“14.2.4”
• react-admin 版本：“4.16.19”

我尝试并搜索，但找不到错误的解决方案

Answer 1

从错误文本中可以看出： ./node_modules/ra-core/dist/esm/controller/input/useReferenceInputController.js 尝试导入错误：“useWatch”未从“react-hook-form”导出（导入为“useWatch”）。

问题出在“ra-core”包中，它是“react-admin”的核心组件。这和你想象的一样。

作为解决方案，我建议您尝试使用“react-admin”的早期版本之一，例如 4.16.17