1927756 - fiservapp.com - The login page does not load

Status: NEW

(Web Compatibility :: Site Reports, defect, P3)

Description

[Raul Bucata]

Environment:
Operating system: Windows 10
Firefox version: Firefox 131.0.3 (release)

Preconditions:

• Clean profile

Steps to reproduce:

1. Navigate to: https://merchantcenter.fiservapp.com/#/dashboard
2. Observe

Expected Behavior:
The login page loads

Actual Behavior:
Blank page

Notes:

• Reproducible on the latest Firefox Release and Nightly
• Reproducible regardless of the ETP setting
• Works as expected using Chrome
• Reloading the page multiple times solves the issue

---

Created from webcompat-user-report:e1788437-cf0b-4342-a886-910c7b68795b

Comment 1

[Jeff Muizelaar [:jrmuizel]]

TypeError: can't access property "addEventListener", t is undefined
    MM https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    rl https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    wc https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    lc https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    Va https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    Cc https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    Cc https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    ac https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    w https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    T https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
main.b686f0c0.js:2:438355
    fs https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    callback https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    Bi https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    xl https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    bl https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    yl https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    Cc https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    Cc https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    lc https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    Va https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    Cc https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    Cc https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    ac https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    w https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2
    T https://merchantcenter.fiservapp.com/static/js/main.b686f0c0.js:2

Comment 2

[Jeff Muizelaar [:jrmuizel]]

There are source maps that work in Chrome for this site:

    const { t } = useTranslation();

    let [state, setState] = useState<IState>({
        shortcuts:[],
        showShortCutsModal:false,
        text:""
    });
    let fooRef:any;
    useEffect(() => {
        fooRef.addEventListener('touchstart', startListening, { passive: false });
    }, []);

It looks like fooRef gets set here:

            <a 
                href={window.location.href}
                ref={ref => fooRef = ref}
                className="theme-layout nav-link-bg layout-setting"
                onMouseUp={processText}
                onMouseDown={startListening}
                onTouchEnd={processText}
            >

Comment 3

[Jeff Muizelaar [:jrmuizel]]

Actually more context from Dictaphone.tsx file makes it clear what's breaking here:

let Dictaphone: React.FC<IProps> = () => {


    const { t } = useTranslation();

    let [state, setState] = useState<IState>({
        shortcuts:[],
        showShortCutsModal:false,
        text:""
    });
    let fooRef:any;
    useEffect(() => {
        fooRef.addEventListener('touchstart', startListening, { passive: false });
    }, []);


    const {
        transcript,
        listening,
        resetTranscript,
        browserSupportsSpeechRecognition,
        finalTranscript,

    } = useSpeechRecognition();

...

    if (!browserSupportsSpeechRecognition) {
        return (<span>Browser doesn't support speech recognition.</span>);
    }
    return (
        <React.Fragment>
            <Modal show={state.showShortCutsModal}>
                <div className="card border p-0 pb-3">
                    <div className="card-header border-0 pt-3">
                        <div className="card-options">
                            <a href={window.location.href} className="card-options-remove" onClick={() =>
                                hideModal()}><i className="fe fe-x"></i></a>
                        </div>
                    </div>
                    <div className="card-body text-center">
                        <div className="card-body">
                            <div className="">
                                <ul className="list-group">
                                    {
                                            state.shortcuts.map(shortcut => {
                                                let style="fa-list";
                                                return (
                                                    <li className="list-group-item shotcut-item">
                                                        <a  onClick={() =>goToShortcut(shortcut)}>
                                                            <i className={style +" fa-solid me-2 shotcut-item-left-icon"} aria-hidden="true"></i>{shortcut.description}
                                                            <i className="fa-solid fa-circle-play shotcut-item-right-icon"></i>
                                                        </a>
                                                    </li>
                                                )
                                            })
                                    }

                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className="card-footer text-center border-0 pt-0">
                        <div className="row">
                            <div className="text-center">
                                <a href={window.location.href} className="btn btn-white me-2"  onClick={() =>
                                    hideModal()}>{t('cancel')}</a>
                                <a href={window.location.href} className="btn me-2 btn-danger"  onClick={() =>
                                    hideModal()}>{t('shortcutnotfound')}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </Modal>
            <a 
                href={window.location.href}
                ref={ref => fooRef = ref}
                className="theme-layout nav-link-bg layout-setting"
                onMouseUp={processText}
                onMouseDown={startListening}
                onTouchEnd={processText}
            >
                <span className="dark-layout icon-svg-container">
                    <IconMicrophoneSVG className={`icon-svg icon-svg--size ${!listening || 'microphone-active'}`} ></IconMicrophoneSVG>
                    <span className="fs-16 d-none d-xl-block text-gray header-text">{t("microphone")}</span>
                    {/* <i className={"fa-solid fa-microphone header-icon "+(listening ? 'microphone-active' : 'microphone-inactive') } ></i> */}
                </span>
            </a>
            <div className="tooltip bs-tooltip-bottom dictaphone-tooltip" hidden={transcript === null || transcript.length === 0}>
                <div className="tooltip-arrow"></div>
                <div className="tooltip-inner">
                    {state.text.length>0?state.text:transcript}
                </div>
            </div>
        </React.Fragment>
        /*
        <div>
            <p>Microphone: {listening ? 'on' : 'off'}</p>
        <button onClick={() =>SpeechRecognition.startListening()}>Start</button>
        <button onClick={() =>SpeechRecognition.stopListening()}>Stop</button>
        <button onClick={() =>resetTranscript()}>Reset</button>
        <p>{transcript}</p>
        </div>
        */
);
}
export default Dictaphone;

browserSupportsSpeechRecognition is false in Firefox and so (<span>Browser doesn't support speech recognition.</span>); gets returned instead of the JSX containing ref={ref => fooRef = ref}

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

Since nightly and release are affected, beta will likely be affected too.
For more information, please visit BugBot documentation.