react_dom_development is undefined in Deno React project
Question
I wanted to try out Deno, so I decided to make a simple single-page React app. But, when I try to pull in ReactDOM from the CDN, I get a console error: react_dom_development_js_2 is undefined .
I think what's going on is it can't resolve the ReactDOM CDN, but I can reach it from my browser? I also tried replacing it with what the browser resolves it to ( https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js ), but I still end up with the same error. Maybe I'm using the deno bundle wrong?
index.jsx
import { React } from "https://unpkg.com/react@16/umd/react.development.js";
import { ReactDOM } from "https://unpkg.com/react-dom@16/umd/react-dom.development.js";
ReactDOM.render(<p>Hello</p>, document.findElementById("app"));
index.html
<html>
<head>
<title>Test with Deno</title>
</head>
<body>
<div id="app"></div>
<script src="index.bundle.js"></script>
</body>
</html>
I run deno bundle index.jsx index.bundle.js to create my bundle,
index.bundle.js
// Copyright 2018-2020 the Deno authors. All rights reserved. MIT license.
// This is a specialised implementation of a System module loader.
// @ts-nocheck
/* eslint-disable */
let System, __instantiateAsync, __instantiate;
(() => {
const r = new Map();
System = {
register(id, d, f) {
r.set(id, { d, f, exp: {} });
},
};
async function dI(mid, src) {
let id = mid.replace(/\.\w+$/i, "");
if (id.includes("./")) {
const [o, ...ia] = id.split("/").reverse(),
[, ...sa] = src.split("/").reverse(),
oa = [o];
let s = 0,
i;
while ((i = ia.shift())) {
if (i === "..") s++;
else if (i === ".") break;
else oa.push(i);
}
if (s < sa.length) oa.push(...sa.slice(s));
id = oa.reverse().join("/");
}
return r.has(id) ? gExpA(id) : import(mid);
}
function gC(id, main) {
return {
id,
import: (m) => dI(m, id),
meta: { url: id, main },
};
}
function gE(exp) {
return (id, v) => {
v = typeof id === "string" ? { [id]: v } : id;
for (const [id, value] of Object.entries(v)) {
Object.defineProperty(exp, id, {
value,
writable: true,
enumerable: true,
});
}
};
}
function rF(main) {
for (const [id, m] of r.entries()) {
const { f, exp } = m;
const { execute: e, setters: s } = f(gE(exp), gC(id, id === main));
delete m.f;
m.e = e;
m.s = s;
}
}
async function gExpA(id) {
if (!r.has(id)) return;
const m = r.get(id);
if (m.s) {
const { d, e, s } = m;
delete m.s;
delete m.e;
for (let i = 0; i < s.length; i++) s[i](await gExpA(d[i]));
const r = e();
if (r) await r;
}
return m.exp;
}
function gExp(id) {
if (!r.has(id)) return;
const m = r.get(id);
if (m.s) {
const { d, e, s } = m;
delete m.s;
delete m.e;
for (let i = 0; i < s.length; i++) s[i](gExp(d[i]));
e();
}
return m.exp;
}
__instantiateAsync = async (m) => {
System = __instantiateAsync = __instantiate = undefined;
rF(m);
return gExpA(m);
};
__instantiate = (m) => {
System = __instantiateAsync = __instantiate = undefined;
rF(m);
return gExp(m);
};
})();
System.register(
"index",
[
"https://unpkg.com/react@16/umd/react.development.js",
"https://unpkg.com/react-dom@16/umd/react-dom.development.js",
],
function (exports_1, context_1) {
"use strict";
var react_development_js_1, react_dom_development_js_1;
var __moduleName = context_1 && context_1.id;
return {
setters: [
function (react_development_js_1_1) {
react_development_js_1 = react_development_js_1_1;
},
function (react_dom_development_js_1_1) {
react_dom_development_js_1 = react_dom_development_js_1_1;
},
],
execute: function () {
react_dom_development_js_1.ReactDOM.render(
react_development_js_1.React.createElement("p", null, "Hello"),
document.findElementById("app"),
);
},
};
},
);
__instantiate("index");
2 answers
solution1
2 ACCPTED 2020-05-30 20:03:25
The issue here is due to the typical React and ReactDOM packages being written as commonJS packages.
Deno by default requires all modules to be written using ES Modules (ESM). https://github.com/pikapkg/react is a build of React and ReactDOM that use ESM, so they should be importable in Deno. link with CDN
There is a standard library module in deno that lets you use commonJS modules, though you'll need to be careful with them especially if they require node specific functionality: https://deno.land/std/node#commonjs-module-loading
solution2
0 2020-05-30 19:43:53
TypeScript does not allow imports from html or that end in a file extension. So for now you can ignore them using // @ts-ignore which will allow deno to work.
There is a visual studio code extension for deno but at the time of writing it seems to be a bit unstable. If and when its working correctly you would be able to config deno to work on a per project basis by defining a settings folder in the root of your project eg .vscode/settings.json .
{
"deno.enable": true
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.