Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Erro de compilação depois de configurar o router

Depois que configurei o router conforme o professor fez na aula, dá o seguinte erro no navegador:

Failed to compile.

./src/components/shared/imagem-responsiva/ImagemResponsiva.vue
Module build failed: Error: ENOENT: no such file or directory, open 'E:\Repositories\Alura\Formações\vue_js\vue_1\alurapic\src\components\shared\imagem-responsiva\ImagemResponsiva.vue'
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/home/Home.vue 29:0-80
 @ ./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

Parece não estar conseguindo carregar o componente ImagemResponsiva.vue, mas não consegui identificar o porquê. Minha Home.vue está assim:


<template>
  <div>
    <h1 class="centralizado">{{ titulo }}</h1>

    <input
      type="search"
      class="filtro"
      v-on:input="filtro = $event.target.value"
      placeholder="filtre por parte do título"
    />

    <ul class="lista-fotos">
      <li class="lista-fotos-item" v-for="foto of fotosComFiltro">
        <meu-painel :titulo="foto.titulo">
          <imagem-responsiva
            :url="foto.url"
            :titulo="foto.titulo"
          ></imagem-responsiva>
        </meu-painel>
      </li>
    </ul>
  </div>
</template>

<script>
import Painel from "../shared/painel/Painel.vue";
import ImagemResponsiva from "../shared/imagem-responsiva/ImagemResponsiva.vue";

export default {
  components: {
    "meu-painel": Painel,
    "imagem-responsiva": ImagemResponsiva,
  },

  data() {
    return {
      titulo: "Alurapic",
      fotos: [],
      filtro: "",
    };
  },

  computed: {
    fotosComFiltro() {
      if (this.filtro) {
        let exp = new RegExp(this.filtro.trim(), "i");
        return this.fotos.filter((foto) => exp.test(foto.titulo));
      } else {
        return this.fotos;
      }
    },
  },

  created() {
    this.$http
      .get("http://localhost:3000/v1/fotos")
      .then((res) => res.json())
      .then(
        (fotos) => (this.fotos = fotos),
        (err) => console.log(err)
      );
  },
};
</script>

<style>
.centralizado {
  text-align: center;
}

.lista-fotos {
  list-style: none;
}

.lista-fotos .lista-fotos-item {
  display: inline-block;
}

.filtro {
  display: block;
  width: 100%;
}
</style>

Segue o código no github: https://github.com/raul-lima/alurapic

Segue estrutura das pastas e os erros apontados pelo vscode:

Estrutura das pastas do projeto

Erro na importação de ImagemResponsiva

O vscode indica também o seguinte erro, embora essa parte estivesse funcionando normalmente antes, mesmo com o erro:

Erro no laço for

2 respostas
solução!

Raul, em algum momento você fez alguma alteração em relação aos nomes dos arquivos ou pastas, exemplo:

-> Mudar o nome da pasta ImagemResponsiva para imagem-responsiva.

-> Mudar o nome do arquivo imagem-responsiva.vue para ImagemResponsiva.vue

Caso tenha feito alguma mudança nesse sentido e então ajustado o path no import do arquivo ImagemResponsiva para ficar de acordo com a alteração, a mensagem de erro Already included file name vem a aparecer, mesmo que o path esteja correto. Para "corrigir" esse erro, basta reiniciar o VsCode.

Quanto a mensagem referente ao v-bind:key, isso é uma recomendação do Vue para que cada item renderizado no v-for possua um identificador que possa ser rastreado em renderizações ou reordenações futuras desses items. Pode ser resolvido assim:

<li class="lista-foto-item" v-for="foto of fotosComFiltro" v-bind:key="identificador_unico_do_item">

Note que o valor passado como :key deve ser um valor único para cada item

Era isso mesmo, obrigado!

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