Guide to importing an npm package into a client-side file

Question

Guide to importing an npm package into a client-side file

Having some trouble importing the js-search npm package into my client-side .js file. The documentation suggests using

import * as JsSearch from 'js-search';

, but I keep getting a

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

. After trying different relative paths, I realized that 'js-search' actually refers to the package name and not the directory. Is there a missing dependency that I need to include in order to use this import statement? Thank you.

Edit: project directory structure:

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

Edit: Could it be related to running on localhost rather than a server?

javascript npm npm-package

Answer 1

Answer №1

It appears that the NPM package you're currently utilizing is designed for node.js code. The line

import * as JsSearch from 'js-search';

is specifically intended for node.js, and may not function properly on its own within a browser environment.

If you wish to use such packages in a browser setting, you will likely need to convert them using a transpiler. One of the most commonly used ones for this purpose is webpack.

Sometimes, packages include pre-built or minified versions tailored for browsers. If this is the scenario here, you might come across a file named something.min.js within the js-search directory.

It seems that js-search may offer this option, given that there's a rollup configuration file present in their repository. Rollup serves as an alternative to webpack in this regard.

If a pre-built version isn't available, you may find yourself delving into the complex realm of build tools to make it work within a browser environment.

Answer 2

It appears that the NPM package you're currently utilizing is designed for node.js code. The line

import * as JsSearch from 'js-search';

is specifically intended for node.js, and may not function properly on its own within a browser environment.

If you wish to use such packages in a browser setting, you will likely need to convert them using a transpiler. One of the most commonly used ones for this purpose is webpack.

Sometimes, packages include pre-built or minified versions tailored for browsers. If this is the scenario here, you might come across a file named something.min.js within the js-search directory.

It seems that js-search may offer this option, given that there's a rollup configuration file present in their repository. Rollup serves as an alternative to webpack in this regard.

If a pre-built version isn't available, you may find yourself delving into the complex realm of build tools to make it work within a browser environment.

Answer 3

Answer №2

To include your myapp.js file, ensure to use type="module" as shown below:

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

Within the myapp.js file, you must import js-search using a relative path from node_modules, especially if you are not utilizing a bundler such as webpack. In your myapp.js script, utilize js-search similarly to this example:

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]

Answer 4

To include your myapp.js file, ensure to use type="module" as shown below:

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

Within the myapp.js file, you must import js-search using a relative path from node_modules, especially if you are not utilizing a bundler such as webpack. In your myapp.js script, utilize js-search similarly to this example:

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]

Guide to importing an npm package into a client-side file

Answer №1

Answer №2

Similar questions

Perform the same actions on every element within the ul li

Need a place to keep your data safe while using nodejs?

JavaScript date input formatting with HTML

Unveil as you scroll - ScrollMagic

The responsive class seems to be malfunctioning within the Laravel 5.3 framework

Implementing conditional color parameter using Vuetify on an element

Iterate through each row asynchronously, waiting for each one to complete before moving on to the

What is the best way to implement autoplay sound on a JavaScript webpage?

What methods does MaterialUI utilize to achieve this?

Unable to retrieve the parent element using jQuery

Completed Animation with Callback in AngularJS CSS

Vue-resource is returning a Promise object

pattern validation using a regular expression

Using HTML and C# to Deliver Emails

Exploring Methods for Retrieving offsetHeight and scrollHeight in AngularJS

Issue encountered when attempting to alter the action attribute of a form: receiving an error message stating 'undefined is not a function'

Guide to updating 2 iframes simultaneously with a single link/button using HTML and JavaScript

Having trouble getting `sudo apt install npm` to work? You might be encountering the error message "The following packages have unmet dependencies

If I change the request mode to 'no-cors' in my Firebase cloud function, how will it impact the outcome?

Include a "remember me" feature in the Stripe form