How to import from an npm installed module

Question

I have a webpage that I'd someday like to host. I've installed a few packages in the dev folder using npm, and they appear in the node_modules sub-folder. I'd like to use these packages in a js module, but the import statement doesn't work as the docs lead me to expect.

Taking gsap as an example:

npm install gsap

Given that, and html that looks like this:

index.html

<html>
  <head>
  </head>

<body>
  <div id="app"></div>
</body>
<script type="module" src="./index.js"></script>
</html>

I expect I should be able to have a js module that looks like this:

index.js

// per https://greensock.com/docs/v3/Installation
import { gsap } from "gsap"; // ERROR HERE

console.log(gsap);

Uncaught TypeError: Failed to resolve module specifier "gsap". Relative references must start with either "/", "./", or "../".

Placing a/, or a ./ or any other combinations of paths I've tried produces a not found error. The only thing I can get to work is this, which I figured out by digging around in the node_modules folder...

import { gsap } from "/node_modules/gsap/gsap-core.js"; // this works, but yikes
console.log(gsap);

I must be doing something wrong to have to know that path and file name. I have a few packages I'd like to use, and I hope to not have to investigate each one to find where the actual module file resides.

Can somebody set me straight?

no it's normal, node_modules are not meant to be used directly in browsers. — apple apple
– apple apple, Commented Jul 25, 2022 at 16:15
if you don't want use "node_modules" while importing a package you have to use bundlers. I highly recommend using vite (try-online) instead of webpack or parcel — bogdanoff
– bogdanoff, Commented Jul 25, 2022 at 16:34

Quentin · Accepted Answer · 2022-07-25 16:27:50Z

2

 import { gsap } from "/node_modules/gsap/gsap-core.js"; // this works, but yikes

There's nothing particularly yikes about that in principle.

Browsers are not Node.js. They do not work the same way as Node.js. They cannot go rummaging about your server's file system in order to look for a module based on just its name.

You have to give them a URL to the JS file you want to import.

What is yikes about this is that you are exposing your entire node_modules directory over HTTP, and you probably don't want to do that.

A typical approach to using modules installed via NPM in the browser is to use a bundler such as Webpack or Parcel which will take all the modules your code depends on and bundle them up in to a distribution for sending to the browser (while doing optimisations such as tree shaking).

answered Jul 25, 2022 at 16:27

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

goodson Over a year ago

I see, thanks very much. I've heard of bundlers, but was hoping to avoid needing to learn about them ... seems daunting.

Quentin Over a year ago

@goodson — Bundlers often have lots of features and plugins that can do very clever things, but for your purposes a default configuration is likely to serve just fine. Ignore the complex bits.

goodson Over a year ago

I'm making progress on bundler, but wonder if you could elaborate your comment "you are exposing your entire node_modules directory over HTTP". What's the price I pay for this? The contents are made public by the publishers already, I think. Is it revealing (to someone potentially malicious) which npm packages I employ? If I pull the minified code (and lets say I use most of it), am I paying a performance price? Thanks.

Collectives™ on Stack Overflow

How to import from an npm installed module

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related