Some issue with propTypes?

Question

Some issue with propTypes?

bali182 opened this issue 8 years ago · comments

Everything seems to work properly except some weird issue with propTypes. In terms of getting css to work I added

import 'graphiql/graphiql.css'
import 'graphiql-workspace/graphiql-workspace.css'

and also bootstrap as recommended in react-bootstrap docs according to #4 :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

Now the only weird thing I see is in the console:

First complaints about manually calling propTypes validation (bunch of these messages):

bundle.js:1287 Warning: You are manually calling a React.PropTypes validation function for the block prop on ButtonGroup

And also unrecognized properties (also quite a lot of these):

Warning: Unknown props animation, bsClass, unmountOnExit, bsStyle, stacked, justified, pullRight, pullLeft on
tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
in ul (created by Nav)
in Nav (created by Tabs)
in div (created by Tabs)
in TabContainer (created by Tabs)
in Tabs (created by Uncontrolled(Tabs))
in Uncontrolled(Tabs) (created by GraphiQLWorkspace)
in GraphiQLWorkspace

Not sure if this is done in workspace or some library it depends on.

ΘLΞG · Answer 1 · Mon Nov 28 2016 00:45:33 GMT+0800 (China Standard Time)

hmmm.. I'm not quite sure what is wrong in your setup. I tried it with my webpack and it works quite well (in fact http://toolbox.sangria-graphql.org/graphiql already uses graphiql-workspace).

Based on the prop names, I guess something is wrong with react-bootstrap. I would appreciate if you maybe could look at differences in your project and the graphql-toolbox. There should be something... maybe different version or react, react-bootstrap or some other lib?

Balázs Édes · Answer 2 · Mon Nov 28 2016 01:28:19 GMT+0800 (China Standard Time)

Sure, will do!

Alexander Kachkaev · Answer 3 · Mon Feb 20 2017 20:49:40 GMT+0800 (China Standard Time)

I faced the same issue after updating deps in graphiql-workspace-app (haven't pushed the result yet). The component loads, but the browser console is full of warnings. What did you end up with @bali182?

ΘLΞG · Answer 4 · Mon Feb 20 2017 23:42:32 GMT+0800 (China Standard Time)

@kachkaev I would suggest you to check new v1.0.1. We updated some of the dependencies:

https://github.com/OlegIlyenko/graphiql-workspace/releases/tag/v1.0.1

Maybe this will help

Alexander Kachkaev · Answer 5 · Tue Feb 21 2017 01:12:21 GMT+0800 (China Standard Time)

That's what I did. Basically I updated all the deps in that project by running ncu -u, then did npm install; npm start and saw all those React warnings.

Alexander Kachkaev · Answer 6 · Tue Feb 21 2017 01:14:42 GMT+0800 (China Standard Time)

@OlegIlyenko how does your browser console look after updating all deps? Do you see any warnings?

ΘLΞG · Answer 7 · Tue Feb 21 2017 01:47:42 GMT+0800 (China Standard Time)

no, I don't I saw any warnings after the update. Maybe graphiql-workspace-app uses some outdated peer dependencies?

Alexander Kachkaev · Answer 8 · Tue Feb 21 2017 02:26:12 GMT+0800 (China Standard Time)

I'll try again and will let know how it goes. Didn't spend much time on figuring out what could be wrong this weekend. Good to see that not everyone experiences this!

Alexander Kachkaev · Answer 9 · Thu Mar 02 2017 07:35:17 GMT+0800 (China Standard Time)

Hi Oleg,

I tried updating the packages once again, but still saw a lot of warnings. Here's the latest package.json (develop branch of graphiql-workspace-app):
https://gitlab.com/kachkaev/graphiql-workspace-app/blob/develop/package.json

Chrome's console is pretty full unfortunately:

ΘLΞG · Answer 10 · Thu Mar 02 2017 07:40:29 GMT+0800 (China Standard Time)

hmm... there is definitely something strange going on with dependencies and their versions. Just today I released a new version and double checked that there are no warnings or errors in the console. I would suggest you to take this self-contained minimal example of graphiql-workspace and compare it to graphiql-workspace-app. There should be some differences that cause these errors:

<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>GraphiQL Workspace Example</title>

    <link rel="stylesheet" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <link rel="stylesheet" media="screen" href="//cdnjs.cloudflare.com/ajax/libs/graphiql/0.9.3/graphiql.min.css">
    <link rel="stylesheet" media="screen" href="//unpkg.com/graphiql-workspace@1.0.3/graphiql-workspace.css">

    <script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
    <script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
    <script src="//unpkg.com/graphiql-workspace@1.0.3/graphiql-workspace.js"></script>
  </head>
  <body>
    <div id="workspace" class="graphiql-workspace"></div>

    <script>
      var config = new graphiqlWorkspace.AppConfig("graphiql", {});

      ReactDOM.render(
        React.createElement(graphiqlWorkspace.GraphiQLWorkspace, {config: config}),
        document.getElementById('workspace'));
    </script>
  </body>
</html>

ΘLΞG · Answer 11 · Thu Mar 02 2017 08:02:23 GMT+0800 (China Standard Time)

ok now I'm super confused 🙃 Just checked package.json and turns out that most of the dependencies are very outdated...

587ae65#diff-b9cfc7f2cdf78a7f4b91a753d10865a2L33

I updated everything and published v1.0.4:

https://github.com/OlegIlyenko/graphiql-workspace/releases/tag/v1.0.4

Would be great if you could check it and let me know whether it solves the issue.

Alexander Kachkaev · Answer 12 · Thu Mar 02 2017 16:27:07 GMT+0800 (China Standard Time)

Thanks! All of that red text is gone now, I updated master in graphiql-workspace-app. Dropzone might still need a bit of refactoring, but It's not that crucial.

I might have a look at it later if I find time, but can't promise at the moment!