Laravel SSR: ReferenceError: window is not defined

[skfahad]

I am trying to implement Server Side Rendering (SSR) in my Laravel React app but stuck at following error.

The command "node /var/www/html/project/storage/app/ssr/8dd09f6fe4766c697e76479c162340d8.js" failed. Exit Code: 1(General error) Working directory: /var/www/html/project/public Output: ================ Error Output: ================ /var/www/html/project/storage/app/ssr/8dd09f6fe4766c697e76479c162340d8.js:4 (()=>{var e={5318:e=>{e.exports=function(e){return e&&e.__esModule?e:{default:e}},e.exports.default=e.exports,e.exports.__esModule=!0},862:(e,t,r)=>{var n=r(8).default;function i(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(i=function(e){return e?r:t})(e)}e.exports=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!==n(e)&&"function"!=typeof e)return{default:e};var r=i(t);if(r&&r.has(e))return r.get(e);var o={},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var s in e)if("default"!==s&&Object.prototype.hasOwnProperty.call(e,s)){var l=a?Object.getOwnPropertyDescriptor(e,s):null;l&&(l.get||l.set)?Object.defineProperty(o,s,l):o[s]=e[s]}return o.default=e,r&&r.set(e,o),o},e.exports.default=e.exports,e.exports.__esModule=!0},8:e=>{function t(r){return"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?(e.exports=t=function(e){return typeof e},e.exports. ReferenceError: window is not defined at /var/www/html/project/storage/app/ssr/8dd09f6fe4766c697e76479c162340d8.js:4:1021194 at /var/www/html/project/storage/app/ssr/8dd09f6fe4766c697e76479c162340d8.js:4:1566017 at Object. (/var/www/html/project/storage/app/ssr/8dd09f6fe4766c697e76479c162340d8.js:4:1566021) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12) at startup (internal/bootstrap/node.js:283:19) (View: /var/www/html/project/resources/views/index.blade.php)

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .react()
    .js('resources/js/components/main-server.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

index.blade.php

<div id="root">
    {!! ssr('js/main-server.js')->render()!!}
</div>

ssr.php (SSR config file)

<?php

return [
    /*
     * Enable or disable the server renderer. Enabled in production by default.
     */
    'enabled' => env('APP_ENV') === 'production',

    /*
     * When server side rendering goes wrong, nothing will be rendered so the
     * client script can render everything from scratch without errors. If
     * `debug` is enabled, an exception will be thrown when the JavaScript can't
     * be executed.
     */
    'debug' => env('APP_DEBUG', true),

    /*
     * Set to true if you're using Laravel Mix, then you can pass a script
     * identifier to `ssr` instead of a full path.
     */
    'mix' => true,

    /*
     * The engine class is used to execute JavaScript. Node requires you to set
     * up some extra configuration below. If you want to use the V8 engine, make
     * sure the v8js php extension is available.
     */
    'engine' => env('SSR_ENGINE', \Spatie\Ssr\Engines\Node::class),

    /*
     * Extra setup for the Node engine.
     */
    'node' => [
        'node_path' => env('NODE_PATH', '/usr/local/bin/node'),
        'temp_path' => env('SSR_TEMP_PATH', storage_path('app/ssr')),
    ],

    /*
     * Context is used to pass data to the server script. Fill this array with
     * data you *always* want to send to the server script. Context can contain
     * anything that's json serializable.
     */
    'context' => [],

    /*
     * Env is used to fill `process.env` when the server script is executed.
     * Fill this array with data you *always* want to send to the server script.
     * The env array is only allowed to be a single level deep, and can only
     * contain primitive values like numbers, strings or booleans.
     *
     * By default, env is prefilled with some necessary values for server side
     * rendering Vue applications.
     */
    'env' => [
        'NODE_ENV' => 'production',
        'VUE_ENV' => 'server',
    ],
];