[英]react_dom_development is undefined in Deno React project
I wanted to try out Deno, so I decided to make a simple single-page React app.我想尝试一下 Deno,所以我决定制作一个简单的单页 React 应用程序。 But, when I try to pull in ReactDOM from the CDN, I get a console error: react_dom_development_js_2 is undefined
.但是,当我尝试从 CDN 中提取 ReactDOM 时,我得到一个控制台错误: 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?我认为发生了什么是它无法解析 ReactDOM CDN,但我可以从我的浏览器访问它? 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.我还尝试用浏览器将其解析为( https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js )替换它,但我仍然遇到同样的错误。 Maybe I'm using the deno bundle
wrong?也许我用错了deno bundle
?
index.jsx索引.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
<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,我运行deno bundle index.jsx index.bundle.js
来创建我的包,
index.bundle.js 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");
The issue here is due to the typical React and ReactDOM packages being written as commonJS packages.这里的问题是由于典型的 React 和 ReactDOM 包被编写为 commonJS 包。
Deno by default requires all modules to be written using ES Modules (ESM). Deno 默认要求所有模块都使用 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. https://github.com/pikapkg/react是使用 ESM 的 React 和 ReactDOM 的构建,因此它们应该可以在 Deno 中导入。 link with CDN与 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 deno 中有一个标准库模块可让您使用 commonJS 模块,但您需要小心使用它们,特别是如果它们需要特定于节点的功能: https://deno.land/std/node#commonjs-module-loading
TypeScript does not allow imports from html or that end in a file extension. TypeScript 不允许从 html 或以文件扩展名结尾的导入。 So for now you can ignore them using // @ts-ignore
which will allow deno to work.所以现在你可以使用// @ts-ignore
它们,这将允许 deno 工作。
There is a visual studio code extension for deno but at the time of writing it seems to be a bit unstable. deno 有一个 Visual Studio 代码扩展,但在撰写本文时它似乎有点不稳定。 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 以在每个项目的基础上工作,例如.vscode/settings.json
。
{
"deno.enable": true
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.