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?

Fibster

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 – Orbadiah

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 – Wollongong

@Orbadiah 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. – Fibster

@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. – Fibster

@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. – Orbadiah

Do you use a build tool such as webpack? – Erland

@Orbadiah Updated the post for you. – Fibster

@Erland No but I came across that name several times in my research.. – Fibster

Answer 1

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.

Erland

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? – Fibster

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 <script> tag. – Erland

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. – Fibster

Answer 2

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]

Afterburner