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
<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
and you said you're using next js there is a scripttag in Nextjs Put it on your whole application _app.js in pages
I suggest read the docs
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
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",
...
}
}