ReactJS render issue? Facade\Ignition\Exceptions\ViewException about laravel-server-side-rendering

[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

[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

[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.