Closed elringus closed 1 year ago
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
});
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.
@KingSora Something weird is going on. I've made two equal repros:
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
.
@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...
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...
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!
@Elringus glad I could help! Also thanks A LOT for your kind sponsorship - that made my day :)
Describe the bug
clickScroll:true
is not working with react.To Reproduce Steps to reproduce the behavior:
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