Reputation: 143
My HTML file:
<!DOCTYPE html>
<head>
...
</head>
<body>
...
<script src="script.js"></script>
</body>
My JavaScript file - script.js
:
import * as FilePond from 'filepond';
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(pond.element);
But error occurred, the browser said:
Uncaught SyntaxError: Cannot use import statement outside a module
So I edited the script.js into this:
const FilePon = require('filepond')
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(pond.element);
But error occurred again, the browser said:
Uncaught ReferenceError: require is not defined at script.js:1
How can I fix it?
Upvotes: 8
Views: 10467
Reputation: 1395
Actually, require()
is for Node.js. You can't use it in browsers.
Add the type="module"
attribute to the <script>
tag.
So it will be <script type="module" src="script.js"></script>
Just add <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/filepond.js"></script>
and <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
before calling script.js
I think this will work for you:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/filepond.js"></script>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script>
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(pond.element);
</script>
Upvotes: 6
Reputation: 73976
It's simple:
Just include the FilePond
css & js file from CDN instead like:
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
Next, you do not need any import or require. You can simply use the rest of the code as FilePond
is globaly declared now like:
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(myPond.element);
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
Upvotes: 2
Reputation: 735
require() is a NodeJS function, not a browser JS function. If the package uses npm, chances are its made for NodeJS and not browser JS.
If you want to include js files in the browser, you need to use html includes:
<script src="script.js"></script>
Or a templating solution which allows to include other files such as EJS
Upvotes: 3