1

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"
    }
}
2
  • do you have jquery installed? Commented Mar 4, 2019 at 18:47
  • Yes, Jquery/Bootstrap/pooper you can see my package.json Commented Mar 6, 2019 at 16:51

1 Answer 1

1

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";
Sign up to request clarification or add additional context in comments.

6 Comments

Hi, I have edit my code but i have this error V8Js::compileString():2241: Error: Bootstrap's JavaScript requires jQuery
Arf new error V8Js::compileString():4747: TypeError: Cannot set property 'emulateTransitionEnd' of undefined
Could you show me your webpack.config.js, package.json and all front file .js .css ?
If i test with this project github.com/ChrisDBrown/symfony4-vuejs-ssr inject jquery and boostrap, same bug and same error... It's not possible Jquery+ bootstrap/vue.js with SSR?
Unfortunately I also tried several times without success. I finally gave up. But that was less than a year ago. So I'm thinking that the project has evolved over time, but that's obviously not the case.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.