ReactJs lazy when trying to use lazy loading, getting 'window; is not defined error

Question

import React, { Component, lazy, Suspense } from 'react';

// import MyComp from './Components/myComp';
const MyComp = lazy(() => import('./components/myComp'));

500 Internal Server Error Error while loading "~/Content/Scripts/dist/server.js": ReferenceError: 'window' is not defined at Anonymous function (server.js:1:1832) -> …o.p="",o.oe=function(e){throw console.error(e),e};var a=window.webpackJsonp=window.webpackJsonp||[],… at Global code (server.js:1:1)

Answer 1

You have to use loadable https://github.com/gregberge/loadable-components instead of React.lazy. React.lazy doesn't work when you have server side rendering.

import loadable from '@loadable/component'
// This dynamic import will not be processed server-side
const Other = loadable(() => import('./Other'), { ssr: false })