shunjizhan / react-folder-tree

A versatile react treeview library that supports custom icons and event handlers
https://www.npmjs.com/package/react-folder-tree
117 stars 44 forks source link

ReferenceError: self is not defined #74

Open anthonymzupancic opened 1 year ago

anthonymzupancic commented 1 year ago

Thanks for putting this package together; it's exactly what I need!

I have it loaded in and implemented so it 'works', however anytime I refresh my browser or navigate to the page I'm using the component on it throws me the following error:

ReferenceError: self is not defined
    at Object.<anonymous> (/Users/anthonyzupancic/Documents/GIT/git-connect/node_modules/react-folder-tree/dist/react-folder-tree.bundle.js:1:248)
    at Module._compile (node:internal/modules/cjs/loader:1097:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1151:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.react-folder-tree (/Users/anthonyzupancic/Documents/GIT/git-connect/.next/server/pages/sync/create.js:955:18)
    at __webpack_require__ (/Users/anthonyzupancic/Documents/GIT/git-connect/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/forms/asset_navigation/FolderTree.tsx:7:75) {
  page: '/sync/create'
}

If I remove the component > reload my localhost > add the component/save => it works Then I refresh my browser or navigate around and the error is thrown.

shunjizhan commented 1 year ago

Hi, please checkout some previous discussion here, hope it solves your issue!

ummartoor commented 1 year ago

import 'react-folder-tree/dist/style.css'

const FolderTree = dynamic(() => import('react-folder-tree'), { ssr: false })

const justData = { name: 'All Cryptos', children: [ { name: 'Bitcoin', url: 'root/Bitcoin', _id: 1, checked: 0 }, { name: 'Etherium', url: 'root/Etherium', _id: 2, checked: 0 }, { name: 'Polkadot', url: 'root/Polkadot', _id: 3, checked: 0 }, { name: 'POW', children: [ { name: 'Bitcoin', url: 'root/Bitcoin', _id: 5, checked: 0 }, { name: 'Litecoin', url: 'root/Litecoin', _id: 6, checked: 0 }, { name: 'Bitcoin Cash', url: 'root/Bitcoin Cash', _id: 7, checked: 0 } ], url: 'root/POW', _id: 4, checked: 0, isOpen: true }, { name: 'Public Chains', children: [ { name: 'Ripple', url: 'root/Ripple', _id: 9, checked: 0 }, { name: 'Chainlink', url: 'root/Chainlink', _id: 10, checked: 0 } ], url: 'root/Public Chains', _id: 8, checked: 0, isOpen: true } ], url: 'root/All Cryptos', _id: 0, checked: 0, isOpen: true }