0

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
Emirhan Gümüş
  • 47
  • 9
  • [The project's target is es5](https://github.com/sa-si-dev/virtual-select/blob/master/webpack.config.js#L14), so it's likely that it doesn't support being imported, using require or import. – evolutionxbox Feb 01 '22 at 09:32
  • soo how i can use it? – Emirhan Gümüş Feb 01 '22 at 09:33
  • It looks like it adds `VirtualSelect` to the global object. So using `VirtualSelect` as-is should be fine. – evolutionxbox Feb 01 '22 at 09:34
  • Server Error ReferenceError: VirtualSelect is not defined This error happened while generating the page. Any console logs will be displayed in the terminal window. Source components\Options.js (5:4) @ Options 3 | function Options() { 4 | > 5 | VirtualSelect.init({ | ^ 6 | ele: '#sample-select', 7 | options: [ 8 | { label: 'Options 1', value: '1' }, – Emirhan Gümüş Feb 01 '22 at 09:35
  • I'm getting error if i remove the import – Emirhan Gümüş Feb 01 '22 at 09:36
  • 1
    Maybe you need to be more specific? `window.VirtualSelect`? Also make sure that you're including the script in the public HTML page. https://sa-si-dev.github.io/virtual-select/#/?id=import-files – evolutionxbox Feb 01 '22 at 09:37
  • if i add the window.VirtualSelect, im getting error again. – Emirhan Gümüş Feb 01 '22 at 09:41
  • Server Error ReferenceError: window is not defined This error happened while generating the page. Any console logs will be displayed in the terminal window. Source components\Options.js (5:4) @ Options 3 | function Options() { 4 | > 5 | window.VirtualSelect.init({ | ^ 6 | ele: '#sample-select', 7 | options: [ 8 | { label: 'Options 1', value: '1' }, – Emirhan Gümüş Feb 01 '22 at 09:41
  • btw, here is no html file in public folder – Emirhan Gümüş Feb 01 '22 at 09:42
  • There should be. How did you make your react project? How does the react load onto the page? – evolutionxbox Feb 01 '22 at 09:43
  • i created a next js project with ```npx create-next-app@latest``` and it doesn't give me a html file in public folder. Just a favicon and vercel.svg file – Emirhan Gümüş Feb 01 '22 at 09:46
  • Go through [this tutorial](https://nextjs.org/learn/basics/assets-metadata-css). Since `VirtualSelect` needs to be treated as a static asset – evolutionxbox Feb 01 '22 at 09:58
  • For the `Module not found` error, make sure you have installed the package correctly, i.e. `npm i virtual-select-plugin`. For the `ReferenceError: window is not defined` error, see [Why am I getting ReferenceError: self is not defined when I import a client-side library?](https://stackoverflow.com/questions/66096260/why-am-i-getting-referenceerror-self-is-not-defined-when-i-import-a-client-side). – juliomalves Feb 02 '22 at 11:47

3 Answers3

0

<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

Ronnel
  • 49
  • 1
  • 6
0

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

Escanor
  • 95
  • 3
  • 9
0

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

   }
}
Acode
  • 507
  • 5
  • 14