Perfect-scrollbar: Webpack issue with require('perfect-scrollbar')

[tegomass]

Hi,

I faced an issue when using PerfectScrollbar with Webpack.

As your doc says, I installed perfect-scrollbar using :
$ npm install perfect-scrollbar

Then I use it in my script file, so I used this command :
const PerfectScrollbar = require('perfect-scrollbar');

But I've got this error message :
Uncaught ReferenceError: PerfectScrollbar is not defined

My script file have just the minimal code below :

const PerfectScrollbar = require('perfect-scrollbar');
const ps = new PerfectScrollbar('#container');

However, If I use import PerfectScrollbar from 'perfect-scrollbar'; instead of require, it works perfectly !!
I wanted to report this issue tho... But maybe I miss understood something ?

[hatashiro]

Thanks for the report. Let me check in a while.

[hatashiro]

I've just tested it out and it seems like working. What is your webpack config? Is there any repository where I can look into the problem?

[tegomass]

Hi,

I've uploaded the very simple project using webpack and perfect-scrollbar, please take a look here :
https://github.com/tegomass/perfect-scrollbar-webpack-demo

Just do a npm install then webpack on the directory.
Open the index.html file.

Comment/uncomment the line below (in main.js before the bundle process) to see the difference:
//import PerfectScrollbar from 'perfect-scrollbar';

With the require method, I have an error about the Constructor (on the chrome devtools console)

[hatashiro]

Related issue:

• https://github.com/webpack/webpack/issues/1979

In short, webpack will use ES6 module script.

Perfect-scrollbar provides both CommonJS and ES6 module scripts, with main and module fields in order. I thought webpack will use CJS for require and ESM for import, but I was wrong. Webpack just prioritize module.

So in this case, the solution may be like below:

1. Use ES2015 module import.
2. Use CommonJS, with .default:
   const PerfectScrollbar = require('perfect-scrollbar').default;
3. Override webpack resolve config to prioritize main instead of module:
   { resolve: { mainFields: ['main', 'module'] } }

I will update README to mention about this. Thanks for your report!

[kikoseijo]

You made my day, thanks @utatti

[dantranv]

Hi @tegomass, @utatti
I use import with my webpack and got the same error ReferenceError: "PerfectScrollbar is not defined"
v1.4.0
import PerfectScrollbar from 'perfect-scrollbar';

Any idea?

[draaslan]

Hi @tegomass, @utatti
I use import with my webpack and got the same error ReferenceError: "PerfectScrollbar is not defined"
v1.4.0
import PerfectScrollbar from 'perfect-scrollbar';

Any idea?

window.PerfectScrollbar = require('perfect-scrollbar');

I did it after 3 hours of trying and works now. You can try :)

[NikitaIT]

What about a normal esm release? this makes the library literally obsolete, because it requires mandatory transpilation since 2015

with webpack now:

import ScrollBar from "perfect-scrollbar";