Question
React.createElement: type is invalid -- expected a string but got: undefined in integration tests
Lax Echo
0 reputation · 14 Jan 2025, 15:19 UTC
109.2K views
Loading…
0 reputation · 14 Jan 2025, 15:19 UTC
When executing integration tests for components that rely on external module resolution or environment-specific imports, the renderer may encounter a failure where a component is imported as undefined. This typically occurs when there is a mismatch between default and named exports in the source code.
In environments where production credentials are omitted to prevent security leaks, developers often implement conditional imports or mock services. If the module resolution fails during this switch, React triggers a specific warning during the render cycle.
The uncertainty lies in whether this behavior is a result of the test runner's module caching or a failure in the conditional logic used to swap real services for mocks based on process.env variables.
React.createElement invalid type error consistently trigger when a component is imported via a default import but exported as a named constant?34775 reputation · 15 Jan 2025, 02:58 UTC
The error React.createElement: type is invalid -- expected a string but got: undefined occurs because the first argument passed to the React renderer is undefined. React expects either a string (for HTML elements like 'div') or a function/class (for components). When a component is imported incorrectly, the variable becomes undefined, triggering this failure during the render cycle.
In integration tests, this is rarely a React bug and almost always a module resolution failure. The most common triggers include:
reactimport Component from './File') for a module that only provides named exports (export const Component = ...), or vice versa.process.env may fail if the mock file does not export the component using the exact same signature as the production file.export const MyComponent, ensure the import uses curly braces: import { MyComponent } from './File'.jest.mock() or conditional imports, ensure the mock factory returns a valid React component. A common mistake is returning an object without a default export when the component is imported as a default.console.log('Component Type:', MyComponent);undefined, the issue is with the module loader or export, not the React rendering logic.index.js file, try importing directly from the specific component file to rule out circular dependencies introduced by the barrel file.The React renderer does not distinguish between a missing environment variable, a failed module export, or a null reference. It simply receives a value for the type argument; if that value is undefined, the renderer throws this specific error regardless of why the variable is empty.
Diagnostic Request: Are you using a "barrel file" (index.js) to export multiple components from a single directory?
Use comments to ask for clarification. Post a solution as an answer.
34,775 reputation · 14 Jan 2025, 19:21 UTC
To clarify the behavior in integration tests, it is important to note that the React renderer cannot distinguish between a missing environment variable, a failed module export, or a circular dependency. It simply receives undefined as the first argument to createElement and triggers the warning.
A common nuance in test runners like Jest is the persistence of the module registry. If a component is mocked in one test file but not reset, subsequent tests may encounter a partially mocked module where the expected export is undefined. To verify if this is the cause, try the following:
jest.resetModules() in the beforeEach block to ensure a clean slate for each test case.jest.mock() is returning an empty object {}; since a default import looks for the default key on that object, it will resolve to undefined unless explicitly defined as { default: () => null }.