Soy nuevo en JavaScript y para una tarea necesito usar el complemento Javascript de mapas de colores 2D ( https://dominikjaeckle.com/projects/color2d/ ) para la visualización. Sé que esto debería ser fácil, pero de alguna manera encontré el error ERROR in src\ColorMap.js Line 48:29: 'Color2D' is not defined no-undef . Supongo que tuvo algo que ver con la forma en que integré el archivo color2D.js, así que busqué en línea y seguí las instrucciones en esta publicación Agregar etiqueta de script a React/JSX . Sin embargo, el error aún existía y no tenía idea de por qué. El marco que uso es React y mi estructura de carpetas es como:
├── node_modules ├── public ├── src │ ├── data # colormaps pngs (downloaded from the above website) │ ├── App.css │ ├── App.js # main app │ ├── ColorMap.js # colormap component │ ├── color2d.js # colormap code (downloaded from the above website) # other filesEn ColorMap.js, parte de mi código es el siguiente.
import React, { useRef, useEffect } from "react"; import * as d3 from "d3" function ColorMap() { const svgRef = useRef(); const wrapperRef = useRef(); useEffect(() => { // code for points and scale are omitted const scriptTag = document.createElement('script'); scriptTag.src = "color2D.js"; scriptTag.async = false; document.head.appendChild(scriptTag); const svg = d3.select(svgRef.current); result_mapped = svg... // some operations function colorPoints() { result_mapped.style("fill", function(d) { const rgb = Color2D.getColor(d[0], d[1]); return "rgb(" + rgb + ")"; }) }; Color2D.setColormap(Color2D.colormaps.BREMM, () => colorPoints()); return () => document.head.removeChild(scriptTag); }); return ( <div ref={wrapperRef}> <svg ref={svgRef}></svg> </div> ); } export default ColorMap;La implementación básicamente sigue el código fuente del sitio web 2D Colormaps Javascript Plugin. ¿Puede alguien ayudarme con eso? Gracias.
En esta línea:
Color2D.setColormap(Color2D.colormaps.BREMM, () => colorPoints());
Está utilizando una instancia de variable/clase llamada Color2D sin definirla primero. ESLint te está diciendo:
ERROR in src\ColorMap.js
Este es el archivo en el que está el error.
Line 48:29:
Línea: columna donde se encuentra el error en ese archivo.
'Color2D' is not defined
Mensaje de error.
no-undef
Regla en eslint (probablemente definida dentro de un archivo .eslintrc o en su paquete.json) que está causando que esto sea un error.
En otra nota, Color2D no se puede usar realmente a través de la importación en su estado actual, por lo que deberá crearlo en su propio archivo y exportarlo desde allí o incluirlo en línea.
EDITAR
Esto no se ha probado , pero creo que si agrega export default Color2D en la parte inferior de color2D.js , debería poder import Color2D from './color2d' en la parte superior de su archivo.
Te equivocas al decir que usar "color2d" es fácil. Es un paquete bastante extraño que no se publica en npm como cualquier otra biblioteca de JavaScript.
Debido a la falta de información en la pregunta, no sé cómo ejecuta su código. Supongo que lo está haciendo sin agrupar a través de webpack , esbuild o cualquier otro agrupador de frontend que se use en cada aplicación de javascript. Si eso es cierto, le recomiendo que comience a crear su aplicación mediante create-react-app ; es un buen punto de partida para aprender.
"color2d" es una biblioteca muy antigua, que no se puede agregar a través de la import , por lo que no se recomienda usarla tal como está. Pero si realmente necesita usarlo, es mejor poner el código de la biblioteca al inicio de su archivo ColorMap.js (sí, es extraño, pero esa es la mejor manera de incluirlo sin modificar el código fuente de la biblioteca).
Error ERROR in src\ColorMap.js Line 48:29: 'Color2D' is not defined no-undef no es en realidad un error, es más como una advertencia de eslint .