Having attempted to utilize CommonJS, TypeScript, and React together, I encountered an issue with the initial code loading:
Index.html
<script type="text/javascript">
function loadScript(url)
{
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
head.appendChild(script);
}
loadScript('./Scripts/react.js');
loadScript('./Scripts/react-dom.js');
loadScript('./Scripts/require.js');
loadScript('./Scripts/index.js');
</script>
The loading file: index.ts
var rootElement;
function _onLoad() {
rootElement = rootElement || document.getElementById('root');
ReactDOM.render(React.createElement(DataSample, null), rootElement);
}
function _onUnload() {
if (rootElement) {
ReactDOM.unmountComponentAtNode(rootElement);
}
}
var isReady = document.readyState === 'interactive' || document.readyState === 'complete';
if (isReady) {
_onLoad();
}
else {
window.onload = _onLoad;
}
window.onunload = _onUnload;
Error: *Uncaught ReferenceError: require is not defined at index.tsx:1 import * as React from 'react';*
I have webpack installed and can create bundles, but for development purposes, I prefer not to. Is there another loader I should consider using? Currently, I am using requirejs, which I know is primarily designed for AMD.
Thank you in advance.