Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

error laravel ssr using node #23

Closed
SeanConnell93 opened this issue Jul 24, 2018 · 14 comments

Comments

@SeanConnell93
Copy link

@SeanConnell93 SeanConnell93 commented Jul 24, 2018

The command "/c/Program Files/nodejs/node C:\xampp\htdocs\Agrirecruit_Laravel\storage\app/ssr\c244232e15965255150ad76e7d13d123.js" failed. Exit Code: 1(General error) Working directory: C:\xampp\htdocs\Agrirecruit_Laravel\public Output

Note: the c244232e15965255150ad76e7d13d123.js never gets written to the storage/app/ssr folder

I've been stuck on the same error as this #13 for the past few days and can't figure it out.
Note: I'm using windows 10

I ran which node to get node path
I've set the NODE_PATH="/c/Program Files/nodejs/node"

APP_ENV=production

Here's my files.

package.json

"dependencies": { "vee-validate": "^2.0.9", "vue": "^2.5.7", "vue-head": "^2.0.12", "vue-router": "^3.0.1", "vue-server-renderer": "^2.5.16", "vue-the-mask": "^0.11.1", "vue-wysiwyg": "^1.7.2", "vue2-editor": "^2.5.0", "vuex": "^3.0.1" }

mix

mix.js('resources/assets/js/app-client.js', 'public/js') .js('resources/assets/js/app-server.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css') .sourceMaps().version();

Blade

<script type="text/javascript" defer src="{{ mix('js/app-client.js') }}"></script>

<main class="container-fuild" id="app"> {!! ssr("js/app-server.js")->render() !!} </main>

The I didn't change anything in the ssr.php

return [

'enabled' => env('APP_ENV') === 'production',

'debug' => env('APP_DEBUG', false),

'mix' => true,

'engine' => \Spatie\Ssr\Engines\Node::class,

'node' => [
    'node_path' => env('NODE_PATH', '/usr/local/bin/node'),
    'temp_path' => storage_path('app/ssr'),
],

'context' => [],

'env' => [
    'NODE_ENV' => 'production',
    'VUE_ENV' => 'server',
],

];

Client.js

import app from './app'; app.$mount('#app');

Server.js

import app from './app'; import renderVueComponentToString from 'vue-server-renderer/basic'; renderVueComponentToString(app, (err, res) => { if (err) { throw new Error(err); } dispatch(res); });

@josteph

This comment has been minimized.

Copy link

@josteph josteph commented Jul 24, 2018

I've experienced your issue above, so I made a change in config/ssr.php file:

'enabled' => true,
'debug' => true,

Removed all the env checking to make them absolute true solved the problem for me.

Also you definitely should check this example repo provided by spatie.

The only thing I couldn't get it working that is {!! ssr('js/app-server.js')->fallback('<div id="app"></div>')->render() !!} is always going to the fallback. Means that the ssr('js/app-server.js') alone returns empty string or the ssr engine is failing.

Still stuck to this issue for days. Probably it's a problem from the webpack or the way I import components.

I notice that there this section of code:

/******/ (function(modules) { // webpackBootstrap
/******/ 	// install a JSONP callback for chunk loading
/******/ 	var parentJsonpFunction = window["webpackJsonp"];
/******/ 	window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
/******/ 		// add "moreModules" to the modules object,
/******/ 		// then flag all "chunkIds" as loaded and fire callback
/******/ 		var moduleId, chunkId, i = 0, resolves = [], result;
/******/ 		for(;i < chunkIds.length; i++) {
/******/ 			chunkId = chunkIds[i];
/******/ 			if(installedChunks[chunkId]) {
/******/ 				resolves.push(installedChunks[chunkId][0]);
/******/ 			}
/******/ 			installedChunks[chunkId] = 0;
/******/ 		}
/******/ 		for(moduleId in moreModules) {
/******/ 			if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/ 				modules[moduleId] = moreModules[moduleId];
/******/ 			}
/******/ 		}
/******/ 		if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);
/******/ 		while(resolves.length) {
/******/ 			resolves.shift()();
/******/ 		}
/******/
/******/ 	};

