V8Js::compileString():9272: ReferenceError: window is not defined

Question

    <?php

    namespace App\Http\Controllers\Auth;

    use Illuminate\Support\Str;
    use Illuminate\Support\Facades\DB;
    use Illuminate\Http\Request;
    use App\Http\Controllers\Controller;
    use App\Model\User;
    use Illuminate\Support\Facades\Auth;
    use Socialize;
    use Redirect;
    use Input;
    use Mail;
    use App\Mail\verifyEmail;
    use Carbon\Carbon;
    use Illuminate\Support\Facades\Storage;
    use Illuminate\Support\Facades\File;

    class CustomAuthController extends Controller
    {
    // Register form

    private function render() {
        $renderer_source = File::get(base_path('node_modules/vue-server-renderer/basic.js'));
        $app_source = File::get(public_path('js/entry-server.js'));
        $v8 = new \V8Js();
        ob_start();
        $v8->executeString('var process = { env: { VUE_ENV: "server", NODE_ENV: "production" }}; this.global = { process: process };');
        $v8->executeString($renderer_source);
        $v8->executeString($app_source);
        return ob_get_clean();
      }
      public function get() {
        $ssr = $this->render();
        return view('app', ['ssr' => $ssr]);
      }
}

I followed https://dzone.com/articles/server-side-rendering-with-laravel-amp-vuejs-25 and installed v8js.But error is $v8->executeString($app_source); make an error that "V8Js::compileString():9272: ReferenceError: window is not defined"

How to fix this bug.i have no idea

=================================================

Update I can run it.i change code in app.js by delete

/** after i delete it.i can run with server side rendering
  require('./bootstrap');
  require('./bulma-carousel.min')
  window.Vue = require('vue');
  can you tell me why ?*/



  import App from './components/App.vue';
  import VeeValidate from 'vee-validate';
  import Vue from 'vue';
  import router from './router'

  Vue.use(VeeValidate);
  /**
   * Next, we will create a fresh Vue application instance and attach it to
   * the page. Then, you may begin adding components to this application
   * or customize the JavaScript scaffolding to fit your unique needs.
   */

  Vue.component('index-component', require('./components/index.vue'));

  export function createApp() {
      return new Vue({
        render: h => h(App)
      });
  }

Could you post your app.js and entry files for server and client? — J. Arbet, Jun 24 '18 at 07:33
Now,i can run with server side rendering.but problem is delete require (bootstrap.js,bulma-carousel.min) you can see code in post.i updated — Best Best, Jun 24 '18 at 08:30

score 4 · Answer 1 · answered Jun 24 '18 at 10:15

The problem is simple. The bootstrap file you are requesting is probably using window element in it somewhere. Also on this line window.Vue = require('vue'); you are using the window global object. Window as a global object is available in the browser, however javascript run on the server doesn't have the window object. Thus the error. This is the reason we need to make separate javascript files for server and the client. Try to consult with packages you implement on their support for server-side rendering.

Try disabling various imports one by one and find the ones which break your support for SSR and fix those or find alternatives.

You can also flag the answer as the correct one, if you want to :D — J. Arbet, Jun 24 '18 at 12:25

V8Js::compileString():9272: ReferenceError: window is not defined

1 Answers1