Perfect-scrollbar: Webpack production run error

[erwinyusrizal]

Hi I have a problem when running perfect-scroll on nodejs, when build for production it's ok but when trying to running it, it returns this error:

/home/xxx/public_html/xxxxxx/node_modules/perfect-scrollbar/src/js/lib/helper.js:80
  isWebKit: 'WebkitAppearance' in document.documentElement.style,
                                  ^

ReferenceError: document is not defined
    at Object.<anonymous> (/home/xxx/public_html/xxxxxx/node_modules/perfect-scrollbar/src/js/lib/helper.js:80:35)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)

    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/home/xxx/public_html/xxxxxx/node_modules/perfect-scrollbar/src/js/plugin/destroy.js:3:9)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)

any idea how to fix it?

Cheers,

[hatashiro]

It's not to run on Node.js. It is to run on browsers. The error occurred because there is no document in Node.js. Why are you running a scrollbar plugin on Node.js?

[erwinyusrizal]

@noraesae thanks for your reply,

I'm running it with React, but i'm having problem with that, yeah I realized about that too

thanks,

[hatashiro]

I now understand your situation. A React component sometimes uses itself as a server-side renderer. PS is not designed to run in a server, so please consider disabling PS when used in the server. It can be done by wrapping with a condition to check document like below.

if (document) {
  Ps.initialize(element);
}

[6-162]

@noraesae using if (document) doesnt solve the problem, Im using server side rendering in a react application and getting the same error, the problem is not when intializing Ps, its in the helper.js just importing the package triggers the error.

[usebaz]

@noraesae browser code(isWebKit: 'WebkitAppearance' in document.documentElement.style, /src/js/lib/helper.js) executed when i requre your lib, and it`s break server side rendering.

const Ps = require('perfect-scrollbar'); // it`s breaking here, on server

app.onBrowserRendering = () => {
  Ps.initialize(element);
}

Can you fix this?

[MaxSvargal]

+1

[ethanresnick]

@noraesae I think this should be reopened. As others have pointed out, it's hard to solve at the webpack layer (though it is possible with enough trickery), so it would save a lot of total effort if the module were aware of the possibility that it's running server side and simply did nothing.

If I created a PR, adding a bunch of typeof document/typeof window checks, would that be accepted?

[hatashiro]

@ethanresnick Yes, now SSR is common in the JS community, and we should take care of this. I will absolutely accept the PR.

[philosophocat]

There are 3 checks if document and window are undefined.. So, what about PR?)

[hatashiro]

650 resolves this.