gloriasoft / veaury

Use React in Vue3 and Vue3 in React, And as perfect as possible!
MIT License
1.31k stars 83 forks source link

require is not defined #38

Closed roman-bandurin closed 2 years ago

roman-bandurin commented 2 years ago

vite + vue + veaury

"name": "veaury",
"version": "2.3.8"

Problem: ReferenceError: require is not defined

I replace in veaury\dist\veaury.esm.js

import{createPortal}from"react-dom";
import{createPortal,createRoot,render,unmountComponentAtNode}from"react-dom";
try{ReactDOM=require("react-dom/client")}catch(e){ReactDOM=require("react-dom")}
<removed>
ReactDOM.createRoot(y)
createRoot(y)
ReactDOM.render(d,y)
render(d,y)
ReactDOM.unmountComponentAtNode(this.$refs.react)
unmountComponentAtNode(this.$refs.react)

It works for me

devilwjp commented 2 years ago

@roman-bandurin In vite.config.js you should use veaury/vite plugin.
https://github.com/devilwjp/veaury#vite
veaury/vite plugin will convert require to import

roman-bandurin commented 2 years ago

Do you want to preconfigure your project in advance? In theory, you don't need to do additional configuration in a React project to support Vue, nor do you need to do additional configuration in a Vue project to support React.

If the React or Vue component you want to convert comes from a npm package, or has already been built (Not a direct vue file and does not contain jsx), you can use applyPureReactInVue or applyVueInReact directly.

I have a built component so I don't want to preconfigure your project in advance. After use applyReactInVue I have problem (require is not defined). Anyway, I use veaury/vite plugin and I have got:

failed to load config from vite.config.ts
error when starting dev server:
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'node_modules\veaury\vite' is not supported resolving ES modules imported from vite.config.ts.timestamp-1664347926702.mjs
devilwjp commented 2 years ago

@roman-bandurin For the problem you encounter when configuring vite.config.js, you can replace it with import veauryPlugin from 'veaury/vite/index.js', this problem may be caused by the low version of nodejs.

And about the fact that you mentioned using an already built component and should not preconfigure the project, this conclusion is correct, I will fix this problem in a later version.

If you want to solve all the problems immediately, it is recommended to downgrade to version 2.3.1.

roman-bandurin commented 2 years ago

thanks, v2.3.1 works

devilwjp commented 2 years ago

@roman-bandurin
Version 2.3.9 fixed this issue.