In both app-client.js and app-server.js while when I run in the example repo provided, I couldn't get that kind of code at the beginning of those 2 files. Not sure if this is related to not being able to render ssr('js/app-server.js') at all.

Any help would be appreciated too.

@SeanConnell93

This comment has been minimized.

Copy link
Author

@SeanConnell93 SeanConnell93 commented Jul 25, 2018

@josteph I made them changes to the config/ssr.php but no luck ☹️ thanks anyway.

I had a look at the example repo but when I run yarn production it just runs and closes but doesn't open in the browser or show any port number.

@josteph

This comment has been minimized.

Copy link

@josteph josteph commented Jul 25, 2018

@SeanConnell93 Hmm I didn't use yarn command to reproduce the repo. Just those 3 steps:

1. git clone https://github.com/spatie/laravel-server-side-rendering-examples.git
2. composer install
3. npm install

And yeah that's right, the repo was able to do ssr nicely. There are several problems to be addressed:

  1. You can't use inline styling in a .vue component (I've tried to reproduce this, see #6 ), like:
<template>
<div class="wrapper">
    <h1>Hello World</h1>
</div>
</template>

<style>
h1 {
    font-family: Helvetica;
}
</style>

It will throw an error because of either style-loader not optimized for isomorphic app. I still have no idea to resolve this.

  1. NEVER PUT window & document code in your components or any js files (I'm pretty sure you already know, this is the main reason why it prints out window or document is not defined).

Seriously I need more guidance to integrate SSR with this package. This package does a good job already, just those 2 points above need solution.

@devsrv

This comment has been minimized.

Copy link

@devsrv devsrv commented Aug 29, 2018

If you are in a windows system set node path in your environment variable then use
NODE_PATH=node
APP_ENV=production

hope this - https://youtu.be/uO42Kpa4pvI will help

@josteph

This comment has been minimized.

Copy link

@josteph josteph commented Aug 31, 2018

@devsrv Yeah I was able to get the SSR in action weeks ago, thanks

@YuriiPlohov

This comment has been minimized.

Copy link

@YuriiPlohov YuriiPlohov commented Oct 8, 2018

This is still relevant. I did everything like a video, but I also have this error on my project and on example too.

I set in .env:
NODE_PATH=node
APP_ENV=production

Tell me please what can I do. Thank in advance

@josteph

This comment has been minimized.

Copy link

@josteph josteph commented Oct 9, 2018

@YuriiPlohov What error did you get?

Set debug to true in config/ssr.php and paste your error here.

Note: Assuming you're on Linux environment:
NODE_PATH = /usr/local/bin/node

@YuriiPlohov

This comment has been minimized.

Copy link

@YuriiPlohov YuriiPlohov commented Oct 9, 2018

I have this error:

The command "node W:\OSPanel\domains\react.local\storage\app/ssr\da43e53383efdb58ab8852e6eefaeab9.js" failed. Exit Code: 1(General error) Working directory: W:\OSPanel\domains\react.local\public Output: ================ Error Output: ================ "node" �� ���� ����७��� ��� ���譥� ��������, �ᯮ��塞�� �ணࠬ��� ��� ������ 䠩���. (View: W:\OSPanel\domains\react.local\resources\views\welcome.blade.php)

My node.js is work. I check in command prompt whether the command node -v works. Yes.It is work. But js files are not created in the folder storage/app/ssr.

I am on Windows 10

@jonathantyar

This comment has been minimized.

Copy link

@jonathantyar jonathantyar commented Nov 15, 2018

@SeanConnell93 Hmm I didn't use yarn command to reproduce the repo. Just those 3 steps:

1. git clone https://github.com/spatie/laravel-server-side-rendering-examples.git
2. composer install
3. npm install

And yeah that's right, the repo was able to do ssr nicely. There are several problems to be addressed:

1. You can't use inline styling in a .vue component (I've tried to reproduce this, see #6 ), like:
<template>
<div class="wrapper">
    <h1>Hello World</h1>
</div>
</template>

<style>
h1 {
    font-family: Helvetica;
}
</style>

It will throw an error because of either style-loader not optimized for isomorphic app. I still have no idea to resolve this.

1. **NEVER PUT** `window` & `document` code in your components or any js files (I'm pretty sure you already know, this is the main reason why it prints out `window` or `document` is not defined).

Seriously I need more guidance to integrate SSR with this package. This package does a good job already, just those 2 points above need solution.

have any solution for point 2?

@josteph

This comment has been minimized.

Copy link

@josteph josteph commented Nov 16, 2018

@jonathantyar There won't be one, SSR takes place in server side not client. Therefore window or document will be undefined.

@novayadi85

This comment has been minimized.

Copy link

@novayadi85 novayadi85 commented Feb 22, 2019

I fixed on my Linux OS like this 👍

NODE_PATH=node
APP_ENV=production
And the Last : Run npm run production (if use NPM)

And Got Luck 💃

@fannyfan414

This comment has been minimized.

Copy link

@fannyfan414 fannyfan414 commented May 31, 2019

I've experienced your issue above, so I made a change in config/ssr.php file:

'enabled' => true,
'debug' => true,

Removed all the env checking to make them absolute true solved the problem for me.

Also you definitely should check this example repo provided by spatie.

The only thing I couldn't get it working that is {!! ssr('js/app-server.js')->fallback('<div id="app"></div>')->render() !!} is always going to the fallback. Means that the ssr('js/app-server.js') alone returns empty string or the ssr engine is failing.

Still stuck to this issue for days. Probably it's a problem from the webpack or the way I import components.

I notice that there this section of code:

/******/ (function(modules) { // webpackBootstrap
/******/ 	// install a JSONP callback for chunk loading
/******/ 	var parentJsonpFunction = window["webpackJsonp"];
/******/ 	window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
/******/ 		// add "moreModules" to the modules object,
/******/ 		// then flag all "chunkIds" as loaded and fire callback
/******/ 		var moduleId, chunkId, i = 0, resolves = [], result;
/******/ 		for(;i < chunkIds.length; i++) {
/******/ 			chunkId = chunkIds[i];
/******/ 			if(installedChunks[chunkId]) {
/******/ 				resolves.push(installedChunks[chunkId][0]);
/******/ 			}
/******/ 			installedChunks[chunkId] = 0;
/******/ 		}
/******/ 		for(moduleId in moreModules) {
/******/ 			if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/ 				modules[moduleId] = moreModules[moduleId];
/******/ 			}
/******/ 		}
/******/ 		if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);
/******/ 		while(resolves.length) {
/******/ 			resolves.shift()();
/******/ 		}
/******/
/******/ 	};

In both app-client.js and app-server.js while when I run in the example repo provided, I couldn't get that kind of code at the beginning of those 2 files. Not sure if this is related to not being able to render ssr('js/app-server.js') at all.

Any help would be appreciated too.

how did you solve issue? I also have this section of code

@spatie-bot

This comment has been minimized.

Copy link

@spatie-bot spatie-bot commented Oct 1, 2019

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.

@spatie-bot spatie-bot closed this Oct 1, 2019
@sentiasa

This comment has been minimized.

Copy link

@sentiasa sentiasa commented Oct 9, 2019

It will throw an error because of either style-loader not optimized for isomorphic app. I still have no idea to resolve this.

  1. NEVER PUT window & document code in your components or any js files (I'm pretty sure you already know, this is the main reason why it prints out window or document is not defined).

Seriously I need more guidance to integrate SSR with this package. This package does a good job already, just those 2 points above need solution.

@josteph did you find a solution for this? I have stumbled to isomorphic-style-loader but have no clue how to replace current style-loader in laravel-mix.

https://stackoverflow.com/questions/58296413/laravel-mix-window-is-not-defined-with-style-loader-in-target-node

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants
You can’t perform that action at this time.