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.

Problemas al importar Cytoscape y Dagre en Js.

03 Jun, 2023 Programación

Estoy intentando utilizar Dagre con Cytoscape para visualizar árboles, pero tengo problemas al importar dagre y cytoscript en mi archivo javascript. Sigo recibiendo el error “las declaraciones de importación sólo pueden aparecer en nivel superior de un módulo”.

Mi HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Document</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="style.css" rel="stylesheet">
    </head>
    <body>

        <div id="cy"></div>

        <script src="tree.js"></script>

    </body>

</html>

Mi archivo js:

import cytoscape from 'cytoscape';
import dagre from 'cytoscape-dagre';

cytoscape.use(dagre);

Cuando añado type="module" a mi etiqueta de script en HTML, recibo un error de tipo MIME (text/html).

He instalado cytoscape-dagre vía npm según las instrucciones en el repositorio Github: npm install cytoscape-dagre https://github.com/cytoscape/cytoscape.js-dagre

Agradecería cualquier ayuda.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que estás teniendo problemas con la importación de módulos en tu archivo Javascript al intentar utilizar Dagre con Cytoscape para visualizar árboles. El mensaje de error “import declarations may appear only at a top level of a module” (las declaraciones de importación solo pueden aparecer en la parte superior de un módulo) indica que es posible que estés importando los módulos incorrectamente.

    Para resolver este problema, puedes intentar utilizar el sistema de módulos CommonJS en lugar de los módulos ES eliminando las declaraciones import y reemplazándolas por declaraciones require.

    A continuación, se muestra un ejemplo de cómo puedes modificar tu archivo Javascript para usar módulos CommonJS:

    const cytoscape = require('cytoscape');
const dagre = require('cytoscape-dagre');

cytoscape.use(dagre);

    Luego, puedes eliminar el atributo type="module" de la etiqueta de script en el archivo HTML.

    Ten en cuenta que la función require es una característica de Node.js y no está soportada en los navegadores. Por lo tanto, deberás utilizar una herramienta como Browserify o Webpack para empaquetar tu código y hacer que se pueda ejecutar en el navegador.

    Además, asegúrate de que el paquete cytoscape-dagre esté instalado correctamente a través de npm e incluido en las dependencias de tu proyecto.

Comments are closed.