React/Next JS import custom library

Question

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

Answer 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

Answer 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

Answer 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",
    ...

   }
}