clickScroll not working with react

[elringus]

Describe the bug clickScroll:true is not working with react.

To Reproduce Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/sandpack-project-forked-vf843q?file=/index.js
2. In preview pan click on scrollbar (outside of handle)

Expected behavior Scrollbar transitions to active (or hovered) state and scroll happens.

Actual behavior Nothing happens.

Examples https://codesandbox.io/s/sandpack-project-forked-vf843q?file=/index.js

[KingSora]

Good day @Elringus :)

The mistake lies with how you are using the useOverlayScrollbars hook.. Currently you do:

const [initialize] = useOverlayScrollbars({
  scrollbars: { clickScroll: true },
  defer: true
});

But the correct usage is:

const [initialize] = useOverlayScrollbars({
  options: {
    scrollbars: { clickScroll: true },
  },
  defer: true
});

[elringus]

Ah, my bad, it was a typo in the repro. It's actually not working in my main project while having correct config with scrollbars under options. After fixing it in the repro it started working, though. I'll try to update the repro to replicate the behaviour in the main project.

[elringus]

@KingSora Something weird is going on. I've made two equal repros:

1. One published on codesandbox: https://codesandbox.io/s/sandpack-project-forked-vf843q?file=/src/index.tsx
2. Another I'm running locally: https://github.com/Elringus/OverlayScrollbarsRepro

It's not reproducing on codesanbox, but is reproducing locally (Windows 10, tried latest versions of chrome and firefox).

Sorry for asking, but can you please check if it's reproducing for you? Just clone the repo and npm install, npm run start.

[KingSora]

@Elringus I've debugged it now for quite a bit and can confirm that webpack is causing the issue... For some reason its one time using the .cjs.js version (specified under the main field in the package.json) and the other time the .esm.js version (specified under the module field in the package.json).

This causes that the ClickScrollPlugin is registred in one and not the other version, and thus the plugin is not found when you click on the track to scroll...

A quick fix would be to set the resolve field in the webpack options to:

{
   resolve: {
      extensions: [".ts", ".tsx", ".js"],
      mainFields: ['browser', 'main'], // this fixes it
  },
}

I'm not sure whether I can fix this issue by setting something in the package.json or whether thats a webapck bug...

[KingSora]

I've also found out that by chaning the tsconfig.json compilerOptions.module field to something like

{
  "compilerOptions": {
      "module": "esnext"
  }
}

Also solves the issue... you basically have to make sure that imports from typescript and javascript are resolved in the same way.

I guess whats happening is that the ts-loader resolves to the main field (cjs) and the import inside overlayscrollbars-react resolves to the main field (esm) because its a normal js file...

[elringus]

Can confirm both solutions are working great. Guess changing tsconfig module to ES is the ultimate solution here, since the deploy target is web. Thank you so much for the help, you're the best!

[KingSora]

@Elringus glad I could help! Also thanks A LOT for your kind sponsorship - that made my day :)