Use FilePond with Dynamic Import and Code Splitting

Question

I would like to load FilePond core including needed plugins only if they are really used on the page. I thought using Webpack Dynamic Imports.

Example: https://codesandbox.io/s/filepond-lazy-load-example-josspz

Doing this I get the following error:

Uncaught (in promise) TypeError: plugin is not a function

The relevant code:

Promise.all([
  import(
    /* webpackChunkName: 'FilePondPluginFileValidateSize' */ "filepond-plugin-file-validate-size"
  ),
  import(
    /* webpackChunkName: 'FilePondPluginFileValidateType' */ "filepond-plugin-file-validate-type"
  ),
  import(
    /* webpackChunkName: 'FilePondPluginFileEncode' */ "filepond-plugin-file-encode"
  ),
  import(/* webpackChunkName: 'FilePond' */ "filepond")
]).then(
  ([
    FilePondPluginFileValidateSize,
    FilePondPluginFileValidateType,
    FilePondPluginFileEncode,
    FilePond
  ]) => {
    FilePond.registerPlugin(
      FilePondPluginFileValidateSize,
      FilePondPluginFileValidateType,
      FilePondPluginFileEncode
    );

    // Create a FilePond instance
    FilePond.create(input, {});
  }
);

Error caused by this line: https://codesandbox.io/s/filepond-lazy-load-example-josspz?file=/src/components/file-upload.js:959-992

Not really sure if it's a problem with the plugin or if I overlooked something.

Update: Fixed and working solution provided in link above.

Answer 1

You need to access the default property as the plugin uses default export.

In these situations the best course of action is to console.log variables to see what is inside.

Working version: https://codesandbox.io/s/filepond-lazy-load-example-forked-gvxrom?file=/src/components/file-upload.js