Unable to download 'react' and 'react-dom' with import maps using System Js

529 Views Asked by At

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/[email protected]/runtime.min.js"></script>

</head>

<body>
    <div id="root"></div>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/import-map-overrides.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/system.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/extras/amd.js"></script>
    <script type="systemjs-module" src="main.js"></script>
    <script type="systemjs-importmap">
            {
              "imports": {
                "react": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js",
                "react-dom": "https://cdn.jsdelivr.net/npm/[email protected]/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 enter image description here

0

There are 0 best solutions below