I worked with react projects containing webpack. In this case I’m trying to run some react code inside an html page in order to start transition of a large asp.net webforms app to react SPA. But I failed to import and use autonumeric module in my jsx code. Cannot find autonumeric or reactAutonumeric or AutoNumericInput in DOM. Am I doing anything wrong with the imports?

HTML:

<script type="module">
    import reactAutonumeric from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
</script>

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/jsxLoader.min.js"></script>

<div id="page"></div>
<script src="test.jsx" type="text/babel"></script>

test.jsx:

var Page = (props) => {

    return (
        <AutoNumericInput
            inputProps={{ defaultValue: item.value1 }}
            autoNumericOptions={{ suffixText: "%" }}
        />
    );
}

const container = document.getElementById('page');
const root = ReactDOM.createRoot(container);
root.render(<Page tab="home" />);