[graphiql-plugin-code-exporter] [strict-mode] Element type is invalid: expected a string or a class/function but got: object

[abhi40308]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

Plugin code exporter is not working with latest dependencies. It used to work earlier with older dependencies. With the dependencies mentioned below, I'm getting Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. as soon as i click on the code-explorer in graphiql left sidebar.

Edit: My hunch was that it wasn't working due to useOperationsEditorState hook that it depends on, which is giving runtime exception in strict mode: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them. I assume it is because we are using useOperationsEditorState hook here, which internally uses object.prototype.caller fn here, which is deprecated in strict mode. But the above error occurs regardless of this. I tried using code-exporter version ~0.1.2, using the hook useExporterPlugin which doesn't depend on useOperationsEditorState, but the error is still there.

Expected Behavior

This should work on runtime, right now i'm getting this screen as soon as i hit the code-exporter button on graphiql

Steps To Reproduce

1. Install these deps:

"@graphiql/plugin-code-exporter": "0.3.4",
    "@graphiql/plugin-explorer": "0.3.4",
    "@graphiql/react": "0.19.3",
    "@graphiql/toolkit": "0.9.1",
    "graphiql": "3.0.5",

2. Add graphiql-code-exporter plugin.
3. Click on the plugin from the left sidebar.

Environment

• GraphiQL Version: 3.0.5
• OS: MacOS
• Browser: Chrome
• Bundler: Webpack
• react Version: 18.2.0
• graphql Version: 16.6.0

Anything else?

This used to work earlier with older versions of packages.