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!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software