Meteor React 中的 Quill Image Uploader（导入实验模块？）

Question

我正在尝试在 React 和 Meteor 中向 Quill 添加一个 ImageUpload 模块。在尝试将此功能添加到 Quill 以进行反应时，我会犯一些错误。希望有人能让我完成所有这些。这对我的编辑器来说似乎是一个非常直接的补充，但让我们看看。

第一个问题是我无法正确导入 ImageUpload 模块。可能需要一些建议才能让我度过难关。首先，我将这些行添加到我的 package.json 文件中：

{
  "type": "module",

...
    "quill-image-uploader": "^1.2.2",

并运行成功的meteor npm install。

然后我开始修改我的编辑器并想出了以下内容：

import React from 'react'



export default class PostEditor extends React.Component {
  constructor(props) {
    super(props)
    this.state = { editorHtml: '', theme: 'snow' }
    this.handleChange = this.handleChange.bind(this)
    if (typeof window !== 'undefined') {
      this.ReactQuill = require('react-quill');
      this.quillImageUploader = require("quill-image-uploader")
      this.ReactQuill.Quill.register("modules/imageUploader", this.quillImageUploader);
      require('katex');
      require('react-quill/dist/quill.snow.css');
    }
  }

  handleChange (value) {
    this.props.onChange(value);
  }

  render() {
    const ReactQuill = this.ReactQuill
    const { value } = this.props;

    

    if (typeof window !== 'undefined' && ReactQuill) {
      return (
        <ReactQuill
          onChange={this.handleChange}
          theme="snow"
          value={value}
          modules={PostEditor.modules}
        />
      )
    } else {
      return <textarea />;
    }
  }
}

PostEditor.modules = {
  toolbar: [
    [{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
    [{size: []}],
    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    [{'list': 'ordered'}, {'list': 'bullet'}, 
     {'indent': '-1'}, {'indent': '+1'}],
    ['link', 'image', 'video','formula'],
    ['clean']
  ],
  clipboard: {
    // toggle to add extra line breaks when pasting HTML:
    matchVisual: false,
  },
  imageUploader: {
    upload: file => {
      return new Promise((resolve, reject) => {
        const formData = new FormData();
        formData.append("image", file);

        fetch(
          "https://api.imgbb.com/1/upload?key=d36eb6591370ae7f9089d85875e56b22",
          {
            method: "POST",
            body: formData
          }
        )
          .then(response => response.json())
          .then(result => {
            console.log(result);
            resolve(result.data.url);
          })
          .catch(error => {
            reject("Upload failed");
            console.error("Error:", error);
          });
      });
    }
  }
}

PostEditor.formats = [
  'header', 'font', 'size',
  'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent',
  'link', 'image', 'video', 'formula'
]

// PostEditor.propTypes = {
//   placeholder: PropTypes.string,
// }

我为此得到的错误如下：

Uncaught SyntaxError: Cannot use import statement outside a module
    at eval (modules.js?hash=616c9afc25e8c793c0ce70c001c1db7ac5a8b734:65271)
    at dynamic-import.js?hash=0c8b56e0987a7736b15e9b62721475978f7e3031:134
    at fileEvaluate (modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:346)
    at Module.require (modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:248)
    at require (modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:268)
    at new PostEditor (post-editor.js:12)
    at constructClassInstance (modules.js?hash=616c9afc25e8c793c0ce70c001c1db7ac5a8b734:49022)
    at updateClassComponent (modules.js?hash=616c9afc25e8c793c0ce70c001c1db7ac5a8b734:52348)
    at beginWork (modules.js?hash=616c9afc25e8c793c0ce70c001c1db7ac5a8b734:53305)
    at performUnitOfWork (modules.js?hash=616c9afc25e8c793c0ce70c001c1db7ac5a8b734:56973)

顺便说一句，在 VSCode 中，我收到了这种类型的警告：

module "C:/TheCanonworks/node_modules/quill-image-uploader/src/quill.imageUploader"
Could not find a declaration file for module 'quill-image-uploader'. 'C:/TheCanonworks/node_modules/quill-image-uploader/src/quill.imageUploader.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/quill-image-uploader` if it exists or add a new declaration (.d.ts) file containing `declare module 'quill-image-uploader';`ts(7016)
No quick fixes available