Why is my Javascript import in ES6 not working? Unexpected token *

Question

im currently trying to implement FilePond in my Project. I've tried to implement it through npm installation, but somehow my Browser constantly throws this error:

Uncaught SyntaxError: Unexpected token *

I'm guessing it has something to with ES6, but I can't figure out how to fix it. My Javascript code looks like this:

import * as FilePond from 'filepond';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';

FilePond.registerPlugin(
    FilePondPluginImagePreview()
);

const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create( inputElement,{
    allowImagePreview: true,

});

FilePond.setOptions({
    server: 'test/'
});

I've tried to google an answer to this but it seems like I can't find a solution to this one. I've red something about compiling the ES6 code with Bable, but don't really know..

Thank you for your help! :)

Answer 1

If you want to use FilePond in the browser AND you want to use the ES module version you can go for dynamic imports or a script tag with type module. Browser support isn't fantastic.

Another option is to use the UMD version of the library and simply include the script tag as described in the docs.

The third option would be to use Rollup or Webpack with Babel.

Dynamic Imports

<link href="./filepond.css" rel="stylesheet">
<input type="file"/>

<script>
import('./filepond.esm.js').then(FilePond => {
  FilePond.create(document.querySelector('input'));
});
</script>

Type Module

<link href="./filepond.css" rel="stylesheet">
<input type="file"/>

<script type="module" src="./filepond.esm.js"></script>
<script>
document.addEventListener('FilePond:loaded', e => {
    const FilePond = e.detail;
    FilePond.create(document.querySelector('input'));
})
</script>

Some other notes

FilePond.registerPlugin(
    FilePondPluginImagePreview()
);

Remove the (), those are not needed.

const pond = FilePond.create( inputElement,{
    allowImagePreview: true,
});

Plugins are automatically enabled so setting allowImagePreview to true is also not required.