gloriasoft/veaury

Cannot run simple example in Nuxt 3 even in ClientOnly mode

Closed this issue · 6 comments

Jesus82 commented

Hi, thanks a lot for maintaining this repo. I'm trying to run a very simple component in Nuxt3 just on client side, but I still getting the Objects are not valid as a React child error, same as in #93 I've made a simple reproduction here.

Is there any possibility of using this in a Nuxt3 project in Client side only? Thanks in advance!

devilwjp commented

@Jesus82

In the vue project, the react component should be placed in the react_app directory by default, unless you adjust the configuration of veauryVitePlugin.

In your example, the name of the "test" directory should be changed to "react_app". And it works fine!

image

  • 🚀1
Jesus82 commented

@devilwjp awesome! I will make a PR to add it to add a Nuxt section to the docs. How should I set the config of VeauryVitePlugin in order to change the folder where I store the React components (in this example, I'd like to fetch them from /test)? Thanks in advance!

devilwjp commented

@Jesus82
https://github.com/gloriasoft/veaury?tab=readme-ov-file#vite
Check the configuration of type custom in detail, and determine the vue jsx file by setting vueJsxInclude or vueJsxExclude. The jsx file that is not in the range is the react jsx file.

devilwjp commented

@Jesus82
The configuration of the vite plugin has nothing to do with the nuxt project. As long as the project is built using Vite, it will follow this configuration.

devilwjp commented

@Jesus82
In the example, if you want to keep the test directory, refer to the figure below.
image

  • 👍1
Jesus82 commented

Thanks! I will wrap it up and make a PR for the readme (I also found out that for the build we need to transpile the library). Thanks for the quick replies, you saved my day!