Library not work on NextJs about react-folder-tree

[Djcarrillo6]

Hello!

Just wanted to confirm the solution mentioned above, as I was able to successfully debug the ReferenceError of 'self' not being defined within a Nextjs implementation of this module. I dynamically imported the module as @admondtamang suggested and it debugged the issue! Posted my code below just for further context. Great library @shunjizhan!

PS.. I just created a testData.js file in my root, and imported it directly from there as opposed to importing the object from the module itself, however it is probably still possible through another solution/fix that uses dynamic importing.

import React from 'react';
import dynamic from 'next/dynamic';
import { testData } from './testData';
const DynamicFileTreeImport = dynamic(() => import('react-folder-tree'), {
	ssr: false, // needed to prevent warning about dynamic component
});

const DocFileTree = () => {
	const onTreeStateChange = (state, event) => console.log(state, event);

	return <DynamicFileTreeImport data={testData} onChange={onTreeStateChange} />;
};

export default DocFileTree;

[admondtamang]

Lazy loading with dynamic import or ssr false worked for me.

import dynamic from "next/dynamic";

const NavigationFolder = dynamic(() => import("./TreeFolder"), {
    loading: () => <p>Loading...</p>,
});

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

[coolcorexix]

@shunjizhan actually I solve a problem of mine based on your reply. Thanks a lot!

[shunjizhan]

@shunjizhan actually I solve a problem of mine based on your reply. Thanks a lot!

do you mean @admondtamang 's reply haha? Thanks @admondtamang for the suggestion

[shunjizhan]

thanks for pointing this out! I am not super familiar with next.js, but in later versions will probably do some research on this.

At the same time please try fork it to accommodate next.js : )

[phatNfqAsia]

hello @shunjizhan, I will try to draft a PR when I have time. Just promise me you dont ignore it hehe

[shunjizhan]

@phatNfqAsia sure! Your contribution is very welcomed, I will definitely not ignore it if it works

[phatNfqAsia]

@shunjizhan oh if it done the job we can close it now, but I also recommend you convert your library to dumb components so that user can adapt it better to their usecases, currently the logic (check/uncheck, actions) is in one package and it's hard for user to customize.

[shunjizhan]

Hi @Djcarrillo6 ,

Thanks for confirming this method works, this is definitely very helpful for people experiencing similar issue : )

I should probably add this example in the doc in the next version