Error when installing smooth-scrollbar package using npm install <repo>

[tinokaartovuori]

Hello!

I tried to install this package using npm install git+https://github.com/idiotWu/smooth-scrollbar.git and npm install https://github.com/idiotWu/smooth-scrollbar.git but that is not working. I just get this error when trying to npm run dev or when trying npm install:

 ERROR  Cannot start nuxt:  Cannot set properties of undefined (setting 'offset')                                                                                                     19:57:52
                                                                                                                                                                                      19:57:49
  at t (node_modules/smooth-scrollbar/dist/smooth-scrollbar.js:16:12869)
  at e (node_modules/smooth-scrollbar/dist/smooth-scrollbar.js:16:21329)
  at installModule (node_modules/@nuxt/kit/dist/index.mjs:435:9)
  at async initNuxt (node_modules/nuxt/dist/index.mjs:2034:7)
  at async load (node_modules/nuxi/dist/chunks/dev.mjs:6797:9)
  at async Object.invoke (node_modules/nuxi/dist/chunks/dev.mjs:6858:5)
  at async _main (node_modules/nuxi/dist/cli.mjs:51:20)

• I also installed the package using the normal npm i smooth-scrollbar and this works just fine, no problems there.
• When I install the package using the repo URL, I can see all the files in my node_modules.
• package.json has this: ..., "smooth-scrollbar": "github:idiotWu/smooth-scrollbar", ...
• I don't think it is compatibility issue, but who knows...

Q: Why I want to install this using the repo URL instead?
A: I made a custom build of this smooth-scrollbar and it is giving the same error when I try to install it from the Github repo, so I try to resolve the issue with the original package first.

Thank you for the help! ❤️

[sadeghbarati]

Hi, Nuxt3 is using ESM syntax by default,

Maybe it's about .nuxt folder delete it and try npm run dev again

or maybe because smooth-scrollbar does not have exports field in package.json this error is happens for you, I'll check later with GitHub repository package

There are many ways to solve it

• move smooth-scrollbar code in npm, yarn, pnpm workspaces (monorepo)
• publish your own scoped package on npm @tinokaartovuori/smooth-scrollbar
• patch-package
• aliases but without types autocompletes

[sadeghbarati]

I found there is difference between GitHub repository and published package

https://unpkg.com/browse/[email protected]/ OR https://www.npmjs.com/package/smooth-scrollbar?activeTab=explore

Processing of esm is a bit complicated in this package, and should be resolved in V9
For now you should take of it and create your own customized smooth-scrollbar lib with

• release fork of your smooth-scrollbar package
  • rename package.json name field to @tinokaartovuori/smooth-scrollbar
  • npm run bundle then npm run release

• or go with tsup
  • https://github.com/egoist/ts-lib-starter

[tinokaartovuori]

Thank you, you are the best! ❤️
I released my version and now it is working!

I had some TypeScript version issues and this part gave me some errors:

src/scrollbar.ts - line 155

// enable touch event capturing in IE, see:
// https://github.com/idiotWu/smooth-scrollbar/issues/39
if (window.navigator.msPointerEnabled) {
  containerEl.style.msTouchAction = "none";
}

I made some modifications and got it working tho... I think...