Unknown Widget Error in React custom widget
0
// 1. ChoroplethMap.jsx import { createElement, useRef, useEffect, useState } from "react"; import * as d3 from "d3"; import "../ui/ChoroplethMap.css"; export function ChoroplethMap({ jsonData }) { const mapRef = useRef(); const [tooltip, setTooltip] = useState({ visible: false, x: 0, y: 0, data: null }); useEffect(() => { const width = 660; const height = 600; d3.select(mapRef.current).select("svg").remove(); const svg = d3.select(mapRef.current).append("svg").attr("width", width).attr("height", height); const color = d3 .scaleThreshold() .domain([10, 50, 100, 500, 1000, 5000, 10000]) .range(["#f2e5ff", "#d9b3ff", "#bf80ff", "#a64dff", "#8c1aff", "#7300e6", "#5900b3", "#400080"]); d3.json("https://raw.githubusercontent.com/adarshbiradar/maps-geojson/refs/heads/master/india.json") .then(india => { if (!india || !india.features) { throw new Error("Invalid GeoJSON format: 'features' not found"); } const sampleData = JSON.parse(jsonData); const dataMap = {}; sampleData.forEach(d => { dataMap[d.state] = { sarfesiCount: d.sarfesiCount || 0, chequeBounceCount: d.chequeBounceCount || 0 }; }); india.features.forEach(d => { const stateData = dataMap[d.properties.st_nm] || { sarfesiCount: 0, chequeBounceCount: 0 }; d.properties.sarfesiCount = stateData.sarfesiCount; d.properties.chequeBounceCount = stateData.chequeBounceCount; }); const projection = d3 .geoMercator() .scale(1000) .center([78.9629, 22.5937]) .translate([width / 2, height / 2]); const path = d3.geoPath().projection(projection); svg.selectAll(".state") .data(india.features) .enter() .append("path") .attr("class", "state") .attr("d", path) .attr("fill", d => color(d.properties.sarfesiCount)) .attr("stroke", "#aaa") .attr("stroke-width", 0.5) .on("mouseover", function (event, d) { d3.select(this).attr("opacity", 0.8); setTooltip({ visible: true, x: event.clientX, y: event.clientY, data: { name: d.properties.st_nm, sarfesiCount: d.properties.sarfesiCount, chequeBounceCount: d.properties.chequeBounceCount } }); }) .on("mousemove", function (event) { setTooltip(tooltip => ({ ...tooltip, x: event.clientX, y: event.clientY })); }) .on("mouseout", function () { d3.select(this).attr("opacity", 1); setTooltip({ visible: false, x: 0, y: 0, data: null }); }); }) .catch(error => { console.error("Error loading GeoJSON:", error); alert("Error loading the map data."); }); }, [jsonData]); return ( <div ref={mapRef} style={{ position: "relative" }}> {tooltip.visible && ( <div style={{ position: "fixed", top: tooltip.y + 10 + "px", left: tooltip.x + 10 + "px", backgroundColor: "#fff", padding: "8px 12px", border: "1px solid #ddd", borderRadius: "8px", boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)", fontSize: "13px", fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif", zIndex: 1000, pointerEvents: "none", lineHeight: "1.5" }} > <strong style={{ fontSize: "14px", color: "#333" }}>{tooltip.data.name}</strong> <br /> <span style={{ color: "green", fontWeight: "bold" }}>SARFAESI:</span>{" "} <span style={{ color: "#555" }}>{tooltip.data.sarfesiCount}</span> <br /> <span style={{ color: "orange", fontWeight: "bold" }}>ChequeBounce:</span>{" "} <span style={{ color: "#555" }}>{tooltip.data.chequeBounceCount}</span> </div> )} </div> ); } //2. LawyerMap.editorPreview import { createElement } from "react"; export function preview({ jsonData }) { return <div>Choropleth Map Preview</div>; } export function getPreviewCss() { return require("./ui/ChoroplethMap.css"); //3. LawyerMap.jsx import { createElement } from "react"; import { ChoroplethMap as MapComponent } from "./components/ChoroplethMap"; // Avoid name conflict import "./ui/ChoroplethMap.css"; export function ChoroplethMap({ jsonData }) { return <MapComponent jsonData={jsonData} />; } //4. LawyerMap.xml <?xml version="1.0" encoding="utf-8"?> <widget id="mendix.lawyermap.LawyerMap" pluginWidget="true" needsEntityContext="false" offlineCapable="true" supportedPlatform="Web" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd"> <name>Lawyer Map</name> <description>Interactive Choropleth Map using D3.js library.</description> <icon/> <properties> <propertyGroup caption="General"> <property key="jsonData" type="string" required="true" multiline="true"> <caption>JSON Data</caption> <description>Provide the JSON data for the choropleth map.</description> </property> </propertyGroup> </properties> </widget> //5.package.xml <?xml version="1.0" encoding="utf-8" ?> <package xmlns="http://www.mendix.com/package/1.0/"> <clientModule name="LawyerMap" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/"> <widgetFiles> <widgetFile path="LawyerMap.xml"/> </widgetFiles> <files> <file path="mendix/lawyermap"/> </files> </clientModule> </package> i have created a custom widget on react, but when i am using it is showing me this error whyy ???? code has no problem
asked
Tushar Rajput
1 answers
0
The name of the exported react component in the main entry should match the file name.
In the main entry (LawyerMap.jsx in your case) you should export the react component with the same name (LawyerMap not ChoroplethMap in this case)
//3. LawyerMap.jsx
import { createElement } from "react";
import { ChoroplethMap as MapComponent } from "./components/ChoroplethMap"; // Avoid name conflict
import "./ui/ChoroplethMap.css";
export function LawyerMap({ jsonData }) {
return <MapComponent jsonData={jsonData} />;
}
answered
Meisam Mahdian