Open
Description
Hi !
I'm facing an issue and don't know how to solve it...
I'm using Encore to build all the assets, including Vue.js components.
Below is the devDependencies of my package.json:
"devDependencies":
{
"@symfony/webpack-encore": "^1.6.1",
"bootstrap": "4.4.1",
"core-js": "^3.0.0",
"file-loader": "^6.0.0",
"regenerator-runtime": "^0.13.2",
"sass-loader": "^10.2.0",
"vue": "^2.5",
"vue-loader": "^15.9.5",
"vue-template-compiler": "^2.6.14",
"webpack-notifier": "^1.6.0"
},
And here is my webpack.config.js
Encore
// directory where compiled assets will be stored
.addPlugin(
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /sonatacore\/vendor\/moment/,
})
)
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.copyFiles({
from: './assets/images',
to: 'images/[path][name].[ext]',
})
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
// .autoProvidejQuery()
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addStyleEntry('css/main', './assets/css/main.scss')
.addStyleEntry('css/customAdmin', './assets/css/admin/customAdmin.scss')
.addEntry('js/app', './assets/js/app.js')
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning()
// enables @babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage'
config.corejs = 3
})
// enables Sass/SCSS support
// Add base scss to all files so they are available everywhere
.enableSassLoader((options) => options.additionalData = `@import "${path.resolve(__dirname, './assets/css/base.scss')}";`)
//enable VueJS
.enableVueLoader(
() => {},
{runtimeCompilerBuild: false}
)
.addRule({
test: /\.vue$/,
loader: 'vue-loader'
})
.addAliases({
'vue$': 'vue/dist/vue.esm.js'
})
In my app.js file, the different Vue instances are initialised:
Vue.component('GeoDecisionMap', () => import('../components/geoDecision/GeoDecisionMap'))
Vue.component('DropdownCheckbox', () => import('../components/form/core/DropdownCheckbox'))
Vue.component('ChoiceClientModal', () => import('../components/modal/ChoiceClientModal'))
const vueContainers = document.getElementsByClassName('vue-container')
const vueContainersCount = vueContainers.length
if (vueContainersCount > 0) {
for (let i = 0; i < vueContainersCount; i++) {
new Vue({el: vueContainers[i]})
}
}
When launching the build (encore dev
) everything seems to be working fine, the build is successful. However, when I access the page including the Vue components, it is not working : the component is not showing and I have an error in my browser console
vue.esm.js:628 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <GeoDecisionMap> at assets/components/geoDecision/GeoDecisionMap.vue
<Root>
Has anyone else faced this ? What am I doing wrong ?
Thanks