reactivue
reactivue copied to clipboard
Not working in React16 Projects
Describe the bug
When adding reactivue in existing React16 projects, we found the reactiveness lost in demo.
- install
[email protected]
in project - follow
useSetup
demo, create a simple counter function component with ref/computed - mount the component, and call
inc
function - view never rerendered
The project https://github.com/a20185/reactivue-bug repro the same bug, by following steps:
- clone the repo
- yarn install
- yarn start
- 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
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guide.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
- [X] The provided reproduction is a minimal reproducible of the bug.
@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"
}
...
}
Great, thanks @CJY0208 , It works!