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

Not working in React16 Projects #71

Open
5 tasks done
a20185 opened this issue Aug 25, 2023 · 3 comments
Open
5 tasks done

Not working in React16 Projects #71

a20185 opened this issue Aug 25, 2023 · 3 comments

Comments

@a20185
Copy link

a20185 commented Aug 25, 2023

Describe the bug

When adding reactivue in existing React16 projects, we found the reactiveness lost in demo.

  1. install reactivue@0.4.4 in project
  2. follow useSetup demo, create a simple counter function component with ref/computed
  3. mount the component, and call inc function
  4. view never rerendered

The project https://github.com/a20185/reactivue-bug repro the same bug, by following steps:

  1. clone the repo
  2. yarn install
  3. yarn start
  4. click the counter

Reproduction

https://github.com/a20185/reactivue-bug

System Info

System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 111.61 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
    pnpm: 7.16.0 - ~/.nvm/versions/node/v16.16.0/bin/pnpm
  Browsers:
    Chrome: 116.0.5845.110
    Chrome Canary: 118.0.5968.0
    Safari: 14.1.1

Used Package Manager

yarn

Validations

  • Follow our Code of Conduct
  • Read the Contributing Guide.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.
@a20185
Copy link
Author

a20185 commented Aug 25, 2023

@antfu @CJY0208 any ideas on this problem?
It seemed the code never reach reactivue land. When I'm trying to add breakpoints in callback functions in doWatch and effects in useSetup implementation, it never trigger watch or effect when using inc to modify values.

@CJY0208
Copy link
Contributor

CJY0208 commented Sep 4, 2023

I noticed that there are multiple versions of @vue/* in your lock file. Try aligning the versions in package.json through "resolutions", and then see if the problem disappears.

// package.json
{
  ...
  "resolutions": {
    "@vue/reactivity": "3.1.5",
    "@vue/runtime-core": "3.1.5",
    "@vue/shared": "3.1.5"
  }
  ...
}

image

@a20185
Copy link
Author

a20185 commented Sep 7, 2023

Great, thanks @CJY0208 , It works!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants