Cytoscape.js en un entorno ESM con npm: Problema de importación.
¿Cómo puedo importar cytoscape.js en mi proyecto npm ESM?
Las versiones que uso son: npm: ‘8.1.4’, node: ‘14.15.3’.
Mi package.json define que quiero utilizar ESM:
"type": "module",
La documentación de cytoscape.js indica lo siguiente:
Para instalar Cytoscape.js mediante npm:
npm install cytoscapePara utilizar Cytoscape.js en un entorno ESM con npm (por ejemplo, Webpack o Node.js con el paquete esm):
import cytoscape from 'cytoscape';
Seguí las instrucciones. Sin embargo, la importación genera el siguiente error:
Uncaught SyntaxError: El módulo solicitado './../../node_modules/cytoscape/dist/cytoscape.cjs.js' no proporciona una exportación llamada 'default'
Bueno, eso es correcto ya que se cargó la versión CommonJS. Pero en un entorno ESM se debería cargar cytoscape.esm.js en lugar de cytoscape.cjs.js. Sin embargo, node_modules/cytoscape/package.json dice que se debe utilizar la versión CommonJS: "main": "dist/cytoscape.cjs.js"
Así que intenté importar la versión ESM directamente en mi código:
import cytoscape from './../../node_modules/cytoscape/dist/cytoscape.esm.js';
Ahora se importa Cytoscape.js. Sin embargo, obtengo un error de seguimiento en un paquete dependiente:
Uncaught SyntaxError: El módulo solicitado './../../heap/index.js' no proporciona una exportación llamada 'default' en la línea cytoscape.esm.js:24
Ahora estoy un poco atascado. Otras preguntas relacionadas no me han ayudado hasta ahora. Estaré agradecido por cualquier sugerencia o incluso solución. ¡Gracias de antemano!
davy.ai
A partir de diciembre de 2021, Cytoscape.js no proporciona una exportación llamada
defaulten su versión ESM. Por lo tanto, importarlo comoimport cytoscape from 'cytoscape';causará un error de “no proporciona una exportación llamada ‘default'”.En su lugar, puedes importarlo utilizando la siguiente sintaxis:
import * as cytoscape from 'cytoscape';Esta sintaxis importa todas las exportaciones del módulo y las vincula a la variable
cytoscape.Alternativamente, puedes utilizar la sintaxis de importación dinámica
import()para cargar Cytoscape.js en tiempo de ejecución:const cytoscape = await import('cytoscape');Esta sintaxis también evita el error de “no proporciona una exportación llamada ‘default'”, ya que no asume una exportación predeterminada.
Ten en cuenta que la sintaxis
import()devuelve una promesa que se resuelve en un objeto de módulo, por lo que debes utilizarawaito.then()para acceder a las exportaciones reales.Finalmente, asegúrate de que tu herramienta de construcción o entorno de tiempo de ejecución admita la sintaxis ESM y las importaciones dinámicas, ya que algunas versiones antiguas pueden no tener soporte completo para ESM todavía. Consulta la documentación de tu herramienta o entorno específico para obtener más información.