1
resposta

Code splitting não está funcionando

Boa tarde,

Quando faço o import assíncrono de Cadastro.vue, a página de cadastro de fotos passa a não carregar mais. Os imports do meu routes.js estão conforme abaixo.

const Cadastro = () => System.import('./components/cadastro/Cadastro.vue')
import Home from './components/home/Home.vue';
// Se trocar para o import abaixo, tudo volta a funcionar
//import Cadastro from './components/cadastro/Cadastro.vue';

Executando o ambiente de desenvolvimento com npm run dev, ocorre o erro abaixo no console javascript quando navego para a página de cadastro. Já quando crio a build com npm run build, implanto-a no servidor Node.js, e navego para a página de Cadastro, nem o erro no console aparece.

vue.esm.js?efeb:628 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <App> at src/App.vue
         <Root>
warn @ vue.esm.js?efeb:628
mountComponent @ vue.esm.js?efeb:4045
Vue.$mount @ vue.esm.js?efeb:9063
Vue.$mount @ vue.esm.js?efeb:11974
init @ vue.esm.js?efeb:3127
merged @ vue.esm.js?efeb:3310
createComponent @ vue.esm.js?efeb:5989
createElm @ vue.esm.js?efeb:5936
updateChildren @ vue.esm.js?efeb:6227
patchVnode @ vue.esm.js?efeb:6330
patch @ vue.esm.js?efeb:6493
Vue._update @ vue.esm.js?efeb:3957
updateComponent @ vue.esm.js?efeb:4075
get @ vue.esm.js?efeb:4488
run @ vue.esm.js?efeb:4563
flushSchedulerQueue @ vue.esm.js?efeb:4319
eval @ vue.esm.js?efeb:1989
flushCallbacks @ vue.esm.js?efeb:1915
Promise.then (async)
timerFunc @ vue.esm.js?efeb:1942
nextTick @ vue.esm.js?efeb:1999
queueWatcher @ vue.esm.js?efeb:4411
update @ vue.esm.js?efeb:4553
notify @ vue.esm.js?efeb:739
reactiveSetter @ vue.esm.js?efeb:1064
eval @ vue-router.common.js?968c:1985
updateRoute @ vue-router.common.js?968c:1428
eval @ vue-router.common.js?968c:1351
eval @ vue-router.common.js?968c:1415
step @ vue-router.common.js?968c:1317
step @ vue-router.common.js?968c:1324
runQueue @ vue-router.common.js?968c:1328
eval @ vue-router.common.js?968c:1410
step @ vue-router.common.js?968c:1317
eval @ vue-router.common.js?968c:1321
eval @ vue-router.common.js?968c:1398
resolve @ vue-router.common.js?968c:1565
Promise.then (async)
eval @ vue-router.common.js?968c:1575
iterator @ vue-router.common.js?968c:1387
step @ vue-router.common.js?968c:1320
step @ vue-router.common.js?968c:1324
runQueue @ vue-router.common.js?968c:1328
confirmTransition @ vue-router.common.js?968c:1403
transitionTo @ vue-router.common.js?968c:1350
init @ vue-router.common.js?968c:1974
beforeCreate @ vue-router.common.js?968c:410
invokeWithErrorHandling @ vue.esm.js?efeb:1863
callHook @ vue.esm.js?efeb:4228
Vue._init @ vue.esm.js?efeb:5013
Vue @ vue.esm.js?efeb:5094
eval @ main.js?3479:28
(anonymous) @ build.js:1145
__webpack_require__ @ build.js:708
fn @ build.js:113
(anonymous) @ build.js:983
__webpack_require__ @ build.js:708
(anonymous) @ build.js:806
(anonymous) @ build.js:809
client?cd17:77 [WDS] Hot Module Replacement enabled.

O que será que estou fazendo de errado?

Obrigado desde já.

1 resposta

Olá, Alexandre! Tudo certo?

Tente trocar o código pelo seguinte:

const Cadastro = () => System.import('./components/cadastro/Cadastro.vue').then(m => m.default);

Ou:

const Cadastro = () => import('./components/cadastro/Cadastro.vue');

É difícil ao certo dizer o que está dando problema com o seu código, mas pode ser algum problema de versionamento, que em versões que o instrutor utilizava aquela sintaxe funcionava sem problemas, mas algo no seu projeto pode estar reclamando.

Por isso, talvez uma das duas sintaxes que deixei acima possam funcionar.

Espero ter ajudado!