React-sketch 给出错误“Uncaught TypeError: Cannot convert undefined or null to object at Function.getPrototypeOf”？答案

【问题标题】：React-sketch is giving an error "Uncaught TypeError: Cannot convert undefined or null to object at Function.getPrototypeOf"?React-sketch 给出错误“Uncaught TypeError: Cannot convert undefined or null to object at Function.getPrototypeOf”？
【发布时间】：2021-06-02 05:54:39
【问题描述】：

我正在使用一个名为 react-sketch 的包。我使用 CRA 命令 npx create-react-app app-name --template typescript 创建了一个新的 react typescript 应用程序。这是我在App.tsx 中唯一的文件更改。

import React from 'react';
import { SketchField, Tools } from 'react-sketch';
import './App.css';

function App() {
  return (
    <div className="App" style={{ backgroundColor: 'black' }}>
      <SketchField width="100%" height="100%" widthCorrection={0} tool={Tools.Pencil} lineColor="#3182CE" lineWidth={3} />
    </div>
  );
}

export default App;

另外，由于这个包没有@types，我创建了一个名为 types.d.ts 的文件并将这一行添加到其中

declare module 'react-sketch';

问题

现在当我运行npm start 时，它工作得非常好。但是，如果我执行 npm build（基本上是 react-scripts 构建），然后执行 serve -s build，然后在浏览器控制台窗口中，我会收到此错误

utils.js:48 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.getPrototypeOf (<anonymous>)
    at Object.<anonymous> (utils.js:48)
    at a ((index):1)
    at Object.<anonymous> (URL.js:4)
    at a ((index):1)
    at Object.<anonymous> (webidl2js-wrapper.js:3)
    at a ((index):1)
    at Object.<anonymous> (index.js:3)
    at a ((index):1)
    at Object.<anonymous> (api.js:7)
(anonymous) @ utils.js:48
a @ (index):1
(anonymous) @ URL.js:4
a @ (index):1
(anonymous) @ webidl2js-wrapper.js:3
a @ (index):1
(anonymous) @ index.js:3
a @ (index):1
(anonymous) @ api.js:7
(anonymous) @ 2.8c3dddb9.chunk.js:2
a @ (index):1
(anonymous) @ index.js:1
a @ (index):1
1087 @ main.a155cba6.chunk.js:1
a @ (index):1
r @ (index):1
t @ (index):1
(anonymous) @ main.a155cba6.chunk.js:1

由于这是第三方软件包，我不知道如何修复它。如果有办法解决这个问题，我想向那个开源 repo 提出一个 PR，或者自己使用那个修复，直到这个包得到修复。我应该如何进一步调试？

如果你想模拟这个，只需使用 CRA 创建一个新的 react typescript 应用程序，然后复制我提供的代码。

【问题讨论】：

标签： reactjs typescript types create-react-app typescript-typings

【解决方案1】：

所以，到目前为止，这不是最佳解决方案，但它是“一个”解决方案，让我能够成功地为使用 react-sketch 的项目创建构建。我基本上所做的是克隆 react-sketch 存储库，并在我的项目中的组件下创建了一个名为“ReactSketch”的文件夹，并将所有文件从 react-sketch 存储库中的src 文件夹复制到那里，然后在我导入的任何地方npm 包 import {SketchField, Tools} from 'react-sketch'; 我用import {SketchField, Tools} from '......components/ReactSketch'; 替换它以从组件文件夹中导入它，所以基本上我复制了我项目中组件的整个源代码，这就是诀窍，你只需要安装似乎是唯一依赖项的结构它使用。

【讨论】：