Intenté crear para crear un componente en JavaScript estándar aquí en el archivo js principal. Estoy tratando de llamar a una función que está definida en un componente y también espero un resultado, pero me da un error diciendo que showMovies no es una función. ¿Alguien puede decirme cuál es la forma correcta de hacerlo?

 import Component from './Component.js'; form.addEventListener("submit", (e) => { e.preventDefault(); main.innerHTML = ""; const searchTerm = search.value; const SEARCHAPI = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query="; if (searchTerm) { Component.showMovies(SEARCHAPI + searchTerm); search.value = ""; } else { main.innerHTML = "<h1>No result Found!</h1>"; } });

 const Component = () => { const IMGPATH = "https://image.tmdb.org/t/p/w1280"; // const SEARCHAPI = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query="; const main = document.getElementById("main"); const form = document.getElementById("form"); const search = document.getElementById("search"); const showMovies = (url) => { fetch(url) .then((res) => res.json()) .then(function(data) { console.log(data.results); const el = document.createElement("div"); const title = document.createElement("h3"); const rank = document.createElement("h3"); const image = document.createElement("img"); const year = document.createElement("h3"); image.src = IMGPATH + data.results[0].poster_path; el.appendChild(image); let date = new Date(data.results[0].release_date); rank.innerHTML = "Rating:  " + data.results[0].popularity; title.innerHTML = "Title:  " + data.results[0].title; year.innerHTML = "Release:  " + date.getFullYear(); main.appendChild(el); main.appendChild(title); main.appendChild(rank); main.appendChild(year); }); }; } export default Component;