Cannot Resole React Hook Form correctly

[vlack-coder]

Ask your Question

I've literally tried to resolve the package in the webpaconfig.cjs using 'react-hook-form': path.resolve( __dirname, 'node_modules/react-hook-form/dist/index.cjs.js', ), I've also used index.umd.js and index.esm.js but it does not still resolve correctly

I tried this. 'react-hook-form': new URL('./node_modules/react-hook-form/dist/index.cjs.js', import.meta.url).pathname,

So everything resolves but when I open a page that uses React hook form, I get TypeError: i._updateValid is not a function (it is undefined) and it works in the original project .... What can be the problem? Thank you

[vlack-coder]

Hi @jbroma starting a new react-native codebase with RePack, I was not able to use React-hook-form. This is the only dependency that's a blocker from migrating my react native project meanwhile React-hook-form works well when it's installed in the super demo app. Sorry that I tagged you, do you have any idea why it is so. Thank you

[vlack-coder]

Hi @jbroma after trial and error method, I was able to get it to work by removing \/ from /node_modules(.*[/\])+react\//, From this I guess it now matches the react-hook-form path..... My question is that why is the / in the template config but not in the super app demo. Thank you

[jbroma]

Hi @vlack-coder,

We added that because it was too generic and some deps were picked up by mistake.

If changing that helped then adding a similar entry for just react-hook-form should work as well.

[jbroma]

@vlack-coder

I tried this today and I get no conflicts and it works out of the box in new projects. Perhaps something changed in react-hook-form that made it work out of the box? It shouldn't need transpiling as the library comes pretranspiled already.

I'll close this issue since you resolved your problems but also it's unclear that this was to default webpack.config we provide. Feel free to post an update here and we might reopen this and find the proper root cause of this.

[vlack-coder]

Hi @jbroma
So I tried it again with a new repo that has only react-hook-form installed and still encountered the same issue..... NB: I'm using the Controller component from react hook form

Link to the repo - Github Repo

[jbroma]

Thanks for providing the repro, I'll check it out and get back to you to.

[jbroma]

Hi @vlack-coder,

I was able to reproduce your error, I was able to fix it and get it to work by adding the react-hook-form to transpiled modules inside of webpack.config. In my repro I think I didn't manage to encounter the error because I didn't use enough of the lib to get to this error. Both metro and webpack resolve correctly to the same entrypoint (node_modules/react-hook-form/dist/index.cjs.js), so aliasing shouldn't be neeed in this case.

Please do the following to resolve your issue:

rules: [
  {
    test: /\.[jt]sx?$/,
    include: [
      /node_modules(.*[/\\])+react\//,
      /node_modules(.*[/\\])+react-native/,
      /node_modules(.*[/\\])+@react-native/,
      /node_modules(.*[/\\])+@react-navigation/,
      /node_modules(.*[/\\])+@react-native-community/,
      /node_modules(.*[/\\])+expo/,
      /node_modules(.*[/\\])+pretty-format/,
      /node_modules(.*[/\\])+metro/,
      /node_modules(.*[/\\])+abort-controller/,
      /node_modules(.*[/\\])+@callstack\/repack/,
      /node_modules(.*[/\\])+react-hook-form/,  // <-- add this
    ],
    use: 'babel-loader',
  },
]

We should have a permament fix for this resolution & transpilation issues in the future, right now this is the only way to get around that.

[github-actions[bot]]

This issue has been marked as stale because it has been inactive for 30 days. Please update this issue or it will be automatically closed in 14 days.

[jbroma]

I'm going to close this issue as it was solved and since then it has become stale.

[vlack-coder]

Thank you @jbroma it worked fine. sorry for the late response