Discussion :

[Smlh.dev]

Bonjour,

J'essaye d'installer VueJS dans mon application Symfony mais je me retrouve avec un problème lier à Webpack. J'effectue l'installation de Webpack Encore comme expliquer dans la documentation de Symfony en utilisant Composer ensuite je fais un npm install j'active VueLoader en ajoutant le .enableVueLoader() dans mon webpack.config.js quand j'effectue la commande npm run dev c'est à ce moment que le problème survient voici le message que ma console affiche :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
> @ dev D:\users\slpatrick\www\vuesymfony
> encore dev
 
Running webpack ...
 
 RECOMMEND  To create a smaller (and CSP-compliant) build, see https://symfony.com/doc/current/frontend/encore/vuejs.html#runtime-compiler-build
[webpack-cli] TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (D:\users\slpatrick\www\vuesymfony\node_modules\webpack\lib\NormalModule.js:180:10)
    at D:\users\slpatrick\www\vuesymfony\node_modules\vue-loader\lib\plugin-webpack5.js:36:70
    at Hook.eval [as call] (eval at create (D:\Users\slpatrick\www\vuesymfony\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:106:1)    
    at Hook.CALL_DELEGATE [as _call] (D:\Users\slpatrick\www\vuesymfony\node_modules\tapable\lib\Hook.js:14:14)
    at Compiler.newCompilation (D:\Users\slpatrick\www\vuesymfony\node_modules\webpack\lib\Compiler.js:1017:26)
    at D:\Users\slpatrick\www\vuesymfony\node_modules\webpack\lib\Compiler.js:1059:29
    at Hook.eval [as callAsync] (eval at create (D:\Users\slpatrick\www\vuesymfony\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1) 
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\Users\slpatrick\www\vuesymfony\node_modules\tapable\lib\Hook.js:18:14)
    at Compiler.compile (D:\Users\slpatrick\www\vuesymfony\node_modules\webpack\lib\Compiler.js:1054:28)
    at D:\Users\slpatrick\www\vuesymfony\node_modules\webpack\lib\Compiler.js:494:12
    at Compiler.readRecords (D:\Users\slpatrick\www\vuesymfony\node_modules\webpack\lib\Compiler.js:894:11)
    at D:\Users\slpatrick\www\vuesymfony\node_modules\webpack\lib\Compiler.js:491:11
    at Hook.eval [as callAsync] (eval at create (D:\Users\slpatrick\www\vuesymfony\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\Users\slpatrick\www\vuesymfony\node_modules\tapable\lib\Hook.js:18:14)
    at D:\Users\slpatrick\www\vuesymfony\node_modules\webpack\lib\Compiler.js:488:20
    at Hook.eval [as callAsync] (eval at create (D:\Users\slpatrick\www\vuesymfony\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `encore dev`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
 
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\slpat\AppData\Roaming\npm-cache\_logs\2021-04-12T11_50_50_918Z-debug.log

Je sais pas si quelqu'un a déjà eu ce problème ? Un coup de main ne serait pas de refus

[pppp4]

Vous devriez déjà compiler sans aucune modification ce que je veux dire un nouveau projet avec webpack et on compile voir si ça joue..

Si oui ajoutez à webpack.config.js :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
    .addEntry('app', './assets/app.js')
    //vue
    .addEntry('start-vue', './assets/vue/start-vue.js') //<- c'est un example
    .enableVueLoader()

dans assets/vue/start-vue.js :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 
import axios from 'axios'
import VueAxios from 'vue-axios'
 
// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
//https://bootstrap-vue.org/docs
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
 
Vue.use(VueAxios, axios)
 
import App from "./components/App";
 
console.log('vue-start')
 
new Vue({
    delimiters: ['${', '}$'],
    components:{App},
    el: '#app',
    render: h => h(App)
})

C'est mon point d'entrée par exemple ici..