Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Failed to mount component: template or render function not defined #1049

Copy link
Copy link
Open
@watsab

Description

@watsab
Issue body actions

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.