Client-side rendered virtual DOM tree is not matching server-rendered content when using async components #4387
Description
Here is the minimal code that can reproduce the error, just run in browser:
The JSFiddle: http://jsfiddle.net/fenivana/58s5x2kb/
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app" server-rendered="true"><div class="foo">foo</div></div> <script> new Vue({ el: '#app', template: '<div id="app"><foo></foo></div>', components: { foo: resolve => { setTimeout(() => { resolve({ template: '<div class="foo">foo</div>' }); }); } } }); </script> </body> </html>If you comment out setTimeout, there's no problem.
resolve => { // setTimeout(() => { resolve({ template: '<div class="foo">foo</div>' }); // }); }Of course, the code splitting point in real code is in the router, and only client entry bundle will do code splitting, not server entry bundle.