问题：

Deno react项目中未定义react\u dom\u开发

桂和同

2023-03-14

我想尝试一下Deno，所以我决定制作一个简单的单页React应用程序。但是，当我试图从CDN中拉入ReactDOM时，我得到一个控制台错误：react\u dom\u development\u js\u 2未定义。

我想是怎么回事是它不能解决ReactDOM CDN，但我可以从我的浏览器到达它？我也尝试用浏览器解析它的内容来替换它（https://unpkg.com/react-dom@16.13.1 /umd/react-dom.development.js），但我最终还是出现了同样的错误。也许我使用deno bundle错误？

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>

我运行deno bundleindex.jsxindex.bundle.js来创建我的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个答案

督嘉言

2023-03-14

TypeScript不允许从html或以文件扩展名结尾的导入。所以现在您可以使用/@ts ignore忽略它们，这将允许deno工作。

有一个用于deno的可视化工作室代码扩充，但在撰写本文时，它似乎有点不稳定。如果和当它正常工作，你将能够配置deno工作在每个项目的基础上，通过定义一个设置文件夹在你的项目的根目录，例如. vscode/settings.json。

{
  "deno.enable": true
}

闻枫

2023-03-14

这里的问题是由于典型的React和ReactDOM包被编写为commonJS包。

默认情况下，Deno要求所有模块都使用ESM编写。https://github.com/pikapkg/react是使用ESM的React和ReactDOM的构建，因此它们应该可以在Deno中导入。与CDN的链接

deno中有一个标准的库模块，允许您使用commonJS模块，但您需要小心使用它们，特别是当它们需要特定于节点的功能时：https://deno.land/std/node#commonjs-模块加载

类似资料：

React router TypeError:\u this.props.history未定义

我使用的反应路由器与反应js和我下面他们的留档，但面临这个错误编译时会显示错误，这是我的index.js文件这是我的App.js档案
未定义React中的jQuery

问题内容：嗨，我只是想接收一个ajax请求，但是问题是在React中没有定义jquery。反应版本是错误信息我有两个文件：问题答案：尝试添加到您的项目中，例如或者如果您使用凉亭然后
Laravel-未定义路由[service.leave\u requests.allLeaves]

在我的Laravel-5.8项目中，我有一个控制器：视图刀片是：服务\离开\请求\所有离开。刀身路由\网络。php 当我单击此路线时：我得到了这个错误：未定义路由[service.leave\u requests.allLeaves]。我如何解决它。谢谢你
自定义项目

自定义脚本 Gradle构建脚本的标准名称是build.gradle，在一个多项目构建的环境中，你想自定义你的构建脚本名称来显得高大上一点，因为多个项目有相同的构建脚本名称可能会混淆，接下来介绍如何使用自定义的脚本名称。还是之前那个例子，假设所有的子项目路径都是以todo-开头，比如web子项目就是在todo-web目录下，构建脚本名称应该清晰的表示它的作用，如下图所示：要使这个结构起作用关键
错误：未定义的类常量“MYSQL\u ATTR\u USE\u BUFFERED\u QUERY”

目前我收到了这种信息，我不知道如何修复它。命令告诉我PDO和PDO_mysql就在那里。我将Drupal-8与php7一起使用。Ubuntu 18.04上的1.20。1 LTS [Tue Sep04 09:27:48.210064 2018][php7：通知][pid 2183][客户端10.56.99.1:53758]错误：未定义的类常量'MYSQL_ATTR_USE_BUFFERED_QU
Laravel错误-路径[evaluation.evaluation\u goals.manager\u employee\u goal/{id？}]未定义

在Laravel-5.8项目中，从这个控制器：我航行到：使用：当我想导航回：公共功能manager_employee_goal（$id）我用过：但我有一个错误：路径[evaluation.evaluation\u goals.manager\u employee\u goal/{id？}]未定义以下是我的路线/web.php：我如何解决它？谢谢你

Deno react项目中未定义react\u dom\u开发

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档