Javascript FilePond插件导入错误-找不到'；的声明文件'；

我在导入所有插件时看到了相同的问题。

已验证它们在文件上载的浏览器返回中未按预期工作。我正在尝试对照片进行编码，以便上传到MongoDB Atlas。

这似乎是某种类型的打字脚本问题。我一直无法找到解决办法。将VS代码与React一起使用。
到目前为止已经试过了

• 用Thread vs NPM重新安装所有插件，并在包装前添加@type/
• 我创建了一个declarations.d.ts文件来声明（如建议的那样）。该文件与filepond/types/一起放在/src根目录中。可能需要放在另一个目录中

• 从filepond plugin package.json“main”中删除“.js”：“dist/filepond plugin file encode.js”
• 尝试从“/fullpath/filepond plugin file encode.js”导入FilePondPluginFileEncode
• 卸下FilePond和FilePond并重新安装

我没有发现下面的代码有任何问题，只是响应没有编码。因此，插件声明必须以某种方式被破坏

import React, { Component } from 'react';
// Import React FilePond
import { FilePond, registerPlugin } from 'react-filepond';
// import * as FilePond from 'react-filepond';

// Import FilePond styles
import "filepond/dist/filepond.min.css";

// Import the Image EXIF Orientation and Image Preview plugins
// Note: These need to be installed separately
import FilePondPluginImageResize from 'filepond-plugin-image-resize';
import FilePondPluginFileEncode from 'filepond-plugin-file-encode';
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import FilePondPluginImageTransform from 'filepond-plugin-image-transform';
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";


// Register the plugins
registerPlugin(FilePondPluginFileEncode, FilePondPluginImageExifOrientation, FilePondPluginImagePreview, FilePondPluginImagePreview, FilePondPluginImageResize, FilePondPluginImageTransform);

// Our app
export default class ImageHandler extends Component {
  constructor(props) {
    super(props);

    this.state = {
      // Set initial files, type 'local' means this is a file
      // that has already been uploaded to the server (see docs)
      files: [
             {
              id: "",
              name: "",
              type: "",
              size: 0,
              metadata: {
                  resize: {
                      mode: "",
                      size: {
                          width: 0,
                          height: 0
                      }
                  },
                  crop: {
                      rect: {
                          x: 0,
                          y: 0,
                          width: 0,
                          height: 0
                      },
                      aspectRatio: 1
                  }
              },
              data: ""
              }
      ],
      fileUploaded: false
    };
  }

  handleInit() {
    console.log("FilePond instance has initialized", this.pond);
    console.log(this.state.files);

  }

  uploadFiles() {
    this.props.parentFileCallback(this.state.files)
    this.setState({fileUploaded:true})
  }


  render() {
    return (
      <div className="App">
        <FilePond 
            ref={ref => (this.pond = ref)}
            files={this.state.files}
            allowMultiple={true}
            allowImageExifOrientation={true}
            allowImageTransform={true}
            allowImageResize={true}
            allowReorder={true}
            allowFileEncode={true}
            imageEditInstantEdit={true}
            imageResizeMode={'cover'}
            imageResizeTargetWidth={800}
            imageResizeTargetHeight={null}
            instantUpload={false}
            maxFiles={5}
            oninit={() => this.handleInit()}
            onupdatefiles={fileItems => {
              // Set currently active file objects to this.state
              this.setState({
                files: fileItems.map(fileItem => fileItem)

              });
              this.uploadFiles();
              console.log(`photo files ${this.state.files[0]}`)
              console.log(`uploaded? ${this.state.fileUploaded}`)
            }}
        />        
      </div>
    );

  }
 }

filepond react package.json

{
    "name": "react-filepond",
    "version": "7.0.1",
    "description": "A handy FilePond adapter component for React",
    "homepage": "https://pqina.nl/filepond",
    "license": "MIT",
    "repository": "pqina/react-filepond",
    "main": "dist/react-filepond.js",
    "browser": "dist/react-filepond.js",
    "module": "dist/react-filepond.esm.js",
    "keywords": [
        "react",
        "reactjs",
        "filepond",
        "file",
        "upload",
        "drag",
        "drop",
        "browse",
        "image",
        "preview"
    ],
    "author": {
        "name": "PQINA",
        "url": "https://pqina.nl"
    },
    "scripts": {
        "start": "npm run build:watch",
        "build": "mkdirp dist && npm run build:browser && npm run build:module",
        "build:browser": "babel lib | bannerjs -m > dist/react-filepond.js",
        "build:module": "minicat lib/index.js | bannerjs -m > dist/react-filepond.esm.js",
        "build:watch": "nodemon --watch lib -x \"npm run build\"",
        "prepare": "npm run build"
    },
    "peerDependencies": {
        "react-dom": "^16.0.0",
        "react": "^16.0.0",
        "filepond": ">=3.7.x <5.x"
    },
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-preset-env": "^1.6.1",
        "babel-preset-react": "^6.24.1",
        "bannerjs": "^1.0.5",
        "minicat": "^1.0.0",
        "mkdirp": "^0.5.1",
        "nodemon": "^1.17.3"
    }
}

