Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hooks don't work with yarn link #14257

Closed
andy9775 opened this issue Nov 17, 2018 · 7 comments

Comments

@andy9775
Copy link

@andy9775 andy9775 commented Nov 17, 2018

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When developing an external library locally and using yarn link to link the library to a local react app the "hooks can only be called inside the body of a function component" error comes up. However, after publishing to npm and using the published version in the local react app everything works as expected.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

  1. Create a library that's built with hooks (my-hooks-lib)
  2. Create a local app that uses the library (my-react-app) using CRA
  3. yarn link in my-hooks-lib and in my-react-app run yarn link my-hooks-lib

What is the expected behavior?
yarn start in the react app should use hooks and render normally

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
react and react-dom 16.7.0-alpha.2
OSX

@gaearon

This comment has been minimized.

Copy link
Member

@gaearon gaearon commented Nov 19, 2018

It's not expected that it would work unless you link react back from your module to your app.

This has actually always been the case (React apps are subtly broken when there are two copies of React module). Hooks surface this immediately which I guess is good.

We do have another issue tracking a better error message for this case.

@gaearon gaearon closed this Nov 19, 2018
@andy9775

This comment has been minimized.

Copy link
Author

@andy9775 andy9775 commented Nov 22, 2018

My mistake - first time using yarn link with react. Thanks for addressing @gaearon

@corysimmons

This comment has been minimized.

Copy link

@corysimmons corysimmons commented Jun 28, 2019

Is there a workaround for this? How can people locally test react components they want to turn into libraries? :\


Workaround is https://github.com/whitecolor/yalc

@dcecile

This comment has been minimized.

Copy link

@dcecile dcecile commented Jul 5, 2019

If your React app is bundled with Webpack, you can use a Webpack alias to force all React references to resolve to a single module. In your webpack.config.js:

{
    /* ... */
    module: {
        rules: [ /* ... */ ],
    },
    resolve: {
        alias: { react: require.resolve("react") }
    },
}

(Solution from webpack/webpack#8607 (comment))

@maciekgrzybek

This comment has been minimized.

Copy link

@maciekgrzybek maciekgrzybek commented Jul 30, 2019

@dcecile just to clarify, do you resolve that in the library you're working? or in the demo app?

@dcecile

This comment has been minimized.

Copy link

@dcecile dcecile commented Jul 30, 2019

@maciekgrzybek I resolve it in the demo app

@maciekgrzybek

This comment has been minimized.

Copy link

@maciekgrzybek maciekgrzybek commented Jul 30, 2019

Hey @dcecile thanks for a quick answer, sadly, that doesn't work for me as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.