Skip to content

Circular references between components broken after upgrading vue-loader to 13.x #933

Closed
@cwmaloney

Description

@cwmaloney

Version

13.0.2

Reproduction link

https://github.com/cwmaloney/SimpleVueTree

Steps to reproduce

Download and run this simple project:

git clone https://github.com/cwmaloney/SimpleVueTree.git
npm install
npm run dev

The Node.js server and browser should start and the app should load a display a folder and folder and file tree.

Run "npm outdated" - note that vue-loader is outdated and 13.0.4 is the latest version.

Edit package.json and change the version for vue-loader to ^13.0.2
npm install
npm run dev

The Node.js server and browser should start but the app will NOT display the complete list of folders and files. Vue.js will display a console log message like:

[Vue warn]: Failed to mount component: template or render function not defined.
... found in ... TreeItem...

What is expected?

I expect the application (that was working with vue-loader 12.*) to display the complete tree of components.

What is actually happening?

Only some of the components are displayed.


This app use the technique recommended in the Vue.js documentation for groups of components that make circular references - see:

https://vuejs.org/v2/guide/components.html#Circular-References-Between-Components

I believe this issue is related to the documented "ES modules" change breaking change defined for 13.0.0 - see:

https://github.com/vuejs/vue-loader/releases/tag/v13.0.0

I suspect that the Vue.js documentation needs to be updated to describe how to implement groups of components that make circular references with vue-loader 13.x.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions