Not working with nextjs

[vineelsai26]

This module is not working properly with nextjs. I think it is not properly loading CSS with nextjs I tried everything in the docs to try to fix it but it didn't work at all here is what I used with nextjs https://codesandbox.io/s/icy-resonance-b683ik?file=/pages/index.js, I am not getting any resize bar at all

[leefsmp]

I'm not really familliar with nextjs but according to those comments it's definitely working with it. Maybe Entkenntnis could give us some insights.

[nnieddu]

Hello, I don't think the problem is nextJs because i have the exact same issue using React last version and with the same provided example (in my typescript project), no ReflexSplitter display / usable.

I notice that if i use :
ReflexContainer orientation="horizontal"
the horizontal type, the splitter appear and seems to be usable (cursor change on hover the slider) but nothing moove when i try.

(react: 18.1.0, react-dom: 18.1.0, typescript: 4.7.3 and react-reflex 4.0.9)

[leefsmp]

can't tell you without looking at a codepen or a sandbox, you must obviously be doing something wrong as the lib has been confirmed to work on react 18.

[vineelsai26]

I have already attached codesandbox link https://codesandbox.io/s/icy-resonance-b683ik?file=/pages/index.js I ported my code to react and it's working perfectly. It is only gives me that problem with nextjs

[nnieddu]

Maybe im doing something wrong but i have the same issue :
https://codesandbox.io/s/winter-sky-ttgnbe?file=/src/index.tsx:43-49

[leefsmp]

I don't have time to check more closely for now but it's very likely you have a problem with loading of the css, one way or another.

[Paki90]

Hello, I don't think the problem is nextJs because i have the exact same issue using React last version and with the same provided example (in my typescript project), no ReflexSplitter display / usable.

I notice that if i use : ReflexContainer orientation="horizontal" the horizontal type, the splitter appear and seems to be usable (cursor change on hover the slider) but nothing moove when i try.

(react: 18.1.0, react-dom: 18.1.0, typescript: 4.7.3 and react-reflex 4.0.9)

I have the same issue, splitter show for orientation horizontal, but not vertical. From console I see that splitter height is 0px so that's reason why is not showing. Have no clue why

Update: On splitter, I've set height: 'auto', and now it is working
<ReflexSplitter style={{ backgroundColor: "blueviolet", height: "auto" }} />

https://codesandbox.io/s/stoic-poitras-l0r5hx?file=/pages/index.js:512-516

Second option would be to wrap Reflex container with div and define height but sometimes this is not good solution
<div style={{ height: '100vh'}}> <ReflexContainer orientation="vertical"> ..... </ReflexContainer> </div>

[MaksimAndreevich]

Check your webpack settings.
On our project, he himself renamed the name of the styles (see the attached screenshot).
Maybe this will help you https://github.com/webpack-contrib/css-loader. Using this package, you can specify which imports will not be processed
or add line to css-loader auto: (resourcePath) => !resourcePath.endsWith('react-reflex/styles.css'),

[nnieddu]

Thanks i will look a that but the Paki90 solution work for me (set the height to auto).