Error:
Description:
I am playing with esm.run (es module cdn powered by jsdelivr), I want to import react directly from remote cdn.
With the help of importmap, the browser can transform from import React from 'react' to import React from 'https://esm.run/react@18'.
Then I got the above error with code provided below. Would be nice if anyone could help on this.
Full code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="importmap">
{
"imports": {
"react": "https://esm.run/react@18",
"react-dom": "https://esm.run/react-dom@18"
}
}
</script>
<script src="/dist/index.js" type="module"></script>
</body>
</html>
/dist/index.js (bundled)
(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode("")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
import require$$0 from "react";
import ReactDom from "react-dom";
var jsxRuntimeExports = {};
var jsxRuntime = {
get exports() {
return jsxRuntimeExports;
},
set exports(v) {
jsxRuntimeExports = v;
}
};
var reactJsxRuntime_production_min = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var f = require$$0, k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: true, ref: true, __self: true, __source: true };
function q(c, a, g) {
var b, d = {}, e = null, h = null;
void 0 !== g && (e = "" + g);
void 0 !== a.key && (e = "" + a.key);
void 0 !== a.ref && (h = a.ref);
for (b in a)
m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
if (c && c.defaultProps)
for (b in a = c.defaultProps, a)
void 0 === d[b] && (d[b] = a[b]);
return { $$typeof: k, type: c, key: e, ref: h, props: d, _owner: n.current };
}
reactJsxRuntime_production_min.Fragment = l;
reactJsxRuntime_production_min.jsx = q;
reactJsxRuntime_production_min.jsxs = q;
(function(module) {
{
module.exports = reactJsxRuntime_production_min;
}
})(jsxRuntime);
const jsx = jsxRuntimeExports.jsx;
const App = () => {
require$$0.useEffect(() => {
console.log("我是demo");
}, []);
return /* @__PURE__ */ jsx("div", { children: "我是demo rendssder" });
};
ReactDom.render(/* @__PURE__ */ jsx(App, {}), document.getElementById("root"));
export {
App as default
};
