How to import npm package to a client file

Question

I am trying to import the js-search npm package to my client .js file. Their docs says to write import * as JsSearch from 'js-search';, however, this gives me a Uncaught TypeError: Failed to resolve module specifier "js-search". Relative references must start with either "/", "./", or "../".. I tried to configure a relative path for a long time, however I finally figured out that 'js-search' refers to the package name, not the directory. So, I must be missing some dependency that allows me to use this import line? Thank you.

Edit: directory structure:

myproject
├── myproject
├── node_modules\js-search
└── myapp
    ├── static\myapp
    │            └── myapp.js
    └── templates\search
                    └── index.html

Edit: could it be because I'm running on localhost and not a server?

Did you npm i js-search in the client directory? What I mean is that you probably have `backend` and `frontend (or client)` directories so make sure you npm install packages in the client directory if they are imported in `.js` files from that directory — lbragile, Sep 19 '20 at 04:24
Is this package installed in your node modules directory. If not sure please run `npm install --save js-search` and then try it should work — Aayush Mall, Sep 19 '20 at 04:24
@lbragile It is a Django app and I have it installed in the node_modules directory, I tried putting this directory both in the project root as well as in static/myapp. — Ryan Eom, Sep 19 '20 at 04:27
@AayushMall It is a Django app and I have it installed in the node_modules directory, I tried putting this directory both in the project root as well as in static/myapp. — Ryan Eom, Sep 19 '20 at 04:27
@RyanEom, I am not familiar with Django folder structure, so if you want me to try to help, you would need to indicate your folder structure. — lbragile, Sep 19 '20 at 04:37
@Evert No but I came across that name several times in my research.. — Ryan Eom, Sep 19 '20 at 04:53

score 5 · Accepted Answer · answered Sep 19 '20 at 04:56

5

The NPM package you are using is likely a package made for node.js code. The import * as JsSearch from 'js-search'; line is intended for node.js, and will not work by itself in a browser.

To run these kinds of packages in a browser, you will need to basically convert it using a transpiler. The most common one probably being webpack.

Sometimes packages also include a pre-built or minified version in their package specifically for browsers. If this is the case, you might find a file like something.min.js in the js-search directory.

js-search looks like it might have this, as I see a rollup configuration file in their repository. Rollup is an alternative to webpack.

If this is not the case, you unfortunately have to go down the pretty crazy rabbithole that is build tools.

answered Sep 19 '20 at 04:56

Evert

93,428
18
118
189

Yes! js-search has a `js-search.min.js` file under `js-search/dist/umd`. So do I just copy and paste this file to my static/myapp folder and then import from it instead? – Ryan Eom Sep 19 '20 at 05:05
1

See if you can make this work. I don't know if `umd` modules are compatible with ecmascript imports. If not, you might need to get it via a regular ` – Evert Sep 19 '20 at 05:07
I think the import technically worked but when I try to use the library as indicated in the docs, I get `Uncaught (in promise) TypeError: JsSearch.Search is not a constructor.` – Ryan Eom Sep 19 '20 at 05:15

score 4 · Answer 2 · answered Sep 19 '20 at 05:16

You have to link your myapp.js file using type="module" like below

<script type="module" src="myapp.js"></script>

and then in myapp.js you have to import js-search using relative path from node_modules since you are not using any bundler like webpack. In your myapp.js file you can use js-search like below

import * as JsSearch from './node_modules/js-search/dist/esm/js-search.js';

var theGreatGatsby = {
  isbn: '9781597226769',
  title: 'The Great Gatsby',
  author: {
    name: 'F. Scott Fitzgerald'
  },
  tags: ['book', 'inspirational']
};
var theDaVinciCode = {
  isbn: '0307474275',
  title: 'The DaVinci Code',
  author: {
    name: 'Dan Brown'
  },
  tags: ['book', 'mystery']
};
var angelsAndDemons = {
  isbn: '074349346X',
  title: 'Angels & Demons',
  author: {
    name: 'Dan Brown',
  },
  tags: ['book', 'mystery']
};

var search = new JsSearch.Search('isbn');
search.addIndex('title');
search.addIndex(['author', 'name']);
search.addIndex('tags')

search.addDocuments([theGreatGatsby, theDaVinciCode, angelsAndDemons]);

console.log(search.search('The'));    // [theGreatGatsby, theDaVinciCode]
console.log(search.search('scott'));  // [theGreatGatsby]
console.log(search.search('dan'));    // [angelsAndDemons, theDaVinciCode]
console.log(search.search('mystery')); // [angelsAndDemons, theDaVinciCode]

How to import npm package to a client file

2 Answers2