CODEWITHSUNDEEP
javascripthtmlnode.jsnpmfrontend
Mr. Will
Mr. Will

Reputation: 143

How to include a npm package in an HTML file?

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

Answers (3)

MARSHMALLOW
MARSHMALLOW

Reputation: 1395

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/[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

palaѕн
palaѕн

Reputation: 73976

It's simple:

  1. 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>

  2. 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

pacukluka
pacukluka

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

Related Questions