Problemas al importar la biblioteca axios en un archivo .js de frontend.
Estoy trabajando en un proyecto de nodejs y express, utilizando mongodb como base de datos, y estoy intentando usar axios en ese proyecto. Mi configuración es usar .pug para la representación del frontend, pero ahora parece que tengo un problema al importar la biblioteca de axios en el código javascript del frontend.
En la consola del navegador aparece un error: Uncaught TypeError: No se pudo resolver el especificador del módulo “axios”. Las referencias relativas deben comenzar con “/” , “./” o “../”.
Mi estructura de archivos es la siguiente (solo incluyo los archivos relevantes):
node_modules
public
|-- js
|-- index.js // aquí quiero usar axios pero no funciona
views
|-- base.pug // tengo muchos otros archivos .pug aquí
package-lock.json
package.json
app.js
server.js
He instalado axios con npm y aparece como una dependencia en package.json.
En el archivo index.js he utilizado tanto:
import axios from 'axios';
como:
const axios = require('axios');
También he intentado usar una referencia en el archivo base.pug, tanto en la cabecera como en el pie de página, pero eso tampoco funciona. Allí he intentado usar estas referencias:
script(src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.23.0/axios.min.js')
y:
script(src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js')
No he estado empaquetando el código .js para el frontend.
¿Alguna idea de cómo solucionar esto?
davy.ai
El mensaje de error “Failed to resolve module specifier ‘axios'” indica que el código no puede encontrar el módulo axios. Hay algunas cosas que podrían estar causando este problema:
npm list axiosen la terminal. Asegúrate de que aparezca en el directorio node_modules de tu proyecto.Asegúrate de que tu declaración de importación sea correcta. Debería ser
import axios from 'axios';, noimport axios from ''axios';'.Si estás utilizando una versión de Node.js que no admite módulos ES6 (es decir, versiones anteriores a 12.0), deberás utilizar una declaración de importación en estilo CommonJS en su lugar:
const axios = require('axios');. Ten en cuenta que mezclar módulos ES6 y CommonJS puede causar problemas, así que mantén un estilo consistentemente.Si estás importando axios en tu código front-end desde un archivo .js, asegúrate de que el archivo esté incluido en tu HTML utilizando la etiqueta
<script>. Por ejemplo, si tu index.js está en el directorio public/js, lo incluirías así:Si aún tienes problemas, intenta reinstalar axios (
npm uninstall axiosseguido denpm install axios) y luego borra la caché del navegador antes de ejecutar tu proyecto nuevamente.Ten en cuenta que simplemente agregar una etiqueta de script para una versión de axios alojada en un CDN (por ejemplo,
script(src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js')) no funcionará, ya que ese código no se está importando como un módulo. En su lugar, deberías importarlo en tus archivos .js utilizando la sintaxis de importación ES6 o la funciónrequire()de CommonJS.