Cannot Resole React Hook Form correctly about repack

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