'React/Next JS import custom library

Im trying to learn react and next js. I wanna use this plugin. I installed that with npm but i dont know how to import it.

How i'm gonna use npm installed packages in my code?

Here is the code...

import React from 'react';
import VirtualSelect from 'virtual-select-plugin';

function Options() {

    VirtualSelect.init({
        ele: '#sample-select',
        options: [
          { label: 'Options 1', value: '1' },
          { label: 'Options 2', value: '2' },
          { label: 'Options 3', value: '3' },
        ],
    });

  return <div className='container mx-auto lg:px-10 px-5 mt-10'>
    <h2>Options</h2>
    <div>
        <div>
            <h3>Genre</h3>
            <div id="sample-select"></div>
        </div>
        <div>
            <h3>Year</h3>
        </div>
        <div>
            <h3>Seasons</h3>
        </div>
    </div>
  </div>;
}

export default Options;

error message:

./components/Options.js:2:0
Module not found: Can't resolve 'virtual-select-plugin'
  1 | import React from 'react';
> 2 | import VirtualSelect from 'virtual-select-plugin';
  3 | 
  4 | function Options() {
  5 | 

Import trace for requested module:
./pages/index.js

https://nextjs.org/docs/messages/module-not-found

Solution 1:^[1]

<link rel="stylesheet" href="node_modules/virtual-select-plugin/dist/virtual-select.min.css">
<script src="node_modules/virtual-select-plugin/dist/virtual-select.min.js"></script>

<!-- optional -->
<link rel="stylesheet" href="node_modules/tooltip-plugin/dist/tooltip.min.css">
<script src="node_modules/tooltip-plugin/dist/tooltip.min.js"></script>

This is from the docs of virtual-select-plugins

Reference

and you said you're using next js there is a scripttag in Nextjs Put it on your whole application _app.js in pages

_app.js Reference

I suggest read the docs

Solution 2:^[2]

there are many ways to do that
first option is to add your script tag in the public html page
second option is to install react helemet package for adding an element of the head of component https://www.npmjs.com/package/react-helmet

or you can simply use this package to create a virtual select in react https://www.npmjs.com/package/react-select-virtualized

Solution 3:^[3]

I think you can resolve this simply by npm install.

Install the required package.

$ npm i virtual-select-plugin

Then you can see virtual-select-plugin module is added to dependencies. Look at package.json.

{
   "dependencies":{
     ...
    "virtual-select-plugin": "^1.0.29",
    ...

   }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Escanor
Solution 3	Acode

'React/Next JS import custom library

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]