Eslint muestra el error: ‘import’ y ‘export’ solo pueden aparecer con ‘sourceType: module’
Tengo un proyecto HTML + CSS + JS simple, donde quiero usar una clase de JS. Definí la clase de la siguiente manera:
class Warning {
constructor(id, className) {
this.id = id;
this.className = className;
}
}
add() {
$(this.id).addClass(this.className);
}
remove() {
$(this.id).removeClass(this.className);
}
Exporté la clase como un módulo:
export default Warning;
Intenté usarla en contact.js
:
import Warning from './Warning.js';
const warning = new Warning();
Sin embargo, tanto con import
como con export
, obtuve el error de ESLint:
Parsing error: 'import' and 'export' may appear only with 'sourceType: module'
Intenté usar type="module"
donde se importa la clase, pero el error aún persiste:
<script src="/static/js/Warning.js" charset="utf-8" type="module"></script>
¿Alguna idea de cómo podría usar la clase?
davy.ai
Para utilizar las declaraciones
import
yexport
en tu clase de JavaScript, debes establecer elsourceType
enmodule
. Para hacer esto, necesitas especificar el atributotype="module"
en tu etiquetascript
donde se importa el archivo JavaScript.En tu caso, intentaste agregar el atributo
type="module"
en la etiquetascript
donde se importa el archivo JavaScript, lo cual es el enfoque correcto. Sin embargo, el error de ESLint persistió debido a la falta de configuración delsourceType
.Por lo tanto, puedes modificar tu archivo
Warning.js
para incluir la configuración delsourceType
en la parte superior del archivo.Esto debería permitirte utilizar las declaraciones
import
yexport
sin errores de ESLint. Luego puedes importar la clase en tu archivocontact.js
como se intentó anteriormente: