First of all, I’m new in web development, so this may be something really simple to answer (or at least I hope so).
I was trying to implement filepond in a project when I started running into problems.
Following a video guide I could use the library without any problems through CDNs, so I decided to try with npm installations by myself, but that’s when I started getting errors.
I can’t past the import part from the quick start guide (https://www.npmjs.com/package/filepond) and I would like someone to pin point what I’m doing wrong.
My Folder Structure:
/node_modules
/...
/public
/fileUpload.js
/views
/index.html
/server.js
My code at the moment:
server.js (I’m running the code inside a node environment, express framework):
const express = require('express');
const path = require('path');
const app = express();
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, './views/index.html'));
})
app.use(express.static('public'));
app.listen(5000);
fileUpload.js (exactly the same as the quick start guide):
import * as Filepond from 'filepond';
const pond = Filepond.create({
multiple: true,
name: 'filepond'
});
document.body.appendChild(pond.element);
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FilePond</title>
</head>
<body>
<input type="file" class="filepond">
<script src="javascripts/fileUpload.js"></script>
</body>
</html>
Installations: npm i filepond
Error:
Running all the code above I get:
Uncaught SyntaxError: import declarations may only appear at top level of a module
And if I were to change the call of my .js file inside my html for the following one:
<script type="module" src="../public/javascripts/fileUpload.js"></script>
My error would change to:
Loading module from “http://localhost:5000/public/javascripts/fileUpload.js” was blocked because of a disallowed MIME type (“text/html”).