ngx-filepond icon indicating copy to clipboard operation
ngx-filepond copied to clipboard

registerPlugin returning "plugin is not a function" for file validation plugin

Open dcp3450 opened this issue 1 year ago • 4 comments

Is there an existing issue for this?

  • [X] I have searched the existing issues

Have you updated Angular FilePond, FilePond, and all plugins?

  • [x] I have updated FilePond and its plugins

Describe the bug

When running application I get the error:

filepond.js:12458 Uncaught TypeError: plugin is not a function
    at createAppPlugin (filepond.js:12458:29)
...
    at registerPlugin (filepond.js:12695:21)
...

Running: filepond: 4.30.4 filepond-plugin-file-validate-type: 1.2.8 ngx-filepond: 6.0.1

Angular: 13 Node: 16

Importing via module:

import * as FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import { FilePondModule, registerPlugin } from 'ngx-filepond';
registerPlugin(FilePondPluginFileValidateType);

I logged out registerPlugin and FilePondPluginFileValidateType and get the the following:

registerPlugin:  Æ’ registerPlugin() {
      for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) {
        plugins[_key] = arguments[_key];
      } // register plugins


      plu…
FilePondPluginFileValidateType:  Module {__esModule: true, Symbol(Symbol.toStringTag): 'Module'}

Issue started after an upgrade to Angular 13 and upgrading filepond packages to their latest versions.

Reproduction

Import filepond packages and register the plugin for File Validation.

Environment

- Device: Computer
- OS: Windows 10
- Browser: Chrome
- Angular version: 13

dcp3450 avatar Oct 10 '22 16:10 dcp3450

Switching import * as FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'; to import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'; returns the error

NG0203: inject() must be called from an injection context

dcp3450 avatar Oct 10 '22 18:10 dcp3450

For anyone who comes across this issue:

I was getting that NG0203: inject() must be called from an injection context error because I needed to have preserveSymlinks: true in my angular.js under projects -> app name -> architect -> build -> options That fixed the issue.

Apparently Angular 13 with the newest version of the filepond stuff, you don't need the * as

dcp3450 avatar Oct 10 '22 19:10 dcp3450

Thanks for posting the solution @dcp3450, appreciate it!

rikschennink avatar Oct 12 '22 06:10 rikschennink