Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – I use the react-admin, but the build is heavy and an error is happened

I am developing the frontend now using the react-admin.

As I wanted to use the NextJS, I was able to go ahead in reference to an article as follows.

Ref: https://marmelab.com/react-admin/NextJs.html

And then I try to run next dev, it is worked, and an error is not happened, but when I try to run next build, it is very heavy.

The terminal show the "Creating and optimized production build…" for a long time, after all it is failed.

It seems that when I use the List component, an error is happened.

■ src/app/user/page.tsx (before)

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

■ build result

# 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.

It seems that the above error is given on the module side of react-admin.

When I try to remove the List Component

■ src/app/user/page.tsx (after)

import React from "react";

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

export default UserList

■ build result

# 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.

It is passed.

Is this a bug on the react-admin side? Or is there right how to use?

If anyone has solution please let me know.

FYI

  • next version: "14.2.4"
  • react-admin’s version: "4.16.19"

I tried and searched but i cant find the solution for the error

Tags:

2

Answers


  1. 0

    As it follows from the error text:
    ./node_modules/ra-core/dist/esm/controller/input/useReferenceInputController.js
    Attempted import error: ‘useWatch’ is not exported from ‘react-hook-form’ (imported as ‘useWatch’).

    the problem is in ‘ra-core’ package, that is a core component of ‘react-admin’. This is the same as you’ve supposed.

    As a solution, I can suggest you try using one of the previous versions of ‘react-admin’, for example 4.16.17

    Update

    I’ve tried with these dependencies:

    "dependencies": {
    "next": "14.2.4",
    "ra-data-json-server": "^4.16.15",
    "react": "^18",
    "react-admin": "^4.16.14",
    "react-dom": "^18"
  },

    and both commands are ok – run build and run dev.

    The result of run build:

    ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
 ✓ Generating static pages (5/5)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (app)                              Size     First Load JS
┌ ○ /                                    276 kB          363 kB
└ ○ /_not-found                          875 B          88.2 kB
+ First Load JS shared by all            87.3 kB
  ├ chunks/23-384c5d8d97972c51.js        31.7 kB
  ├ chunks/fd9d1056-e54aec11530e2117.js  53.6 kB
  └ other shared chunks (total)          2 kB


○  (Static)  prerendered as static content

    Maybe this will help

    Login or Signup to reply.
  2. 0

    It sounds like you’re really diving deep into integrating react-admin with Next.js. I’ve been down that road and know it can be tricky. From what you’re describing, it seems like the build issue is tied to react-hook-form imports in react-admin. Here’s what I’d suggest:

    Version Check:
    First off, double-check the versions of react-hook-form and react-admin you’re using. Sometimes, these libraries need specific versions to play nicely together. Try aligning with the versions recommended in the react-admin documentation.

    npm install [email protected]

    Dependencies Update:
    Make sure all your dependencies are up to date. Sometimes, just updating everything can resolve these kinds of issues.

    npm update

    Duplicate Packages:
    Check if there are duplicate versions of react-hook-form lurking in your node_modules. You can do this with:

    npm ls react-hook-form

    Import Adjustments:
    If the issue persists, you might want to try directly importing the hooks where you use them in your component, like this:

    import { useFormContext, useWatch, useController } from 'react-hook-form';

    Next.js Config:
    Ensure your next.config.js is properly configured. Sometimes tweaking the configuration can help Next.js handle the build process better.

    If you’re still hitting a wall, it might be worth checking out the GitHub issues for react-admin or even posting your specific issue there. The community can be pretty helpful, and someone might have faced and fixed this exact problem.

    Hang in there! Debugging these integration issues can be frustrating, but once it’s all working, it’ll be so worth it. Good luck!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search