Experience builder 1.17, Parsing error when making the setting.tsx for a custom widget

Question

I have made a widget which works, but cant seem to figure out what i have done wrong in the setting.tsx. And i cant get rid of this error.

Parsing error: C:\Users\pc1\Desktop\arcgis-experience-builder-1.17\ArcGISExperienceBuilder\client\your-extensions\widgets\dmi-weather-widget\src\setting\setting.tsx was not found by the project service. Consider either including it in the tsconfig.json or including it in allowDefaultProject.eslint

In the widget tab it gives me this error,

Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

which corrosponds to : Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: [missing argument].[missing argument].

Anyone that has seen this or something like it before?

Monithor · Answer

Hi Jeffrey,

I continued to look into what could be the reason for this and i found out that the Dist folder was placed differently in my folder structure than in the documentation for the structure, so it was the manifest' linkage to the setting.tsx which where the problem.

JeffreyThompson2 · Answer

https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string

StackOverflow says this error can be generated in many different ways.

My linter found a problem on line 5 of your code. 
import { AllWidgetSettingProps } from 'jimu-app';

jimu-app does not exist. AllWidgetSettingsProps can be imported from jimu-for-builder like this:

import { AllWidgetSettingProps } from 'jimu-for-builder';

Does that fix the problem?

Monithor · Answer

/** @jsx jsx */// src/setting/setting.tsx - MED OPDATERINGSKNAP import React, { useEffect, useState } from 'react';import { AllWidgetSettingProps } from 'jimu-app';import { jsx } from 'jimu-core';// Importér Button komponent fra Jimu UIimport { Button } from 'jimu-ui'; // Da vi undgår Jimu UI komponenter for inputfelter, behøver vi ikke SettingSection, SettingRow, Select, DatePicker her.// Men vi importerer Button, som er en Jimu UI komponent. Hvis Button fejler, må vi bruge en simpel HTML-knap. interface Config { stationId: string; selectedDate: string; selectedTime: string; refreshCounter: number; // Tilføjet ny konfigurationsproperty} const stationOptions = [ { value: '06041', label: 'København, Landbohøjskolen (06041)' }, { value: '06040', label: 'Aarhus, Universitetet (06040)' }, { value: '05185', label: 'Odense, Lufthavnen (05185)' }, { value: '06180', label: 'Tirstrup, Lufthavnen (06180)' }, { value: '06030', label: 'Esbjerg, Lufthavnen (06030)' },]; const Setting = (props: AllWidgetSettingProps) => { const { config, onSettingChange } = props; const [localStationId, setLocalStationId] = useState(config.stationId || '06041'); const [localSelectedDate, setLocalSelectedDate] = useState(config.selectedDate || ''); const [localSelectedTime, setLocalSelectedTime] = useState(config.selectedTime || ''); useEffect(() => { setLocalStationId(config.stationId || '06041'); setLocalSelectedDate(config.selectedDate || ''); setLocalSelectedTime(config.selectedTime || ''); }, [config.stationId, config.selectedDate, config.selectedTime]); const handleSettingChange = (key: keyof Config, value: any) => { let updatedValue = value; if (key === 'selectedDate' || key === 'selectedTime') { updatedValue = value || ''; } switch (key) { case 'stationId': setLocalStationId(updatedValue); break; case 'selectedDate': setLocalSelectedDate(updatedValue); break; case 'selectedTime': setLocalSelectedTime(updatedValue); break; default: break; } onSettingChange({ ...config, [key]: updatedValue }); }; // Håndterer klik på opdateringsknappen i settings-panelet const handleRefreshFromSettings = () => { // Forøg refreshCounter i konfigurationen for at udløse opdatering i widget.tsx onSettingChange({ ...config, refreshCounter: (config.refreshCounter || 0) + 1 // Sørg for at starte fra 0 hvis undefined }); console.log("Opdateringsknap klikket i settings. refreshCounter:", (config.refreshCounter || 0) + 1); }; return (

{/* Sektion for Lokation */}

Lokation

Vælg station: handleSettingChange('stationId', e.target.value)} style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }} > {stationOptions.map(option => ( ))}

{/* Sektion for Dato og Tidspunkt */}

Dato og Tidspunkt

Vælg dato: handleSettingChange('selectedDate', e.target.value)} style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }} />

Vælg tidspunkt: handleSettingChange('selectedTime', e.target.value)} style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }} />

{/* Ny Opdateringsknap i settings-panelet */} Opdater data i Widget

);}; export default Setting;