[graphiql-plugin-code-exporter] [strict-mode] Element type is invalid: expected a string or a class/function but got: object
- Dominant language
- TypeScript
- Stars
- 16.9k
- Forks
- 1.9k
- Avg merge
- 22h 45m
- Merged PRs (30d)
- 70
Description
### 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](https://github.com/graphql/graphiql/blob/main/packages/graphiql-plugin-code-exporter/src/index.tsx#L13), which internally uses object.prototype.caller fn [here](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/src/utility/context.ts#L24), which is [deprecated](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage) 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.
Contributor guide
Assessment
This issue has not been assessed yet.