Feature Request: Next.js Support

[sibbng]

[antfu]

I haven't used next.js before, and as reactivue is kinda a low level thing, it should work for whatever supports react. Is there anything I should do to support next.js? Thanks

[sibbng]

Keeping data in sync between server side render and client side hydration is one of the first requirements of server side rendered apps. That because nuxt implementation of composition api have ssrRef. Here it is an example how mobx-react implemented in next.js:

In addition, current build output is not working in Next.js. I get this error on freshly created next app: TypeError: Cannot set property computed of #<Object> which has only a getter

[antfu]

@sibbngheid Thanks for the info. That's interesting to know. I will have a look :)

[sibbng]

https://github.com/antfu/reactivue/blob/e9423553ab5e5b954bb8044f51a691618924fdf0/packages/reactivue/rollup.config.js#L12-L13

Adding externalLiveBindings: false, in cjs output settings fixes the TypeError: Cannot set property computed of #<Object> which has only a getter error.

[antfu]

@sibbngheid Oh, I see. It's probably because I have override the computed exports https://github.com/antfu/reactivue/blob/e9423553ab5e5b954bb8044f51a691618924fdf0/packages/reactivue/src/index.ts#L5

Will check it out, thanks for the info

[antfu]

Just released 0.2.1 and this should be hopefully fixed :)

[sibbng]

Works 👌

I'm trying to handle server side data with getServerSideProps . It is works fine. But there is a weird error on globally shared refs.

Steps to reproduce: https://github.com/sibbngheid/issue-4

1. clone, run yarn, run yarn dev
2. visit localhost:3000
3. click increase and increase counter
4. go to about page
5. then go to home back

in 5th step react fires an error on console It is linking to here https://fb.me/setstate-in-render

But everything is work as expected.

[sibbng]

I think get it working on just-works branch. https://github.com/sibbngheid/issue-4/tree/just-works

I move my data logic to _app.js to make it available on all page components. But the error above was still occurs (there was actual component names instead of unknowns).

Then I try to use useEffect with data comes server, and it is works as expected 🎉 If I'm not missing something... 🤔

[antfu]

@sibbngheid Thanks for working on this, and congrats that you made it work!

However, I have just pull your code on the just-works branch, it seems to work fine with me (and no error). Wondering if it's something about caching, or I did miss any step?

[sibbng]

I don't know what is your question exactly about. Can you make it clear?

[antfu]

@sibbngheid

But the error above was still occurs (there was actual component names instead of unknowns).

Everything works fine with me(well done!). Wondering why the error occurs to you.

[sibbng]

Move setCount to outside of useEffect, will throw error.

[antfu]

I think using useEffect is a good approach here. One other solution might be something like setCount: (v) => (counter.value !== v && counter.value = v) but it looks kinda messy.

[sibbng]

setCount: (v) => (counter.value !== v && (counter.value = v))

No, this code will not work. It is not different than not using it. What React's not happy about in here is, updating parent component while still rendering current component.

Error message is clear enough: Warning: Cannot update a component (`MyApp`) while rendering a different component (`Home`). To locate the bad setState() call inside `Home`, follow the stack trace as described in https://fb.me/setstate-in-render

useEffect defers update as described in docs.

While setCount method is bound to parent component's context via useSetup and passing them to child component via props is not makes them bounded to child component's effect cycle (I think).

I think we can get the effect of what useEffect does here by bounding setup to current component by passing props to something like useSetupEffect(props) (line 6).

Maybe, I'm can be totally wrong. I'm not sure how React works internally.

[Dav3rs]

Is this project abandoned? There has been no activity in months, and it's an excellent project!! Will there be a stable version soon?

[antfu]

@Dav3rs This is definitely not abandoned. Instead, I don't see it being used that much. You can still use it and if you find any bugs, just raise an issue so we can look into it. Thanks.

[Dav3rs]

Ok thanks! I have been waiting to use it because of this warning:

It's currently expiremental and might have some breaking changes in the future. No production yet...

It scares a little. (O_o), maybe now that vue3 was released you can remove that warning. And there are many people who do not know that this project exists, maybe a couple of tutorials on medium.com and dev.to, in which there are people subscribed to React and Vue posts will increase the project usage. I like Vue but I have to work with React too. The possibility of using composition-api in React make me feel in home :) Thank's

[antfu]

@Dav3rs Thanks, I have removed that line as I don't expect big breaking changes in the foresee future. When we need to do some changes, we will follow semver for sure.

maybe a couple of tutorials on medium.com and dev.to

well maybe, but I doubt if I had time to do so.

I am not working with React for now. I might not be able to work on it actively. However, I will triage issues and reviewing PRs actively for my projects. So if you like it, just used it and raise PRs if you faced any problem. I could also give access to people who have contributed to a certain point. Thanks.

[Mosharush]

I used it with Next.js and the first render work as well. But the render function does not run again event the state changes.

On debugger I saw the ref value increment but render not triggered: