时间戳

首页 > 解决方案 > React-sketch 给出错误“Uncaught TypeError: Cannot convert undefined or null to object at Function.getPrototypeOf”？

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

问题描述

我正在使用一个名为 react-sketch 的包。我使用 CRA 命令创建了一个新的 react typescript 应用程序npx create-react-app app-name --template 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 应用程序，然后复制我提供的代码。

标签： reactjstypescripttypescreate-react-apptypescript-typings

解决方案

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

推荐阅读