Vue lazy loading components

[gabriel89]

Hello :)

I just watched your presentation from the 2017 VueConf and I liked it so much, I wanted to try to lazy-load a module in my custom vue application.

Basically, I have my routes set up from database, and one of them is the route to display programs (for children). In this program, I load several components, like list of clients, consents, etc.

Currently, I have it like so, but wanted to adapt it like you did, so I changed it to this, but unfortunately my whole application fails to build and run (if I rebuild it), or get this error otherwise:

in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/programs/program.vue Module parse failed: E:\Gabi\khcc-crm-playground\node_modules\babel-loader\lib\index.js!E:\Gabi\khcc-crm-playground\node_modules\vue-loader\lib\selector.js?type=script&index=0!E:\Gabi\khcc-crm-playground\src\components\programs\program.vue Unexpected token (58:8) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (58:8) at Parser.pp$4.raise (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:2221:15) at Parser.pp.unexpected (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:603:10) at Parser.pp$3.parseExprAtom (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1822:12) at Parser.pp$3.parseExprSubscripts (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1692:19) at Parser.pp$3.parseExprOps (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1597:21) at Parser.pp$3.parseExpression (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1573:21) at Parser.pp$1.parseReturnStatement (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:839:33) at Parser.pp$1.parseStatement (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:699:34) at Parser.pp$1.parseBlock (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:981:25) at Parser.pp$3.parseFunctionBody (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:2105:24) at Parser.pp$1.parseFunction (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1065:10) at Parser.pp$3.parseExprAtom (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1810:19) at Parser.pp$3.parseExprSubscripts (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1715:21) @ ./src/components/programs/program.vue 3:2-107

I have updated my node packages, including vue to the latest version (2.5.1X, if I remember correctly), but to no avail. Can you please help me out with some thoughts?

Much appreciated,
Gabriel

[gangsthub]

It seems like a parser error with the Vue Loader. You'll need to provide more information. Probably the only thing you need is @babel/plugin-syntax-dynamic-import for it to work. Here's a demo: 😉

https://codesandbox.io/s/vue-template-ksuiv?fontsize=14