[SOLVED] Error: ReferenceError: window is not defined

Technical Issue Reporting
#1

I have issue with Error: ReferenceError: window is not defined as follows

image
image1061×744 26.6 KB

When I do yarn build and with typescript it not have window as global parameter, I think
when I do yarn dev it is working perfectly fine with the code.

#2

what type of project are you building?

#3

Nextjs with typescript

#4

What stack do you use?

#5

NextJs with typescript

#6

Try to add in your package.json:

"browser": {
    "moralis": false,
    "react-moralis": false,
}
1 Like
#7

Also you can try to use dynamic imports:

1 Like
#8

Now after put that on the package.json
now it

image
image875×764 35.4 KB

#9

Sdk currently is not really compatible with next.js
I suggest you to try dynamic imports.

import dynamic from "next/dynamic";

const Component = dynamic(
  () => {
    return import("../components/Component");
  },
  { ssr: false }
);

export default function Home() {
  return (
    <div>
      <Component />
    </div>
  );
}
#10

You need to import component which use Moralis dynamically.

We will add better compatibility soon :man_mechanic:

#11

and what about functions that uses Moralis and it not return as a component?

#12

I mean you need to import dynamically your components

#13

For example app.js:

const Component3 = dynamic(
  () => {
    return import("../components/Component");
  },
  { ssr: false }
);

<Component1 /> //no moralis functions inside
<Component2 /> //no moralis functions inside
<Component3 /> //has moralis functions inside
#14

Actually I change some part of the code and did not use dynamic import because I try and it have a lot of error in return so

I move the initial Moralis out to the root

import Moralis from "moralis";

async function InitializeMoralis() {
    await Moralis.initialize(process.env.NEXT_PUBLIC_APP_ID.toString());
    Moralis.serverURL = process.env.NEXT_PUBLIC_APP_SERVER.toString();
    return Moralis;
}
export default InitializeMoralis;

and Add to the index.tsx or anywhere that require connection because MoralisProvider is not working it has “then is not defined” issue as well
So after changing a lot of stuff it works :sweat_smile: :sweat_smile: :rofl: :rofl: :rofl:

2 Likes
#15

Nice, great job! :man_mechanic:

Thank you for sharing the solution :star_struck:

1 Like
#16

Can you please share how you did the import

#17 
import InitializeMoralis from 'moralist';

:point_up_2: file that has the code for initalizeMoralis from above :point_up_2:
and call :point_down:

 await InitializeMoralis().then(async (res:any)=>{ await getlogin()}).catch((er:any)=>{console.log(er);
    })
1 Like