Javascript error when dragging splitter in storybook

[svdoever]

[fabien0102]

@svdoever Closed by #36 or it's something else?

[svdoever]

@fabien0102 no is something else... tried to solve it, but can't find it. Is resizing the splitter working for you? Tried also to disable right side and getting it to botom using:

setOptions({
  name: 'My website',
  downPanelInRight: false
});

but did not help.

[fabien0102]

Ok, I got the bug at home, very strange! I'm trying to debug fix this in the morning :wink:

[fabien0102]

So, apparently, it's a problem with ReactDOM.findDOMNode() in SplitPane… Very very strange 😕

https://github.com/tomkp/react-split-pane/blob/master/src/SplitPane.js#L100 https://reactjs.org/docs/react-dom.html#finddomnode

[svdoever]

I tried to debug it myself as well, but could not solve it. Tried to update to latest version of react-split-pane, but both npm and yarn messed up the whole installation...

[fabien0102]

I have updated storybook and storybook-addons too, nothing happens ^^ I have tried react-split-pane alone in the last CRA (so with react 16) it works! Very very weird…

[svdoever]

What is CRA?

[fabien0102]

Create React App -> https://github.com/facebookincubator/create-react-app (official boileplate for react ;) )

[svdoever]

Haha, all those acronyms... - use it all the time:-) Your Gatsby template is the only project where I can reproduce this issue, works in all other situations:-(

[fabien0102]

I tried to remove everything (typescript, webpack.config, addons, stories) So just a basic example with a helloword story in javascript, always the same issue ^^ I'm trying to remove yarn.lock and node_module, after that, I don't have more idea!

[fabien0102]

😢 After a total reinstall of my node_modules without any yarn.lock, same result… Very very strange…

[fabien0102]

Always the same issue after a getstorybook! My god!

[fabien0102]

I got something!

Reproduction steps:

• new create-react-app
• getstorybook -> here everything works
• yarn add gatsby
• yarn storybook -> BIM! no more panel dragging

So something happens between storybook and gatsby dependencies… But what!? ^^

[fabien0102]

So, that seams to be a yarn issue, it's working perfectly with npm i on create-react-app. But obviously, I got manyyyyyyy other errors with storybook (with npm on this starter)

[fabien0102]

Ok now all is working, it was just double types declaration.

Dirty fix:

$ rimraf node_modules/\@types/react-test-renderer/node_modules
$ rimraf node_modules/\@types/react-dom/node_modules

@svdoever Do you an idea to fix this kind of issue? Or I just add a basic post-install script to have a dirty fix…

[svdoever]

In the tsconfig in the "paths" node it should be possible to specify which type definition files should have precendence in case of double type declarations, i.e.

{
    "compilerOptions": {
        "baseUrl": ".",
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "allowSyntheticDefaultImports": true,
        "module": "commonjs",
        "target": "esnext",
        "jsx": "react",
        "lib": ["dom", "esnext"],
        "types": [
            "webpack-env",
            "node"
        ],
        "typeRoots": [
            "./types",
            "node_modules/@types",
            "node_modules"
        ],
        "paths": { 
            "react": ["./node_modules/@types/react"],
            "*": ["./types/*", "*"]
        }
    },
    "include": [
        "./src/**/*"
    ]
}

maybe it is possible to solve this issue tht way?

[fabien0102]

Finally, I had just updgrade local types version for react, so no more double dependencies ;) But thanks for you tips, I keep this in mind for the next time it happens ^^

[svdoever]

@fabien0102 when I install a fresh version of the GitHub repo I still get the splitter error... what should I do to solve the issue? Could you include the solution in the "fresh install"?

[fabien0102]

I’ve never merged my PR, I will try to do this today ;) But try with npm instead yarn, it’s a dependencies conflict issue ;)

[fabien0102]

@svdoever Normally it's ok with #38

Can you do a fresh install with npm and confirm that all are working for you? (I will close this issue after your confirmation 😉 )

[svdoever]

Did gatsby new gatsby-starter-prestine2 https://github.com/fabien0102/gatsby-starter, same issue. Then rimraf node_modules and npm install: issue fixed. Then rimraf node_modules and yarn: problem is back.

Does gatsby new use yarn for install?