CODEWITHSUNDEEP
jquerysymfonyvue.jsv8js
Pixel online
Pixel online

Reputation: 73

VueJS SSR V8JS Symfonybug Jquery

I have install VueJS / Symfony and V8JS for SSR (SEO frendly) Install V8JS it's ok but i have a conflit with Jquery

V8Js::compileString():2246: TypeError: Cannot read property 'jquery' of undefined

I leave you some of the important code. I use Jquery and axios for some things.

But I can not seem to worry that much with Jquery. I think I need to add a configuration to avoid conflict with Jquery but impossible to know what to put

If anyone had the solution to my problem that would be great

EDIT CODE : 06-03-19

*WebPack Config JS (configuration Webpack JS Encore)

let Encore = require('@symfony/webpack-encore');
 Encore
 // the project directory where compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
// uncomment to create hashed filenames (e.g. app.abc123.css)
// .enableVersioning(Encore.isProduction())

// uncomment to define the assets of the project
.addEntry('entry-client', './assets/js/entry-client.js')
.addEntry('entry-server', './assets/js/entry-server.js')
.addEntry('js/app', './assets/js/app.js')
.addEntry('css/app', './assets/css/app.scss')
// uncomment if you use Sass/SCSS files
.enableSassLoader()
// uncomment for legacy applications that require $/jQuery as a global variable
//.autoProvidejQuery()

// Enable Vue Loader
.enableVueLoader();

module.exports = Encore.getWebpackConfig();

app.js (App.js)

// require jQuery normally
const $ = require('jquery');
require('bootstrap');

global.axios = require('axios');

require('../css/app.css');
require('bootstrap-sass');


import Vue from 'vue';

import Motdepasse from './components/Motdepasse'

/**
 * Create a fresh Vue Application instance
*/
new Vue({
    el: '#app',
    components: {Motdepasse}
});

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

entry client

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

Entry server

        import { createApp } from './app'
    renderVueComponentToString(createApp(), (err, res) => {
      print(res);
    });

app.scss

@import '~bootstrap-sass/assets/stylesheets/bootstrap';
@import 'app.css';

app.css

body {
    background-color: white!important;
}

Controller default

class DefaultController extends AbstractController
{
    /**
     * @Route("/", name="default")
     */
    public function index()
    {       $ssr = $this->renderJs();
        return $this->render('default/index.html.twig', [
            'controller_name' => 'DefaultController','ssr' => $ssr 
        ]);
    }


    private function renderJs()
{
    $renderer_source = file_get_contents(__DIR__ . '/../../node_modules/vue-server-renderer/basic.js');
    $app_source = file_get_contents(__DIR__ . '/../../public/build/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();
}
}

Package.json

    {
    "devDependencies": {
        "@symfony/webpack-encore": "^0.20.1",
        "bootstrap": "^4.3.1",
        "bootstrap-sass": "^3.3.7",
        "jquery": "^3.3.1",
        "node-sass": "^4.9.3",
        "popper.js": "^1.14.7",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-loader": "14.2.2",
        "vue-template-compiler": "^2.5.17",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production"
    },
    "dependencies": {
        "axios": "^0.18.0",
        "moment": "^2.22.2",
        "vue-server-renderer": "^2.6.8"
    }
}

Upvotes: 1

Views: 638

Answers (1)

thafirstone
thafirstone

Reputation: 92

Remove this line

global.jQuery = require('jquery');

Since Webpack Encore already provide Jquery regarding this line:

.autoProvidejQuery()

More info, here

EDIT

Regarding you new error

V8Js::compileString():2241: Error: Bootstrap's JavaScript requires jQuery

Make sure you have install Bootstrap 

 yarn add bootstrap --dev

Since Bootstrap require Jquery and Popper, you have to install ittoo

yarn add jquery popper.js --dev

Then try again.

If it doesn't work, try to require library at the begining of you JS file

const $ = require('jquery'); // this "modifies" the jquery module: adding behavior to it // the bootstrap module doesn't export/return anything 
require('bootstrap');

More info, Import bootstrap official symfony doc

EDIT 2 (regarding the source code added)

In app.scss, replace this line

@import '~bootstrap-sass/assets/stylesheets/bootstrap';

by this one: 

@import "~bootstrap/scss/bootstrap";

Upvotes: 1

Related Questions