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

Having trouble integrating a custom button into the toolbar of the Tinymce Vue.js wrapper

What is the best way to achieve a Clamp-To-Border effect on a Texture loaded onto an Image in the THREE.js?

Can someone provide guidance on utilizing the index correctly within this v-for to prevent any potential errors?

Navigating through objects to retrieve internal object values

Injection of Angular state resolve into controller fails to occur

What does the underscore before a function in JavaScript or PHP signify?

Unable to append DOM element using the node.insertBefore() method

Is the UUID key displayed as an object within a Reactjs prop?

Preserve the authentic picture along with a blur mask that can be dragged and applied to it

Numerous traditional commits of the `feat` type have been recorded on a single feature

Investigate duplicate elements within nested arrays using the 3D array concept

Using Vue.js to send user input data to a different page and trigger a method for submission

The error message "Trying to call zmq.zmqVersion as a function, but it's not a function" occured while attempting to import the ZeroMQ

ajaxStop and ajaxStart not functioning as expected

The program encountered an error: Unable to locate the module 'chart.js' in the directory '/node_modules/ng2-charts/fesm2015'

Error: NextJS cannot access the 'map' property of an undefined object

Encountering a hurdle: Unable to run npm run dev in Next.js due to NPM error

Implementing a Jquery check based on a checkbox

Tips for retaining the value of a variable in JavaScript

Observable Knockout Dependency