I'm not able to initalize an instance of firepad in react.js

[abhipra1996]

Version info

*Firebase:"firebase": "^7.21.1"*

*Firepad:https://firepad.io/releases/v1.5.10/firepad.min.js*

*Ace:"react-ace": "^9.1.3"*

CodeMirror:

Other (e.g. Node, browser, operating system) (if applicable):

Test case

Steps to reproduce

import React, { useEffect, useState } from 'react' import Firebase from 'firebase'; import AceEditor from 'react-ace';

const Pad = (props) => {

const [code, setCode] = useState('')

const firebaseConfig = {
    apiKey: "########",
    authDomain: "######",
    databaseURL: "#######",
};

const getExampleRef = () => {
    var ref = Firebase.database().ref();
    var hash = window.location.hash.replace(/#/g, '');
    if (hash) {
        ref = ref.child(hash);
    } else {
        ref = ref.push(); // generate unique location.
        window.location = window.location + '#' + ref.key; // add it as a hash to the URL.
    }
    if (typeof console !== 'undefined') {
        console.log('Firebase data: ', ref.toString());
    }
    return ref;
}

useEffect(() => {
    // Initialize Firebase
    Firebase.initializeApp(firebaseConfig);

    var firepadRef = getExampleRef()

    const firepad = global.window.Firepad.fromACE(firepadRef, global.ace, {
        userId: 'user_1',
        userColor: '#FFA500',
    })
}, [])

const setTextInEditor = (newValue) => {
    setCode(newValue)
}

return (
    <>
        <AceEditor
            placeholder="You're code goes here....."
            mode="sh"
            theme="chrome"
            name="firepad"
            // onLoad={() => getStartingCode(currentLanguage)}
            onChange={newValue => setTextInEditor(newValue)}
            fontSize={16}
            width={'100%'}
            showPrintMargin={true}
            showGutter={true}
            highlightActiveLine={true}
            value={code}
            style={{ border: '1px solid #e5e5e5' }}
            setOptions={{
                enableBasicAutocompletion: true,
                // enableLiveAutocompletion: true,
                enableSnippets: true,
                showLineNumbers: true,
                tabSize: 4,
            }} />
    </>
)

}

export default Pad;

Expected behavior

I should get a firepad initialized

Actual behavior

for the below line of code i'm getting the error :-

const firepad = global.window.Firepad.fromACE(firepadRef, global.ace, { userId: 'user_1', userColor: '#FFA500', })

error :-

Uncaught TypeError: p is not a constructor at new f (firepad.min.js:1) at Function.f (firepad.min.js:1) at eval (index.jsx?4518:100) at commitHookEffectListMount (react-dom.development.js:19731) at commitPassiveHookEffects (react-dom.development.js:19769) at HTMLUnknownElement.callCallback (react-dom.development.js:188) at Object.invokeGuardedCallbackDev (react-dom.development.js:237) at invokeGuardedCallback (react-dom.development.js:292) at flushPassiveEffectsImpl (react-dom.development.js:22853) at unstable_runWithPriority (scheduler.development.js:653) at runWithPriority$1 (react-dom.development.js:11039) at flushPassiveEffects (react-dom.development.js:22820) at react-dom.development.js:22699 at workLoop (scheduler.development.js:597) at flushWork (scheduler.development.js:552) at MessagePort.performWorkUntilDeadline (scheduler.development.js:164)

[abhipra1996]

useRef() resolved the issue

[chrischang7312]

@abhipra1996 How did you get it to work with useRef()?