Update docs for commonjs import patterns

[Chetabahana]

Case

I updated package deps from v0.16.0 to v0.17.0, v0.17.1 and v0.17.2 which all are fine.
But got errors from the version v0.17.3 up to the latest v0.17.5 on React.createElement:

  const reactElement = React.createElement(GraphiQL, {
    query: currentQuerySource || kDefaultQuery,
    fetcher: fetcher,
    variables: '',
    response: '',
    onEditQuery: onEditQuery,
    onEditVariables: onEditVariables,
  })

Kindly please advise. Thanks.

Details

build.js:84381 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
warningWithoutStack @ build.js:84381
build.js:82442 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at createFiberFromTypeAndProps (build.js:82442)
    at createFiberFromElement (build.js:82465)
    at reconcileSingleElement (build.js:71339)
    at reconcileChildFibers (build.js:71399)
    at reconcileChildren (build.js:73909)
    at updateHostRoot (build.js:74380)
    at beginWork$1 (build.js:76003)
    at HTMLUnknownElement.callCallback (build.js:56149)
    at Object.invokeGuardedCallbackDev (build.js:56198)
    at invokeGuardedCallback (build.js:56253)
build.js:80104 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
    at Object.invokeGuardedCallbackDev (build.js:56209)
    at invokeGuardedCallback (build.js:56253)
    at beginWork$$1 (build.js:81593)
    at performUnitOfWork (build.js:80511)
    at workLoopSync (build.js:80484)
    at performSyncWorkOnRoot (build.js:80083)
    at scheduleUpdateOnFiber (build.js:79511)
    at updateContainer (build.js:82916)
    at build.js:83341
    at unbatchedUpdates (build.js:80246)

Screenshot

[acao]

hmm! so how are you importing graphiql, from CDN or via webpack using import or what?
from what I'm seeing, it seems like you might be doing a commonjs import, which means you need to

// index.js
const { default: GraphiQL } = require('graphiql');

now, because before we had this:

// index.js
module.exports = GraphiQL

but that broke tree shaking so now we do a default esm export instead:
https://github.com/graphql/graphiql/blob/master/packages/graphiql/src/index.js#L10

[acao]

so my bad, I should have updated docs and possibly made this a breaking change

[acao]

let me know if that fix works for you @Chetabahana. here are the available import patterns:

import { GraphiQL } from 'graphiql';
import GraphiQL from 'graphiql';
// note: using cjs will ead to larger bundler builds
const { GraphiQL } = require('graphiql');
const { default: GraphiQL } = require('graphiql');
const GraphiQL = require('graphiql').default;

[Chetabahana]

I was using this code :

const GraphiQL = require('graphiql')

I will try to use your suggestion and let you know.

[Chetabahana]

Thank you @acao. There is one working which is:

const { default: GraphiQL } = require('graphiql');

These two are not working (same errors):

const { GraphiQL } = require('graphiql');
const GraphiQL = require('graphiql').default;

Also the for Import code:

import { GraphiQL } from 'graphiql';
import GraphiQL from 'graphiql';

Detail error for the import:

Error: Parsing file /home/runner/work/tree/tree/test/fixtures/three.graphql/editor.js: 'import' and 'export' may appear only with 'sourceType: module' (4:0)
    at Deps.parseDeps (/home/runner/work/tree/tree/test/fixtures/three.graphql/node_modules/module-deps/index.js:510:15)
    at getDeps (/home/runner/work/tree/tree/test/fixtures/three.graphql/node_modules/module-deps/index.js:438:44)
    at /home/runner/work/tree/tree/test/fixtures/three.graphql/node_modules/module-deps/index.js:421:38
    at ConcatStream.<anonymous> (/home/runner/work/tree/tree/test/fixtures/three.graphql/node_modules/concat-stream/index.js:37:43)
    at ConcatStream.emit (events.js:215:7)
    at finishMaybe (/home/runner/work/tree/tree/test/fixtures/three.graphql/node_modules/readable-stream/lib/_stream_writable.js:630:14)
    at endWritable (/home/runner/work/tree/tree/test/fixtures/three.graphql/node_modules/readable-stream/lib/_stream_writable.js:638:3)
    at ConcatStream.Writable.end (/home/runner/work/tree/tree/test/fixtures/three.graphql/node_modules/readable-stream/lib/_stream_writable.js:594:41)
    at DuplexWrapper.onend (/home/runner/work/tree/tree/test/fixtures/three.graphql/node_modules/readable-stream/lib/_stream_readable.js:577:10)
    at Object.onceWrapper (events.js:299:28)

[acao]

interesting! import/export issue looks like its related to your bundler perhaps. i should add some tests for this as well. what are you using to bundle GraphiQL? im familiar with webpack and rollup, somewhat with parcel, and that message output looks unfamiliar, maybe even reminiscent of broccoli or gulp?

[Chetabahana]

Here is the code:

browserify editor.js -t brfs -o build.js --no-babelrc

It is placed in a build script and run with npm run-script via scripts field in package.json
It might be related to Babel. The newer version requires you install whichever plugins needs.
I am referring to this answer in Stackoverflow: https://stackoverflow.com/a/40029232/4058484

[acao]

ah ok! we just migrated our library build from the original browserify setup, but yeah it should still be supported for consumption just fine!

the babel config and plugin versions in the webpack example should give you a good start if you still need to finesse them!

[Chetabahana]

Ok thanks. I am going to look in to that option.

[acao]

i think you'll need to use babelify etc as well

[Chetabahana]

i am learning on it, the babelify is already in my current package.json but still confuse how to set webpack in to it, also for the build code:

browserify editor.js -t brfs -o build.js --no-babelrc

i do appreciate if you could advise more, here is my tutorial link at the moment
https://medium.com/@kishan020696/react-16-with-webpack-4-and-babel-7-7befed102817

[Chetabahana]

Finally I get my package up and running using your import code:

import GraphiQL from 'graphiql';

By following documentation of Babelify Options and Browserify Handbook on Configuring Transforms I changed the bundel code as below:

browserify -t brfs \
-t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ] \
editor.js > build.js --no-babelrc

Here is my current package.json. I am still on the way to bundle with webpack.