ReferenceError: self is not defined in Nextjs
theZulqarnain opened this issue · comments
Abdulla zulqarnain commented
I'm using filemanger
in my Nextjs apps.it showing me ReferenceError: self is not defined. even though I disabled SSR on that page but still same error.
import React, { useEffect, useState } from 'react';
import dynamic from "next/dynamic";
import { FileManager, FileNavigator } from '@opuscapita/react-filemanager';
import connectorNodeV1 from '@opuscapita/react-filemanager-connector-node-v1';
import Layout from '../components/base/Layout';
import BannerComponent from '../components/utilities/BannerComponent';
import BreadCrumComponent from '../components/utilities/BreadCrumComponent';
const apiOptions = {
...connectorNodeV1.apiOptions,
apiRoot: `http://opuscapita-filemanager-demo-master.azurewebsites.net/` // Or you local Server Node V1 installation.
}
const fileManagement = () =>{
const [showFileManager,setShowFileManager] = useState(false);
useEffect(() => {
if(!showFileManager){
setShowFileManager(true)
}
}, [showFileManager]);
const breadcrumbs = ['Workspace','Transformation Scoping'];
const fileManagerGen = () => {
return (
<div style={{ height: '480px' }}>
<FileManager>
<FileNavigator
id="filemanager-1"
api={connectorNodeV1.api}
apiOptions={apiOptions}
capabilities={connectorNodeV1.capabilities}
listViewLayout={connectorNodeV1.listViewLayout}
viewLayoutOptions={connectorNodeV1.viewLayoutOptions}
/>
</FileManager>
</div>
);
}
return(
<Layout
title="Qatalyst | DTMP"
description="Digital Transformation Management Platform"
>
<div className="flex flex-col pt-3">
<div className="flex">
<BannerComponent
Height= "h-24"
Title="TRANSFORMATION CONTEXT"
SubHeadings={['Captures the context of the transformtion initiative manged on Qatalyst']}
/>
</div>
</div>
<div className="flex flex-row w-full py-4">
<BreadCrumComponent
Breadcrumbs={breadcrumbs}
/>
</div>
{showFileManager && fileManagerGen()}
</Layout>
)
}
export default dynamic(() => Promise.resolve(fileManagement), {
ssr: false
})
Here the error.
Server Error
ReferenceError: self is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (442:30)
<unknown>
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (437:47)
module.exports
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (459:68)
Object.<anonymous>
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (25678:36)
__webpack_require__
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (30:30)
Object.<anonymous>
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (9485:1)
__webpack_require__
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (30:30)
Object.<anonymous>
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (10427:19)
__webpack_require__
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (30:30)
Object.<anonymous>
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (8319:18)
I have seen same closed issue that resolved it by loading on clientside.
Abdulla zulqarnain commented
created separate component and imported on client side