Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Módulos não encontrados pelo vue-router

Referente ao curso Vue.js parte 1: construindo Single Page Applications, no capítulo Single Page Application e criação de rotas e atividade Configurando rotas

por Lucas Ribeiro Freitas
| 136.8k xp | 2 posts
CTO/Desenvolvedor

Olá!

A partir da aula 5 - Configurando Rotas, surgiu um problema no meu código e eu não faço ideia de como resolver.

Não consigo importar os módulos Home e Cadastro de suas pastas respectivas para o routes.js. Mesmo declarando-os corretamente e indicando o diretório correto o erro persiste. É como se os arquivos não existissem dentro da pasta.

Log: 

ERROR in ./src/routes.js
Module not found: Error: Can't resolve './components/home/Home' in 'C:\Users\prolu\Desktop\Lucas\Cursos\Alura\Formação_Vue\1_ConstruindoSPA\Conteudo\alurapic\src'
 @ ./src/routes.js 1:0-42
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Até recuperei e passei a usar o código do professor para eliminar possíveis erros, mas não adiantou. O que posso fazer?

Repositório do GitHub com o código fonte: https://github.com/molusca/alurapic-teste

3 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala Lucas, tudo bem? Vamos lá:

O primeiro problema é que faltava adicionar a extensão .vue nos imports do routes.js e Home.vue, eles ficaram:

// routes.js
import Home from './components/home/Home.vue'
import Cadastro from './components/cadastro/Cadastro.vue' 
// Home.vue
import Painel from '../shared/painel/Painel.vue';
import ImagemResponsiva from '../shared/imagem-responsiva/ImagemResponsiva.vue';

E no routes.js também faltava importar o Vue:

import Vue from 'vue'

Com essas mudanças acho que o problema deve resolver.

Espero ter ajudado.

solução!
por Lucas Ribeiro Freitas
| 136.8k xp | 2 posts
CTO/Desenvolvedor

Olá!

Na verdade cometi um erro na hora de commitar o código para linkar aqui.

Na versão que eu pretendia enviar, os arquivos da routes.js já estavam com a extensão .vue.

Além disso, a linha que continha o Vue.component('Home', Home) não era pra estar mais lá (adicionei em uma tentativa anterior de solucionar o problema).

Fato é que o problema persistiu e o log do erro era este aqui:

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/home/Home.vue
Module not found: Error: Can't resolve '../shared/painel/Painel' in 'C:\Users\prolu\Desktop\test\alurapic-teste\src\components\home'
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/home/Home.vue 21:0-45
 @ ./src/components/home/Home.vue
 @ ./src/routes.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Mas consegui solucionar ao encontrar uma issue similar do GitHub. A solução era adicionar a Array extensions: no arquivo webpackconfig.js, dessa maneira:

\\ webpackconfig.js
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json'] 
  },

Link para a issue: https://github.com/vuejs-templates/webpack-simple/issues/130

Agradeço pela disponibilidade, Matheus. E peço perdão pelo engano que cometi anteriormente.

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Boa Lucas, fico feliz que tenha resolvido o problema.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos