Cómo solucionar "cannot use import statement outside a module"

¿Qué significa este error?

Cuando recibes el error "Uncaught SyntaxError: cannot use import statement outside a module" (Error de sintaxis no capturado: no se puede usar la declaración de importación fuera de un módulo), generalmente significa que estás intentando utilizar una declaración de importación en un contexto donde no está permitido. Esto ocurre cuando no te encuentras dentro de un módulo de JavaScript.

Este error puede ocurrir tanto en entornos de Node.js como en el navegador.

Solución para Node.js

Si estás trabajando en un entorno de Node.js y te encuentras con este error, la solución es agregar un archivo package.json en la carpeta de tu proyecto y añadir la siguiente configuración:

Esto indica que el proyecto es un módulo de ECMAScript. Al agregar esta configuración, Node.js reconocerá el archivo como un módulo y permitirá el uso de la sintaxis de importación.

Solución para el navegador

En el caso de estar trabajando en un entorno de navegador, la solución implica agregar el atributo type con el valor module cuando cargas el script. Por ejemplo:

En lugar de simplemente:

Al especificar type="module", el navegador reconocerá que estás utilizando un módulo y permitirá el uso de la sintaxis de importación.

¡Comienza a aprovechar los módulos!

Al seguir estas soluciones, podrás resolver el error "cannot use import statement outside a module" y comenzar a utilizar las ventajas de los módulos en tu código JavaScript.

Los módulos te permiten organizar y reutilizar tu código de manera eficiente, lo que facilita el mantenimiento y la escalabilidad de tus proyectos. Aprovecha las importaciones para utilizar funciones y variables de otros archivos y mejora la estructura de tu código.

Recuerda que es importante configurar correctamente el entorno en el que estás trabajando, ya sea Node.js o el navegador, para permitir el uso de los módulos. Sigue las soluciones mencionadas anteriormente según corresponda a tu caso.