title: FilePond Plugin Import Error - Could not find a declaration file for '...'
body: <p>I am seeing the same issue with importing all of the plugins.<br>
  <a href="https://i.stack.imgur.com/ImKXZ.png" rel="nofollow noreferrer">ErrorScreenShot</a><br/>
  Verified that they are not working as expected in the browser return for the file upload.  I am trying to encode the photo for upload to MongoDB Atlas.<br/>
  <a href="https://i.stack.imgur.com/sJfwi.png" rel="nofollow noreferrer">File Request Response</a><br/>
  This appears to be some sort of TypeScript issue.  I have been unable to track down a solution.  Using VS Code with React.<br>
  Tried so far...</p>
  
  <ul>
  <li>Reinstalling all plugins with Yarn vs NPM and adding @type/ in front of package</li>
  <li>I created a declarations.d.ts file to declare(as suggested).Placed in the /src root as well as filepond/types/. Maybe needs to be placed in another directory?</li>
  </ul>
  
  <pre><code>declare module 'FilePondPluginImageResize';
  declare module 'FilePondPluginFileEncode';
  declare module 'FilePondPluginImageExifOrientation';
  declare module 'FilePondPluginImagePreview';
  declare module 'FilePondPluginImageTransform';
  </code></pre>
  
  <ul>
  <li>remove '.js' from the filepond plugin package.json "main": "dist/filepond-plugin-file-encode.js",</li>
  <li>Tried <code>import FilePondPluginFileEncode from '/fullpath/filepond-plugin-file-encode.js';</code></li>
  <li>Removing both FilePond and FilePond-React and reinstalled.</li>
  </ul>
  
  <p>I have not found any issues with the code below, with the exception that the response was not encoded.  Therefore the plugin declaration must be somehow broken.  </p>
  
  <pre><code>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 (
        &lt;div className="App"&gt;
          &lt;FilePond 
              ref={ref =&gt; (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={() =&gt; this.handleInit()}
              onupdatefiles={fileItems =&gt; {
                // Set currently active file objects to this.state
                this.setState({
                  files: fileItems.map(fileItem =&gt; fileItem)
  
                });
                this.uploadFiles();
                console.log(`photo files ${this.state.files[0]}`)
                console.log(`uploaded? ${this.state.fileUploaded}`)
              }}
          /&gt;        
        &lt;/div&gt;
      );
  
    }
   }
  </code></pre>
  
  <p>Here is the filepond package.json...</p>
  
  <pre><code>"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 &gt;= 9",
          "Android &gt;= 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 &amp;&amp; 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 &gt; dist/filepond.css",
          "styles:nano": "cat src/css/* | npx node-sass | npx postcss --no-map --use autoprefixer --use cssnano | node banner-cli.js FilePond &gt; 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"
      }
  }
  
  </code></pre>
  
  <p>the filepond-react package.json</p>
  
  <pre><code>{
      "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 &amp;&amp; npm run build:browser &amp;&amp; npm run build:module",
          "build:browser": "babel lib | bannerjs -m &gt; dist/react-filepond.js",
          "build:module": "minicat lib/index.js | bannerjs -m &gt; 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": "&gt;=3.7.x &lt;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"
      }
  }
  </code></pre>
  
  <p>the filepond-plugin-file-encode package.json</p>
  
  <pre><code>{
      "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 &gt;= 9",
          "Android &gt;= 4.4"
      ],
      "files": [
          "dist"
  </code></pre>
  
  <p>and the project package.json...</p>
  
  <pre><code>{
    "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"
    },
  </code></pre>