error in using react-split with nested library split.js

[maciejwozniak]

Hello, in my application I'm using react-split 2.0.7. This library has nested deps split.js and after upgrading this library to 1.6.0 an error occurs:

    at SplitWrapper.componentDidMount (react-split.es.js:46)
    at commitLifeCycles (react-dom.development.js:19690)
    at commitLayoutEffects (react-dom.development.js:22662)
    at HTMLUnknownElement.callCallback (react-dom.development.js:189)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
    at invokeGuardedCallback (react-dom.development.js:291)
    at commitRootImpl (react-dom.development.js:22404)
    at unstable_runWithPriority (scheduler.development.js:659)
    at runWithPriority$1 (react-dom.development.js:11077)
    at commitRoot (react-dom.development.js:22246)
    at finishSyncRender (react-dom.development.js:21663)
    at performSyncWorkOnRoot (react-dom.development.js:21649)
    at react-dom.development.js:11131
    at unstable_runWithPriority (scheduler.development.js:659)
    at runWithPriority$1 (react-dom.development.js:11077)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11126)
    at flushSyncCallbackQueue (react-dom.development.js:11114)
    at scheduleUpdateOnFiber (react-dom.development.js:21056)
    at Object.enqueueSetState (react-dom.development.js:12676)
    at AsyncFunc.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:464)
    at AsyncFunc._callee$ (AsyncFunc.js:25)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:282)
    at Generator.prototype.<computed> [as next] (runtime.js:116)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)``` 

Unitl version split.js was 1.5.9 everything worked fine. 

[nathancahill]

Can you share your webpack config?

[maciejwozniak]

  "name": "my-app",
  "version": "2.9.6",
  "private": true,
  "dependencies": {
    "antd": "^3.26.16",
    "antd-local-icon": "^0.1.3",
    "classnames": "^2.2.6",
    "clone": "^2.1.2",
    "connected-react-router": "^6.8.0",
    "cookie-storage": "^6.0.0",
    "deepmerge": "^4.2.2",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "enzyme-to-json": "^3.4.4",
    "history": "^4.10.1",
    "immutable": "^4.0.0-rc.12",
    "jest": "23.6.0",
    "jwt-decode": "^2.2.0",
    "moment": "2.25.2",
    "node-sass": "^4.9.3",
    "nprogress": "^0.2.0",
    "postcss-inline-rtl": "^0.9.8",
    "prop-types": "^15.7.2",
    "query-string": "^6.2.0",
    "react": "^16.11.0",
    "react-color": "^2.17.3",
    "react-dom": "^16.11.0",
    "react-intl": "^2.3.0",
    "react-placeholder": "^3.0.2",
    "react-quill": "^1.3.3",
    "react-redux": "^7.2.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "2.0.3",
    "react-sidebar": "^2.3.2",
    "react-smooth-scrollbar": "^8.0.6",
    "react-custom-scrollbars": "^4.2.1",
    "react-split": "^2.0.7",
    "react-throttle": "^0.3.0",
    "react-window-size-listener": "^1.0.10",
    "redux": "^4.0.1",
    "redux-devtools": "^3.5.0",
    "redux-devtools-dock-monitor": "^1.1.3",
    "redux-devtools-log-monitor": "^1.4.0",
    "redux-saga": "^1.1.1",
    "redux-thunk": "^2.3.0",
    "seamless-immutable": "^7.1.3",
    "smooth-scrollbar": "^8.2.5",
    "styled-components": "^5.0.1",
    "styled-theme": "^0.3.3",
    "universal-cookie": "^3.0.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "test-ci": "react-scripts test --env=jsdom --reporters=default --reporters=jest-junit --updateSnapshot",
    "test-watch-off": "react-scripts test --env=jsdom --watchAll=false",
    "coverage": "react-scripts test --env=jsdom --watchAll=false --coverage",
    "eject": "react-scripts eject"
  },
  "jest-junit": {
    "suiteName": "jest tests",
    "outputDirectory": ".",
    "outputName": "./junit.xml",
    "classNameTemplate": "{classname}-{title}",
    "titleTemplate": "{classname}-{title}",
    "ancestorSeparator": " › ",
    "usePathForSuiteName": "true"
  },
  "homepage": "/mop",
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "jest-junit": "^6.4.0",
    "prettier": "1.18.2",
    "react-dates": "^21.8.0",
    "redux-devtools-extension": "^2.13.8",
    "redux-mock-store": "^1.5.3"
  }
}

[nathancahill]

Can you also post the code that includes the <Split> component? I'm not able to replicate the issue.

[maciejwozniak]

it was very complex, so I made it simpler, but still with same error.

import {connect} from "react-redux";
import Split from "react-split";

class Dashboard extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return <div>
            <Split>
                <div>component1</div>
                <div>component2</div>
            </Split>

        </div>
    }
}
function mapStateToProps(state) {
    return {
        panels: state.Panel.panels,
        items: state.Panel.items,
        loading: state.Panel.loading,
        currentPanel: state.Panel.currentPanel
    };
}

export default connect(mapStateToProps)(Dashboard);

[jacol84]

Hi @nathancahill
I reproduced this bug i my repo
https://github.com/jacol84/mija-react-split/

[nathancahill]

Thanks for the example repo! I was able to replicate. I released a fix in react-split@2.0.8

[jacol84]

when I change ^2.0.8 I have new Bug in my repo
https://github.com/jacol84/mija-react-split/

    The above error occurred in the </static/media/react-split.b4c36863.mjs> component:
    in /static/media/react-split.b4c36863.mjs (at dashApp.js:11)
    in div (at dashApp.js:10)
    in DashApp (at src/index.js:6)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

[nathancahill]

Ok, I see. Webpack does not support .mjs ESM modules yet. They are imported as static files. Reverted that change and published split.js@^1.6.1 and react-split@^2.0.9

[jacol84]

now is working with react-split@2.0.9 and split.js@1.6.1:
thank you @nathancahill

[nathancahill]

Thanks for your help debugging @jacol84!

[jacol84]

you're welcome