broken?

[mizlan]

I created a fresh new create-react-app project and tried to create an Allotment but I don't see any separator and nothing is draggable. Node version 18 and 20, React v18.2.0

[mizlan]

I also get a version conflict with the recently merged dependabot changes with rollup:

npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/rollup
npm ERR!   dev rollup@"3.23.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer rollup@"^2.0.0" from [email protected]
npm ERR! node_modules/rollup-plugin-terser
npm ERR!   dev rollup-plugin-terser@"7.0.2" from the root project

[mizlan]

The following React app also has the following error:

import React from 'react';
import { Allotment, setSashSize } from 'allotment'

const App = () => {
  return (
    <div style={{padding: '40px'}}>
      <Allotment vertical={true}>
        <Allotment.Pane maxSize={600}>
          <p>Lorem Ipsum</p>
        </Allotment.Pane>
        <Allotment.Pane maxSize={400}>
          <p>Lorem Ipsum</p>
        </Allotment.Pane>
      </Allotment>
    </div>
  );
}

export default App;

ERROR
ResizeObserver loop completed with undelivered notifications.
handleError@http://localhost:3000/static/js/bundle.js:39217:58
./node_modules/webpack-dev-server/client/overlay.js/createOverlay/<@http://localhost:3000/static/js/bundle.js:39236:18

It seems this error only occurs with attempting to set vertical

[mizlan]

It seems like allotment's current behavior is to just render the panes vertically with no separator and no resizing capabilities; I am trying to inspect the source code and I think no CSS is being applied in my case... looking further into it.

[woodreamz]

@mizlan I think you just forgot to read the Usage section :)

You just need to import the css

import 'allotment/dist/style.css';

[mizlan]

You are right... I am embarrassed. Sorry, and thanks!

[mizlan]

@woodreamz it is still not working even when importing the CSS

[johnwalley]

Hi @mizlan. I've tried to reproduce the problem with:

Node 20.3.1
npm 9.6.7
create-react-app 5.0.1
allotment 1.19.0
react 18.2.0

but with no success. Just one small thing to check. Are you giving your container element a height? I only ask because if it has height 0 then it often looks like the Allotment component isn't working.

Also, thanks for pointing out the rollup dependency conflict. I'll see if I can resolve it.

[acherkashin]

I faced the same issue, however importing @import "allotment/dist/style.css"; fixed it.
I've tried to import it in:

• App.less
• App.tsx

It works in both situations.