self.fetch error build in Nextjs 13

[wolanx]

Node.js v20.10.0
   Collecting page data  ...Z:\xxx\node_modules\@melloware\react-logviewer\dist\cjs\index.js:9686
const fetcher$1 = Promise.resolve().then(() => self.fetch);
                                                    ^

ReferenceError: self is not defined
    at Z:\wolanx\touch-torch-mesh\tt-gui\node_modules\@melloware\react-logviewer\dist\cjs\index.js:9686:53

It looks like a grammatical error, but where did it come from?

[melloware]

Yeah your error is coming from right here: https://github.com/melloware/react-logviewer/blob/main/src/components/Utils/request.ts#L5

Maybe it has to do with Next and SSR and this is a client side only function? Because fetch is client side only its possible you are trying to use it an SSR server side component.

[crypto-matto]

I'm experiencing the same issue & I'm using Next.

unhandledRejection: Error [ReferenceError]: self is not defined
    at /node_modules/.pnpm/@melloware+react-logviewer@5.0.5_react-dom@18.2.0_react@18.2.0/node_modules/@melloware/react-logviewer/dist/cjs/index.js:9686:53
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  digest: undefined
}

Does that mean this plugin is not usable if I'm using Next ?

[melloware]

No i think you just have to make the class with "use client" to tell Next this is a client side component not a server side component.

[melloware]

@crypto-matto @wolanx see this: https://stackoverflow.com/questions/66096260/why-am-i-getting-referenceerror-self-is-not-defined-when-i-import-a-client-side

[melloware]

I just deployed 5.0.6 to npm can you both give it a try. I changed self to globalThis which is supposed to alleviate Next.js SSR issues. Let me know how it goes!

[crypto-matto]

Thanks a lot with the quick action @melloware! Using 5.0.6 & I'm now able to use this plugin on Next properly now 👍🏻

[melloware]

@crypto-matto Thanks for reporting and testing!!!