graphql / graphql/graphiql

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

Open
#3,416 0 comments 0 reactions 0 assignees View on GitHub
bug graphiql
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
Screenshot 2023-08-29 at 11 46 53 AM

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.