ReferenceError: self is not defined

[maxfouquet]

Hi,

I've the following stacktrace using lazylog component with Next.js and TypeScript support :

self is not defined
ReferenceError: self is not defined
    at Object.<anonymous> (D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:31979)
    at t (D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:415)
    at Object.<anonymous> (D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:47729)
    at t (D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:415)
    at Object.<anonymous> (D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:47638)
    at t (D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:415)
    at D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:777
    at D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:787
    at D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:143
    at Object.<anonymous> (D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:262)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)

Reproduced with:

• v3.0.0
• v4.0.0
• v4.2.0

React component:

import * as React from 'react'
import * as LazyLog from 'react-lazylog'

interface Props {}
interface State {}

export default class sqlmap extends React.Component<Props, State> {
  state: State = { }
  render() {
    return (<LazyLog url="http://localhost:5000/sqlmap.log" />)
  }
}

Any idea ?

[d1y]

I also encountered this problem, very strange

[digvan]

same here

[helfi92]

Interesting. Is it possible that self is not defined in Typescript?

[sourcec0de]

In case anyone comes across this again. If you're trying to use this with an SSR tool like nextjs this component must be rendered client-side.

I solved this by using dynamic imports.

[shmidt-i]

Solved via React.lazy, but if somebody can look into it, would be cool! Env: Typescript + react-scripts (create-react-app)

const LazyLog = React.lazy(() => import('react-lazylog'));
...
<Suspense fallback="...">
  <div style={{ height: '200px', width: '100%' }}>
    <LazyLog text="this works" extraLines={1} enableSearch />
  </div>
</Suspense>

[drumfreak]

For NextJS with React < 18 I used this and it worked great:

import dynamic from 'next/dynamic';
import { Suspense } from 'react';

const LazyLog = dynamic(() => import('react-lazylog').then((mod) => mod.LazyLog), {
  ssr: false,
});

Then use the component as normal:

<div className='col-12' style={{ height: '80vh' }}>
     <Suspense fallback={<div>Loading...</div>}>
        <LazyLog text={rawLogsRef.current ? rawLogsRef.current : '\r'} extraLines={1} enableSearch={true} caseInsensitive={true} />
     </Suspense>
 </div>

I hope that helps!

[melloware]

This is fixed in my released fork to work in SSR libs like Next See: https://github.com/melloware/react-logviewer/issues/28