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?
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?
Share Improve this question edited May 12, 2020 at 13:52 palaѕн 73.9k17 gold badges122 silver badges139 bronze badges asked May 12, 2020 at 13:50 Mr. WillMr. Will 1431 gold badge2 silver badges9 bronze badges 4- stackoverflow./a/19059825/5064324 Does this answer help? – Eggcellentos Commented May 12, 2020 at 13:52
-
You can use
importfrom ES6 but You need to convert the js files to browser supportable javascript. You needbabelto transpile you JS – Satyam Pathak Commented May 12, 2020 at 13:52 -
require()is used with Node.js – MARSHMALLOW Commented May 12, 2020 at 13:52 -
Try to change
<script src="script.js"></script>to<script type="module" src="script.js"></script>– MARSHMALLOW Commented May 12, 2020 at 13:53
3 Answers
Reset to default 6Actually, require() is for Node.js. You can't use it in browsers.
First solution:
Add the type="module" attribute to the <script> tag.
So it will be <script type="module" src="script.js"></script>
Second solution:
Just add <script src="https://cdn.jsdelivr/npm/[email protected]/dist/filepond.js"></script> and <link href="https://unpkg./filepond/dist/filepond.css" rel="stylesheet"> before calling script.js
I think this will work for you:
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/filepond.js"></script>
<link href="https://unpkg./filepond/dist/filepond.css" rel="stylesheet">
<script>
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(pond.element);
</script>
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
It's simple:
Just include the
FilePondcss & js file from CDN instead like:<link href="https://unpkg./filepond/dist/filepond.css" rel="stylesheet"> <script src="https://unpkg./filepond/dist/filepond.js"></script>Next, you do not need any import or require. You can simply use the rest of the code as
FilePondis globaly declared now like:
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(myPond.element);<link href="https://unpkg./filepond/dist/filepond.css" rel="stylesheet">
<script src="https://unpkg./filepond/dist/filepond.js"></script>