ksta
Bonjour,
Suite à un upgrade de version de mon repo package.json pour pouvoir utiliser stylus-loader je rencontre un petit problème lors de l'execution js côté serveur pour le SSR avec la librairie PHPV8Js.
Lorsque je regarde le code transpiler par webpack je remarque qu'il est différent de celui d'avant et m'affiche donc l'erreur "Window is not defined" côté serveur.
Je sais que c'est tous à fait normale que lorsque l'on execute côté serveur le code il ne peut pas connaître "window, document, etc..." car il sont dans le navigateur client j'ai donc ajouté juste avant l'execution le code ci-dessous pour instancier window en objet vide
public function render($path, $ssrData): array
{
$v8 = new \V8Js('PHP', $ssrData);
try {
ob_start();
$ssrDataStr = $this->serializeToJson($ssrData);
$js = "
var process = { env: { VUE_ENV: 'server', NODE_ENV: 'developement' } };
this.global = { process: process, window: {} };
let url = '$path';
let PHP = $ssrDataStr;
";
$v8->executeString($js);
$v8->executeString($this->renderSource);
$v8->executeString($this->appSource);
$result = ob_get_clean();
} catch (\Exception $e) {
$result = $e->getMessage();
}
return ['ssr' => $result];
}Suite à plusieurs heures de recherche se weekend je n'est pas réussi à le faire fonctionné après la mise à jour et les fix proposer sur différent site.
voici les fix proposer :
output.globalObject: "(typeof self !== 'undefined' ? self : this)"
OU
output.globalObject: "this"
OU
output.globalObject: "self"
OU
output.target: "umd"
output.globalObject: "global"Ce que je faisais avant
.babelrc
{
presets: [
['env', {
modules: false,
targets: {
browsers: '> 1%',
uglify: true
},
useBuiltIns: true
}],
[ "es2015", "stage-0" ]
],
"plugins": ["transform-object-rest-spread"]
}package.json
{
"devDependencies": {
"@symfony/webpack-encore": "^0.19.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"vue": "^2.5.17",
"vue-devtools": "^4.1.4",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.5.17"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev-server-hot": "encore dev-server --host shopify.test --disable-host-check --hot",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production"
},
"dependencies": {
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"es6-promise": "^4.2.5",
"lodash": "^4.17.11",
"shopify-buy": "^1.8.0",
"uglifyjs-webpack-plugin": "^1.3.0",
"util": "^0.11.0",
"vue-axios": "^2.1.3",
"vue-no-ssr": "^0.2.2",
"vue-router": "^3.0.1",
"vue-server-renderer": "^2.5.17",
"vuex": "^3.0.1",
"vuex-router-sync": "^5.0.0",
"web-storage-es6": "^1.0.8"
}
}webpack.config.js
const { VueLoaderPlugin } = require('vue-loader');
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('entry-client', './assets/js/entry-client.js')
.addEntry('entry-server', './assets/js/entry-server.js')
.addEntry('polyfill', 'babel-polyfill')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.addPlugin(new VueLoaderPlugin())
.enableVueLoader(function(options) {
options.productionMode = Encore.isProduction();
options.loaders = {
js: { loader: 'babel-loader', options: { presets: ['env'] } }
};
})
.enableVersioning(Encore.isProduction())
;
var configEncore = Encore.getWebpackConfig()
if (Encore.isProduction()) {
config.plugins = config.plugins.filter(
plugin => !(plugin instanceof webpack.optimize.UglifyJsPlugin)
);
config.plugins.push(new UglifyJsPlugin());
}
configEncore.watchOptions = { poll: true, ignored: /node_modules/ };
module.exports = configEncore;
Ce que je fais maintenant
.babelrc
{
presets: [
[
"@babel/preset-env",
{
useBuiltIns: "entry",
corejs: 3,
modules: false,
targets: {
browsers: '> 1%',
},
forceAllTransforms: true
}
]
],
"plugins": ["@babel/plugin-proposal-object-rest-spread"]
}package.json
{
"devDependencies": {
"@symfony/webpack-encore": "^0.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue": "^2.5.17",
"vue-devtools": "^4.1.4",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.5.17"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev-server-hot": "encore dev-server --host shopify.test --disable-host-check --hot",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production"
},
"dependencies": {
"@babel/polyfill": "^7.4.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"es6-promise": "^4.2.5",
"lodash": "^4.17.11",
"shopify-buy": "^1.8.0",
"uglifyjs-webpack-plugin": "^1.3.0",
"util": "^0.11.0",
"vue-axios": "^2.1.3",
"vue-no-ssr": "^0.2.2",
"vue-router": "^3.0.1",
"vue-server-renderer": "^2.5.17",
"vuetify": "^1.5.8",
"vuex": "^3.0.1",
"vuex-router-sync": "^5.0.0",
"web-storage-es6": "^1.0.8"
}
}webpack.config.js
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('entry-client', './assets/js/entry-client.js')
.addEntry('entry-server', './assets/js/entry-server.js')
.addEntry('polyfill', 'babel-polyfill')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.enableVueLoader(function(options) {
options.productionMode = Encore.isProduction();
})
.enableVersioning(Encore.isProduction())
.enableStylusLoader()
.addEntry('style', './assets/stylus/main.styl')
.enableSingleRuntimeChunk()
;
var configEncore = Encore.getWebpackConfig()
configEncore.output.chunkFilename = '[name].js'
if (Encore.isProduction()) {
config.plugins = config.plugins.filter(
plugin => !(plugin instanceof webpack.optimize.UglifyJsPlugin)
);
config.plugins.push(new UglifyJsPlugin());
}
configEncore.watchOptions = { poll: true, ignored: /node_modules/ };
module.exports = configEncore;Ce que je veux
J'aimerais pouvoir utiliser le ssr comme avant sans cette erreur pour pouvoir continuer.
Ce que j'obtiens
Erreur
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["entry-server"],{
// ^
// |----------- ReferenceError: window is not defined
/***/ "./assets/fashe/images/blog-02.jpg":
/*!*****************************************!*\
!*** ./assets/fashe/images/blog-02.jpg ***!
\*****************************************/
/*! no static exports found */
/***/ (function(module, exports) {
etc...Ancien fichié transpiler
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
etc...
Si quelqu'un peut me débloquer suite à une erreur similaire ou autre car je suis vraiment bloquer après tout un weekend dessus se serais cool.
Merci,