{
    "name": "filepond-plugin-file-encode",
    "version": "2.1.4",
    "description": "File Encoding Plugin for FilePond",
    "license": "MIT",
    "author": {
        "name": "PQINA",
        "url": "https://pqina.nl/"
    },
    "homepage": "https://pqina.nl/filepond/",
    "repository": "pqina/filepond-plugin-file-encode",
    "main": "dist/filepond-plugin-file-encode.js",
    "browser": "dist/filepond-plugin-file-encode.js",
    "module": "dist/filepond-plugin-file-encode.esm.js",
    "browserslist": [
        "last 1 version and not Explorer 10",
        "Explorer 11",
        "iOS >= 9",
        "Android >= 4.4"
    ],
    "files": [
        "dist"

还有project package.json

"name": "filepond",
    "version": "4.9.5",
    "description": "FilePond, Where files go to stretch their bits.",
    "license": "MIT",
    "author": {
        "name": "PQINA",
        "url": "https://pqina.nl/"
    },
    "homepage": "https://pqina.nl/filepond/",
    "repository": "pqina/filepond",
    "main": "dist/filepond.js",
    "browser": "dist/filepond.js",
    "module": "dist/filepond.esm.js",
    "keywords": [
        "javascript",
        "file",
        "upload",
        "drag",
        "drop",
        "browse",
        "paste",
        "image",
        "preview"
    ],
    "browserslist": [
        "last 1 version and not Explorer 10",
        "Explorer 11",
        "iOS >= 9",
        "Android >= 4.4"
    ],
    "files": [
        "dist",
        "types/*.d.ts"
    ],
    "types": "types/index.d.ts",
    "scripts": {
        "test": "npx jest",
        "start": "npx rollup -c -w",
        "build": "npm run scripts | npm run styles",
        "scripts": "npx rollup -c",
        "styles": "npm run styles:pretty && npm run styles:nano",
        "styles:pretty": "cat src/css/* | npx node-sass | npx postcss --no-map --use autoprefixer | npx prettier --single-quote --parser css | node banner-cli.js FilePond > dist/filepond.css",
        "styles:nano": "cat src/css/* | npx node-sass | npx postcss --no-map --use autoprefixer --use cssnano | node banner-cli.js FilePond > dist/filepond.min.css",
        "dtslint": "dtslint types"
    },
    "devDependencies": {
        "@babel/core": "^7.5.5",
        "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
        "@babel/plugin-transform-template-literals": "^7.4.4",
        "@babel/preset-env": "^7.5.5",
        "autoprefixer": "^9.6.1",
        "babel-jest": "^24.8.0",
        "cssnano": "^4.1.10",
        "dtslint": "^0.9.3",
        "jest": "^24.8.0",
        "node-sass": "^4.12.0",
        "postcss-cli": "^6.1.3",
        "prettier": "^1.18.2",
        "rollup": "^1.17.0",
        "rollup-plugin-babel": "^4.3.3",
        "rollup-plugin-commonjs": "^9.3.4",
        "rollup-plugin-license": "^0.8.1",
        "rollup-plugin-node-resolve": "^4.2.4",
        "rollup-plugin-prettier": "^0.6.0",
        "rollup-plugin-terser": "^4.0.4",
        "typescript": "^3.6.2"
    }
}

{
  "name": "travel-diary",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@loadable/component": "^5.12.0",
    "@material-ui/core": "^4.8.3",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.0",
    "axios": "^0.19.1",
    "babel": "^6.23.0",
    "babel-eslint": "^10.0.3",
    "body-parser": "^1.19.0",
    "bootstrap": "^4.4.1",
    "cors": "^2.8.5",
    "crypto": "^1.0.1",
    "express": "^4.17.1",
    "filepond": "^4.9.4",
    "filepond-plugin-file-encode": "^2.1.4",
    "filepond-plugin-image-exif-orientation": "^1.0.6",
    "filepond-plugin-image-preview": "^4.6.0",
    "filepond-plugin-image-resize": "^2.0.4",
    "filepond-plugin-image-transform": "^3.7.0",
    "global": "^4.4.0",
    "google-maps-react": "^2.0.2",
    "method-override": "^3.0.0",
    "moment": "^2.24.0",
    "mongodb": "^3.4.1",
    "mongoose": "^5.8.4",
    "morgan": "^1.9.1",
    "path": "^0.12.7",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-filepond": "^7.0.1",
    "react-hot-loader": "^4.12.18",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "react-stylesheet": "^2.2.2",
    "reactstrap": "^8.2.0",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "styled-components": "^4.4.1",
    "webpack": "4.41.2",
    "yarn": "^1.21.1"
  },

---

这是一个typescript错误，文件编码插件的@types还不存在

在declaration.d.ts文件中创建类型声明，但不是

declare module 'FilePondPluginFileEncode';

试一试

---

这为我解决了问题

这并不能解决我的问题。你把申报文件放在哪里了？

declare module 'FilePondPluginFileEncode';

declare module 'filepond-plugin-file-encode';