Error: Calcite-Button sometimes doesn't load "Failed to construct 'URL': Invalid base URL"

[abrown8]

Hi all

My calcite-button component sometimes does not load (it's annoyingly temperamental). The error is receive is: "Failed to construct 'URL': Invalid base URL".

Any help in fixing this error would be appreciated!

I am using React (vite) and I want a button that opens a popover, which then has inputs to filter the feature layer.

Additionally, the commented out layer.Views.find() does not work and I instead have to hard code layerView.items[0] which isn't ideal.

Code sample is below:

Header.jsx which is called as a component in Main.jsx

import React, { useState, useEffect } from 'react';
import './styles/header.css';
import './styles/style.css';
import * as reactiveUtils from "@arcgis/core/core/reactiveUtils.js";
import LayerView from "@arcgis/core/views/layers/LayerView.js";
import "@esri/calcite-components/dist/calcite/calcite.css";
import "@esri/calcite-components/dist/components/calcite-button";
import "@esri/calcite-components/dist/components/calcite-popover";
import "@esri/calcite-components/dist/components/calcite-input";
import "@esri/calcite-components/dist/components/calcite-input-number";
import "@esri/calcite-components/dist/components/calcite-input-message";
import { CalciteButton, CalcitePopover, CalciteInputNumber, CalciteInputMessage } from "@esri/calcite-components-react";


async function filterConfidence(webmap, view, minVal, maxVal) {
    const psLayer = webmap.layers.find((layer) => layer.title === "PS");

    const psLayerView = view.layerViews.items[0];
    //const psLayerView = view.layerViews.find((layer) => layer.title === "PS");
    console.log(psLayerView)
    await reactiveUtils.whenOnce(() => !LayerView.updating);

    let expression = ''
    console.log(minVal, maxVal);
    if ((minVal !== null || minVal !== '') && (maxVal !== null || maxVal !== '')) {
        expression = "coherence <= " + maxVal + " AND coherence >= " + minVal
        console.log(1)
    } else if ((minVal !== null || minVal !== '') && (maxVal === null || maxVal === '')) {
        expression = "coherence >= " + minVal
        console.log(2)
    } else if ((maxVal !== null || maxVal !== '') && (minVal === null || minVal === '')) {
        expression =  "coherence <= " + maxVal
        console.log(3)
    }

    console.log(expression)
    try {
        if (expression !== '') {
            psLayerView.filter = {
                where: expression
            };
        }
    } catch(error) {
        console.log("Filter failed: ", error);
    }

}

function Header(props) {
    const [minValue, setMinValue] = useState(null);
    const [maxValue, setMaxValue] = useState(null);

    function InputMessage({minValue, maxValue}) {
        if (maxValue < minValue) {
            return <CalciteInputMessage icon="exclamation-mark-triangle" >Should be greater or equal to {minValue} </CalciteInputMessage>
        }
    }

    useEffect(() => {filterConfidence(props.webmap, props.view, minValue, maxValue)}, [minValue, maxValue])
    

    return (
        <div id="header-panel">
            <div className="header-title">
                ENVI Inform Ground Motion Monitoring Service  
            </div>
            <div id='header-container'>
                <CalcitePopover label="Set confidence filter" reference-element="popover-button" auto-close placement="bottom" overlay-positioning="fixed" offset-distance="0" offset-skidding="0" pointer-disabled calcite-hydrated>
                    <div className='popover-container'>
                        <div className='popover-selectors'>
                            <div className='flex items-baseline'>
                                <div className='flex-auto'>
                                    <div className='flex'>
                                        <CalciteInputNumber placeholder="Minimum Confidence" alignment='start' number-button-type='vertical' scale='m' status='idle' step={0.1} min={0} max={1}
                                            value={minValue} onCalciteInputNumberChange={(e) => setMinValue(e.target.value)} />
                                        <CalciteInputNumber placeholder="Maximum Confidence" alignment='start' number-button-type='vertical' scale='m' status='idle' step={0.1} min={0} max={1}
                                            value={maxValue} onCalciteInputNumberChange={(e) => setMaxValue(e.target.value)} />
                                            value range: {minValue} to {maxValue}

                                        <InputMessage minValue={minValue} maxValue={maxValue}></InputMessage>
                                    
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </CalcitePopover>
                <calcite-button appearance="outline-fill" id="popover-button" calcite-hydrated>
                    Filter by Confidence
                </calcite-button>
            </div>
        </div>
    )
}

export default Header;