Ví dụ về lỗi dùng controller của react-hook-form không nhận được FormProvider bên ngoài truyền vào khi 2 thành phần nằm ở 2 vị trí khác nhau

Ta có:
– apps/route
– libs/ui

Trong ui có thư mục form control, có CustomInput dùng Controller. Tên package là @myproject/ui, sau đó được build ra package.
Trong package.json của apps/route, cài thêm @myproject/ui vào.

Lúc này có file uploadfile trong apps/route, file này sẽ chứa biểu mẫu dùng useForm của react-hook-form, có import @myproject/ui/build/CustomInput
vào sử dụng, lúc này có FormProvider truyền formContext của useForm xuống, nhưng khi chạy thì CustomInput không nhận được formContext và báo lỗi control = null???

Tại sao lại như vậy?
Lúc này, bên dưới node của apps/route có file razzle.config.js ta cần dùng resolve path để chúng dùng chung package pnpm, lúc này mới giải quyết được vấn đề.

Ví dụ:

// razzle.config.js

const path = require('path');

const root = path.resolve(__dirname, '.', 'node_modules');
module.exports = {
  modifyWebpackConfig({ webpackConfig }) {
    // eslint-disable-next-line no-param-reassign
    webpackConfig.resolve.alias = {
      ...webpackConfig.resolve.alias,
      react: path.resolve(root, 'react'),
      'react-dom': path.resolve(root, 'react-dom'),
    };
    return webpackConfig;
  },
};