How to include a npm package in an HTML file?

Question

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?

https://stackoverflow.com/a/19059825/5064324 Does this answer help? — Eggcellentos, May 12 '20 at 13:52
You can use `import` from ES6 but You need to convert the js files to browser supportable javascript. You need `babel` to transpile you JS — Satyam Pathak, May 12 '20 at 13:52

score 4 · Answer 1 · edited Jun 20 '20 at 09:12

Actually, 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.net/npm/filepond@4.13.6/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/filepond@4.13.6/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>

score 3 · Answer 2 · answered May 12 '20 at 13:53

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

score 2 · Accepted Answer · answered May 12 '20 at 13:58

2

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>

answered May 12 '20 at 13:58

palaѕн

72,112
17
116
136

All the answers made effect, but what if I'd like to use npm to install packages for my site? – Mr. Will May 13 '20 at 12:23
1

The original question was how to import the file locally. Since the file is already installed locally, using a CDN here is problematic in this context for two reasons: 1. Making a request to an external server for a file that’s already available locally is unnecessary and will only increase page load times, and 2. Doesn’t import the local file. – Zachary Beschler Apr 07 '23 at 21:22

How to include a npm package in an HTML file?

3 Answers3

First solution:

Second solution: