Window is not defined reference error on page refresh

[davinpalmtreenft]

I am running this package in a nextjs react app.

When I refresh the page that solidityCompiler is loaded on I receive the following error:

index.js?46cb:334 Uncaught ReferenceError: window is not defined
    at Object.<anonymous> (file://C:\cmder\code\frontend-pnt-naas\node_modules\@agnostico\browser-solidity-compiler\dist\browser.solidity.worker.js:28:1)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (file://C:\cmder\code\frontend-pnt-naas\node_modules\@agnostico\browser-solidity-compiler\dist\index.js:40:33)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)

I have tried wrapping the function that calls it with if (typeof window !== "undefined) as suggested here: https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97 however the error persisted.

I also tried running my function inside of useEffect hook which is supposed to guarantee client side code running and then I receive this error:

Uncaught ReferenceError: Worker is not defined
    at Object.<anonymous> (file://C:\cmder\code\frontend-pnt-naas\node_modules\@agnostico\browser-solidity-compiler\dist\index.js:42:14)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.@agnostico/browser-solidity-compiler (file://C:\cmder\code\frontend-pnt-naas\.next\server\pages\dashboard\project-controls\[id]\[menuItem].js:637:18)
    at __webpack_require__ (file://C:\cmder\code\frontend-pnt-naas\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/web3/Compiler.tsx:5:94)

Steps to reproduce would be to run solidityCompiler within a nextjs app. I know next does a lot with server side rendering etc so this may be the cause of the issue.

[davinpalmtreenft]

So I just created a clean react app with create-react-app and the error did not occur so it is definitely isolated to my app and most likely a result of how nextjs renders the page. I am going to try a clean nextjs app next to see if the error persists there as well.

[davinpalmtreenft]

Ok and on a clean create-next-app I was able to confirm that the error persists. Would you consider adding support for nextjs?

[davinpalmtreenft]

I have resolved the issue by dynamically loading the component that utilizes browser-solidity-compiler

import dynamic from 'next/dynamic';

const Compiler = dynamic(
  import('@/web3/Compiler').then((lib) => lib.default),
  { ssr: false }
);

For reference: https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97 (nextjs solutions for window not defined reference error) https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr (nextjs docs) https://github.com/vercel/next.js/issues/4515 (discussion as it relates to typescript)

[rexdavinci]

That works, disabling SSR solves the issue.