Open raph5 opened 5 months ago
We would be open to a PR for this, but first a few things of concern:
Personally I will not take the time to search futher because the fix works for my project. Thank you for this component. I had a lot of trouble finding a good lightweight tree view component as big headless ui frameworks don't implement them.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
This issue was closed automatically since it was marked as stale because it has not had recent activity. Thank you for your contributions.
Just chiming in that I also have this problem on my Remix project.
Open to a PR
Hi, i'm also facing the same issue in my remix project. I've tried the above solution but it's not working for me. I've used the dynamic import to solve the issue.
const TreeView = lazy(() => import('react-accessible-treeview').then(module => ({ default: module.default })));
Describe the bug Im using a server side rendering react framework (remix) and TreeView server side rendering is not working. When I try to use TreeView component in my projet it work just fine on client after hydration but when I reload the page (and remix try to ssr the component) I get this errro :
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Code That Causes The Issue After searching a little I found that the error came from commonjs import : I tried to console log the module
And here is the results on the server :
As on the client I get :
This mismatch come from the fact that server uses
dist/react-accessible-treeview.cjs.js
and client usesdist/react-accessible-treeview.esm.js
Here is the code i implemented to fix the issue on my project :
To Reproduce create a new remix project :
npx create-remix@latest
install react-accessible-treeview (im using pnpm) :pnpm add react-accessible-treeview
implement basic exemple from the doc https://dgreene1.github.io/react-accessible-treeview/docs/examples-BasicDesktop :