Currently, I am developing a single page application utilizing Vue 3 and TypeScript. The main purpose of this app is to interact with an API. All the necessary information including the API's URL and key are stored in the 'src\env.js' file:
export default {
api_url: "https://api.themoviedb.org/3/movie/550?",
api_key: "somerandomkey"
}
Within the 'src\views\HomeView.vue' file, my code structure looks like this:
<template>
<div class="container">
<h1 class="page-title">{{ pageTitle }}</h1>
<MoviesList />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import axios from 'axios';
import env from '@/env.js'
import MoviesList from '../components/MoviesList.vue';
export default defineComponent({
name: 'HomeView',
components: {
MoviesList
},
data() {
return {
pageTitle: "Popular Movies",
movies: [],
}
},
methods: {
getMovies() {
axios.get(`${env.api_url}api_key=${env.api_key}`).then(response => {
this.movies = response.data.results;
})
console.log(this.movies)
}
}
});
</script>
An Issue Arises
Upon compilation, an error message is displayed in the terminal:
Could not find a declaration file for module '@/env.js'.
Seeking Clarifications
- What could be causing this complication?
- How can this issue be effectively resolved?