React-Js - Integrating Xterm.js (V ^5.0.0) causing reference error when deployed on production

I am building a live terminal in react js web app. On running local host , the terminal works fine but in production the code breaks with the below error on console.

ReferenceError: Cannot access 'r' before initialization
    at new S (12320.cfcfec944a34227a5e11.bundle.js:1:135248)
    at new b (12320.cfcfec944a34227a5e11.bundle.js:1:129539)
    at new M (12320.cfcfec944a34227a5e11.bundle.js:1:27353)
    at new r.exports.i.Terminal (12320.cfcfec944a34227a5e11.bundle.js:1:264753)
    at 42919.8ded40c50ac3709077ea.bundle.js:1:578863
    at C (main.503b8d39e2b5052d0fa6.bundle.js:1:1333747)
    at Generator._invoke (main.503b8d39e2b5052d0fa6.bundle.js:1:1333500)
    at Generator.next (main.503b8d39e2b5052d0fa6.bundle.js:1:1333927)
    at r (main.503b8d39e2b5052d0fa6.bundle.js:1:1340419)
    at o (main.503b8d39e2b5052d0fa6.bundle.js:1:1340602)

Here's my code.

const Termcomponent = () => {
    useEffect(() => {
        try {
            const initTerm = async () => {
                const {
                    Terminal
                } = await import('xterm')
                term = new Terminal({
                    screenKeys: true,
                    useStyle: true,
                    cursorBlink: true,
                });
                term.open(document.getElementById('x_terminal'));
            }
            initTerm();
        } catch (ex) {
            console.log(ex)
        }
    }, [])
    return < div id = "x_terminal" > < /div>
}

Can anyone help me out here? I am using webpack with this project. Again, this logic works fine locally. but throws error on console in production.