Some issue with propTypes?

bali182 commented 7 years ago

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">

gql

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.

OlegIlyenko commented 7 years ago

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?

bali182 commented 7 years ago

Sure, will do!

kachkaev commented 7 years ago

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?

OlegIlyenko commented 7 years ago

@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

kachkaev commented 7 years ago

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.

kachkaev commented 7 years ago

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

OlegIlyenko commented 7 years ago

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

kachkaev commented 7 years ago

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!

kachkaev commented 7 years ago

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:
screen shot 2017-03-01 at 23 19 03

OlegIlyenko commented 7 years ago

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>

OlegIlyenko commented 7 years ago

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

https://github.com/OlegIlyenko/graphiql-workspace/commit/587ae65d365a7aec59c1d19df850181e5ba4abb8#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.

kachkaev commented 7 years ago

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. screen shot 2017-03-02 at 08 23 57

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

OlegIlyenko / graphiql-workspace

Some issue with propTypes? #5