commonjs and esm import mismatch

[raph5]

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

import * as module from "react-accessible-treeview"
console.log(module)

And here is the results on the server :

{
  CLICK_ACTIONS: [ 'SELECT', 'FOCUS', 'EXCLUSIVE_SELECT' ],
  __esModule: true,
  default: {
    CLICK_ACTIONS: [ 'SELECT', 'FOCUS', 'EXCLUSIVE_SELECT' ],
    default: {
      '$$typeof': Symbol(react.forward_ref),
      render: [Function (anonymous)],
      propTypes: [Object]
    },
    flattenTree: [Function (anonymous)]
  },
  flattenTree: [Function (anonymous)]
}

As on the client I get :

{
  CLICK_ACTIONS: [ 'SELECT', 'FOCUS', 'EXCLUSIVE_SELECT' ],
  default: {
    '$$typeof': Symbol(react.forward_ref),
    render: [Function (anonymous)],
    propTypes: [Object]
  },
  flattenTree: [Function (anonymous)]
}

This mismatch come from the fact that server uses dist/react-accessible-treeview.cjs.js and client uses dist/react-accessible-treeview.esm.js

Here is the code i implemented to fix the issue on my project :

import * as module from "react-accessible-treeview"

let TreeView: typeof module.default
let flattenTree: typeof module.flattenTree
let CLICK_ACTIONS: typeof module.CLICK_ACTIONS

if(typeof document == "undefined") {
  TreeView = module.default.default
  flattenTree = module.default.flattenTree
  CLICK_ACTIONS = module.default.CLICK_ACTIONS
}
else {
  TreeView = module.default
  flattenTree = module.flattenTree
  CLICK_ACTIONS = module.CLICK_ACTIONS
}

export { flattenTree, CLICK_ACTIONS }
export default TreeView

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-Basic

Desktop :

• OS: windows 11 running wsl2
• Browser: Chrome

[dgreene1]

We would be open to a PR for this, but first a few things of concern:

• I believe the code you’re talking about is handled by our bundled so I’m not sure it can be changed. Maybe you’ll find it can
• To accept a PR for this, we’d want to make sure that we have test for this so that it doesn’t regress

[raph5]

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.

[stale[bot]]

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.

[stale[bot]]

This issue was closed automatically since it was marked as stale because it has not had recent activity. Thank you for your contributions.

[ersinakinci]

Just chiming in that I also have this problem on my Remix project.

[dgreene1]

Open to a PR

[Ahtisham-Shakir]

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 })));