es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Eslint muestra el error: ‘import’ y ‘export’ solo pueden aparecer con ‘sourceType: module’

Eslint muestra el error: ‘import’ y ‘export’ solo pueden aparecer con ‘sourceType: module’

23 Jul, 2023 Programación

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?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para utilizar las declaraciones import y export en tu clase de JavaScript, debes establecer el sourceType en module. Para hacer esto, necesitas especificar el atributo type="module" en tu etiqueta script donde se importa el archivo JavaScript.

    En tu caso, intentaste agregar el atributo type="module" en la etiqueta script 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 del sourceType.

    Por lo tanto, puedes modificar tu archivo Warning.js para incluir la configuración del sourceType en la parte superior del archivo.

    /* eslint-disable */
/* eslint-env es6 */

/**
 * @fileOverview Clase Warning para agregar y eliminar la clase de advertencia de los elementos.
 */

'use strict';

export default class Warning {
    constructor(id, className) {
        this.id = id;
        this.className = className;
    }

    add () {
        $(this.id).addClass(this.className);
    }
    remove () {
        $(this.id).removeClass(this.className);
    }
}

    Esto debería permitirte utilizar las declaraciones import y export sin errores de ESLint. Luego puedes importar la clase en tu archivo contact.js como se intentó anteriormente:

    import Warning from './Warning.js';
const warning = new Warning();

Comments are closed.