0
259
ViewsUnable to download 'react' and 'react-dom' with import maps using System Js
I am using System Js to get react and react dom from CDN but when I look at my network tab I see other scripts getting downloaded but react and react-dom are not coming their .
Following is my index.html file with importmaps
<!DOCTYPE html>
<html>
<head>
<title>Import Maps</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/regenerator-runtime@0.13.7/runtime.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/import-map-overrides@2.2.0/dist/import-map-overrides.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/extras/amd.js"></script>
<script type="systemjs-module" src="main.js"></script>
<script type="systemjs-importmap">
{
"imports": {
"react": "https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"
}
}
</script>
</body>
This is my main.js file
System.register('myBundle', ['react', 'react-dom'], function () {
var React, ReactDOM;
return {
setters: [
function (module) {
React = module['default'];
},
function (module) {
ReactDOM = module['default'];
},
],
execute: function () {
const HelloComponent = () => {
return /*#__PURE__*/ React.createElement(
'h1',
null,
'Hello World'
);
};
ReactDOM.render(
/*#__PURE__*/ React.createElement(HelloComponent, null),
document.getElementById('root')
);
},
};
});
This is my network tab screenshot , as you can see no react and reactdom here
·
Juan Pablo Isaza
Answer question