ReactJS render issue? Facade\Ignition\Exceptions\ViewException

[jersrej]

Hi, This is my first time to write an issue, actually I'm not sure if this is an issue or my configuration is wrong.

I'm actually using Laravel + ReactJS

Here's my composer.json

"php": "^7.2.5",
"laravel/framework": "^7.0",
 "laravel/tinker": "^2.0",
"laravel/ui": "^2.0",
"spatie/laravel-server-side-rendering": "^1.4",

Followed everything on the example and when I tried to run npm run prod and run it on my localhost the error shows me

Facade\Ignition\Exceptions\ViewException
The command "node C:\xampp7.4.2\htdocs\polln\storage\app/ssr\29ef9693d18a4efde5e940aeab495f93.js" failed. Exit Code: 1(General error) Working directory: C:\xampp7.4.2\htdocs\polln\public Output: ================ Error Output: ================ C:\xampp7.4.2\htdocs\polln\storage\app\ssr\29ef9693d18a4efde5e940aeab495f93.js:4
 !function(e){function t(t){for(var r,i,o=t[0],a=t[1],u=0,c=[];u<o.length;u++)i=o[u],Object.prototype.hasOwnProperty.call(n,i)&&n[i]&&c.push(n[i][0]),n[i]=0;for(r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r]);for(s&&s(t);c.length;)c.shift()()}var r={},n={8:0};function i(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.e=function(e){var t=[],r=n[e];if(0!==r)if(r)t.push(r[2]);else{var o=new Promise((function(t,i){r=n[e]=[t,i]}));t.push(r[2]=o);var a,u=document.createElement("script");u.charset="utf-8",u.timeout=120,i.nc&&u.setAttribute("nonce",i.nc),u.src=function(e){return i.p+""+({}[e]||e)+".js"}(e);var s=new Error;a=function(t){u.onerror=u.onload=null,clearTimeout(c);var r=n[e];if(0!==r){if(r){var i=t&&("load"===t.type?"missing":t.type),o=t&&t.target&&t.target.src;s.message="Loading chunk "+e+" failed.\n("+i+": "+o+")",s.name="ChunkLoadErr

 ReferenceError: window is not defined
 at C:\xampp7.4.2\htdocs\polln\storage\app\ssr\29ef9693d18a4efde5e940aeab495f93.js:4:1923
 at Object.<anonymous> (C:\xampp7.4.2\htdocs\polln\storage\app\ssr\29ef9693d18a4efde5e940aeab495f93.js:4:2058)
 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)
 at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
 (View: C:\xampp7.4.2\htdocs\polln\resources\views\index.blade.php)

Here's my client.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import AppProvider from './ApolloProvider';

if (document.getElementById('app')) {
    ReactDOM.render(
        <AppProvider>
            <App />
        </AppProvider>,
        document.getElementById('app'),
    );
}

Here's my server.js

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';
import AppProvider from './ApolloProvider';

const html = ReactDOMServer.renderToString(
    <div id="app">
        <AppProvider>
            <App />
        </AppProvider>
    </div>,
);

dispatch(html);

My node version: 10.16.3

I'm kinda desperate because I need SSR for the SEO part. Much appreciate if anyone could help me out

Edit: My node js path is defined in Environment Variables

My .env

NODE_PATH=node

[AugmentBLU]

Having all sorts of issues as well. If it's a super simple setup like the examples it works, as soon as you try to recreate using a real world app, the render function simply does not work.

I have quite a complex app using Vue, Element UI and Laravel, all works as expected but I need to consider SSR for performance. When stripping my app right down to the absolute essentials, it still errors when attempting to load the page. All the JS files etc are compiled fine, it's the SSR rendering function that is broken.

Example of my simple app.js

import Vue from 'vue';
import App from './views/App.vue';
import ElementUI from 'element-ui';

Vue.use(ElementUI);

export default new Vue({
  render: h => h(App),
});

All sorts of JS anonymous function errors appear.

!function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=136)}([function(e,t, ReferenceError: document is not defined at Object.<anonymous> 

Facade\Ignition\Exceptions\ViewException

Symfony\Component\Process\Process::mustRun
vendor/symfony/process/Process.php:252

    public function mustRun(callable $callback = null, array $env = []): self

    {

        if (0 !== $this->run($callback, $env)) {

            throw new ProcessFailedException($this);

        }

        return $this;

    }

When I remove the Element UI import, it loads as expected. Again, seems like it can't cope with real world apps unless there's something I'm totally missing.

[reed-jones]

@jersrej Your error is due to referencing window somewhere in your JS app, This isn't available when server side rendering (since its on the server, there is no window). It might not be directly in your code either, but could be in a package you pulled in instead.

@AugmentBLU You are most likely hitting the same issue, that looks very similar to what I get if I reference window when server side rendering

[t08-apporio]

hi @jersrej @reed-jones. I am working on react + laravel too. Slightly confused. Locally this would work since node is present but in production it's not. So how is this package to be used??

[reed-jones]

I have node available in production, however if that's not the case for you, the underlying spatie/server-side-rendering can be configured to use the php extension V8.js as the engine and I imagine this package can be too. (I haven't verified that though)

[t08-apporio]

@reed-jones installing the v8.js extension was a pain so I went ahead with node. But I am receiving an error when loading the server rendered page. I came across a closed issue #23 which is exactly what I've run into. I went through it but couldnt find any fix.

[reed-jones]

are you sure there is a storage/app/ssr directory? I think you may need to create it manually

[jersrej]

We didn't push through this, we just use react-snap, we transferred from laravel-mix to create-react-app instead. I think the issue is still ongoing for some users

[t08-apporio]

@reed-jones yes the directories have been created but it's empty. It seems when the file is trying to be written to storage/app/ssr, it fails. The error message: Facade\Ignition\Exceptions\ViewException The command "/home/t08/.nvm/versions/node/v13.12.0/bin/node /var/www/html/react-pshi/storage/app/ssr/00d9dd0ade2fc3ee98fc159ad9f3d12d.js" failed. Exit Code: 1(General error) Working directory: /var/www/html/react-pshi/public Output: ================ Error Output: ================ /var/www/html/react-pshi/storage/app/ssr/00d9dd0ade2fc3ee98fc159ad9f3d12d.js:20255 return window && document && document.all && !window.atob; ^ ReferenceError: window is not defined at /var/www/html/react-pshi/storage/app/ssr/00d9dd0ade2fc3ee98fc159ad9f3d12d.js:20255:2

[t08-apporio]

@reed-jones the error was due to a component in the server script which was making a call to the browser document api. Removed it and its working now

[spatie-bot]

Dear contributor,

because this issue seems to be inactive for quite some time now, I've automatically closed it. If you feel this issue deserves some attention from my human colleagues feel free to reopen it.