antfu/reactivue

Not working in React16 Projects

Opened this issue · 3 comments

a20185 commented

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 commented

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

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 commented

Great, thanks @CJY0208 , It works!