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

LuisHollins

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?

JeffreyThompson2

What does your setting.tsx file look like? I think your setting.tsx is not returning valid React components.

GIS Developer
City of Arlington, Texas

LuisHollins

/** @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 UI

import { 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<Config>) => {

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 */}

<h4 style={{ marginTop: '0', marginBottom: '10px' }}>Lokation</h4>

<label htmlFor="stationSelect" style={{ display: 'block', marginBottom: '5px' }}>Vælg station:</label>

<select

id="stationSelect"

value={localStationId}

onChange={(e) => handleSettingChange('stationId', e.target.value)}

style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }}

>

{stationOptions.map(option => (

{option.label}

</option>

))}

</select>

</div>

{/* Sektion for Dato og Tidspunkt */}

<h4 style={{ marginTop: '0', marginBottom: '10px' }}>Dato og Tidspunkt</h4>

<input

id="dateInput"

type="date"

value={localSelectedDate}

onChange={(e) => handleSettingChange('selectedDate', e.target.value)}

style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }}

/>

</div>

<div>

<label htmlFor="timeInput" style={{ display: 'block', marginBottom: '5px' }}>Vælg tidspunkt:</label>

<input

id="timeInput"

type="time"

value={localSelectedTime}

onChange={(e) => handleSettingChange('selectedTime', e.target.value)}

style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }}

/>

</div>

{/* Ny Opdateringsknap i settings-panelet */}

<Button

onClick={handleRefreshFromSettings}

style={{

marginTop: '20px',

backgroundColor: '#007bff',

color: 'white',

border: 'none',

borderRadius: '5px',

padding: '10px 20px',

cursor: 'pointer',

width: '100%' // Gør knappen bred i settings-panelet

}}

>

Opdater data i Widget

</Button>

</div>

);

};

export default Setting;

JeffreyThompson2

https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-inva...

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?

GIS Developer
City of Arlington, Texas

LuisHollins

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.