search

bcnmy / hyphen-widget

A Widget for Hyphen
1 stars 1 forks source link

Compatible with React #1

Open flyinglimao opened 2 years ago

flyinglimao commented 2 years ago

Goal

Make it can be used as a React component in React projects

Current Progress

It exported a React class component in order to support Vanilla JS and React.js. It works in Vanilla JS but not in React.js

Problem

It caused (Error 321)[https://reactjs.org/docs/error-decoder.html/?invariant=321]. It seems required the widget move react into peer dependencies, but it didn't work and will break Vanilla JS.

asheerrizvi commented 2 years ago

@flyinglimao hey, did you pick this up?

flyinglimao commented 2 years ago

still looking for a way to solve it. tried some ways but it didn't work. do you have any idea?

d4mr commented 2 years ago

@flyinglimao can you let us know and describe in greater detail where exactly you are facing issues with React integration? Other widgets find success using the Portal API that React offers https://reactjs.org/docs/portals.html

Let us know if you need any help.

flyinglimao commented 2 years ago

The problem is that this widget cannot be imported in react project as it caused Error 321.

I looked into the issue and understood that resulted from that the widget use react, and therefore when using the widget in a react project, there will be 2 react instances, which is not allowed. Then I moved react and react-dom to peerDependencies, which solution works in most component packages. However, I still getting this error. I yet cannot find why the solution isn't applicable.

The Portal API seems can't solve the issue as it still used react. I didn't find widgets that use Portal API to solve, would you please list some examples, and then I can take a look at how they do?

flyinglimao commented 2 years ago

I was trying to make 2 different builds, one for vanilla js and the other one for React. For React, I added react and react-dom to externals in webpack.config.js. However, they still were included in built files. It looks like that web3modal is using react 16.18. I don't know if that is the problem, and also don't know a solution.