Error 377: BigInt passed from Server Component to Client Component
Error 377 in React occurs when you pass a BigInt value from a Server Component to a Client Component. This error is minified in production builds to reduce bytes sent over the wire.
React · Errors and warnings · all subjects
react errors/377
33 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
How to fix Invalid ARIA Prop warning
To fix this warning, first check the spelling of your aria-* prop carefully. If you used aria-role, change it to role. If you are on the latest version of React DOM and have verified that you are using a valid property name listed in the ARIA specification, report a bug.
Invalid ARIA Prop warning trigger
The Invalid ARIA Prop warning fires when you attempt to render a DOM element with an aria-* prop that does not exist in the Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) specification.
Common ARIA prop misspellings
aria-labelledby and aria-activedescendant are often misspelled and should be checked carefully for correct spelling.
aria-role confusion with role attribute
If you wrote aria-role, you may have meant to use the role attribute instead, which is not an aria-* prop.
Valid ARIA props reference
Valid aria-* props are listed in the Web Accessibility Initiative (WAI) ARIA specification at https://www.w3.org/TR/wai-aria-1.1/#states_and_properties.
Complete list of removed ReactDOMTestUtils APIs
The following ReactDOMTestUtils APIs have been removed: mockComponent(), isElement(), isElementOfType(), isDOMComponent(), isCompositeComponent(), isCompositeComponentWithType(), findAllInRenderedTree(), scryRenderedDOMComponentsWithClass(), findRenderedDOMComponentWithClass(), scryRenderedDOMComponentsWithTag(), findRenderedDOMComponentWithTag(), scryRenderedComponentsWithType(), findRenderedComponentWithType(), renderIntoDocument, and Simulate.
ReactDOMTestUtils.act() deprecated in favor of react act
The `act` function from `react-dom/test-utils` has been deprecated. It should be imported from the `react` package instead. Change `import {act} from 'react-dom/test-utils'` to `import {act} from 'react'`.
ReactDOMTestUtils APIs removed except act
All ReactDOMTestUtils APIs except `act` have been removed. React Team recommends migrating tests to @testing-library/react for modern and well-supported testing.
ReactDOMTestUtils.renderIntoDocument replacement
The `renderIntoDocument` function from react-dom/test-utils has been removed. Replace it with `render` from @testing-library/react. Change `import {renderIntoDocument} from 'react-dom/test-utils'` and `renderIntoDocument(<Component />)` to `import {render} from '@testing-library/react'` and `render(<Component />)`.
ReactDOMTestUtils.Simulate replacement
The `Simulate` function from react-dom/test-utils has been removed. Replace it with `fireEvent` from @testing-library/react. Change `import {Simulate} from 'react-dom/test-utils'` to `import {fireEvent} from '@testing-library/react'`, and replace `Simulate.click(element)` with `fireEvent.click(element)`. Note that `fireEvent` dispatches an actual event on the element and doesn't just synthetically call the event handler.
React supports multiple independent copies on one page
React supports using multiple independent copies on one page, such as when an app and a third-party widget both use React. The error only occurs if require('react') resolves differently between the component and the react-dom copy it was rendered with.
Do not call Hooks inside functions passed to useMemo, useReducer, or useEffect
Calling Hooks inside functions passed to useMemo, useReducer, or useEffect is not supported. Move Hook calls outside these functions to the top level of the function component.
Hooks can only be called inside the body of a function component
The error message 'Hooks can only be called inside the body of a function component.' occurs when you attempt to use Hooks incorrectly. This is a common React error that has three primary causes: breaking the Rules of Hooks, mismatching versions of React and React DOM, or having multiple copies of React in the same app.
Rules of Hooks overview
Functions whose names start with 'use' are called Hooks in React. Hooks must be called at the top level of your React function, before any early returns. You can call Hooks at the top level in the body of a function component or at the top level in the body of a custom Hook.
Do not call Hooks inside conditions or loops
Calling Hooks inside conditions or loops is not supported and will cause the error. Move all Hook calls outside of conditions and loops to the top level of the function.
Do not call Hooks after a conditional return statement
Calling Hooks after a conditional return statement is not supported. Move Hook calls before any conditional return statements.
Do not call Hooks in event handlers
Calling Hooks inside event handlers is not supported. Move Hook calls to the top level of the function component instead.
Do not call Hooks in class components
Calling Hooks in class components is not supported. Use function components instead of class components if you need to use Hooks.
Custom Hooks may call other Hooks
Custom Hooks can call other Hooks because custom Hooks are also supposed to only be called while a function component is rendering. This is the purpose of custom Hooks.
Mismatching versions of React and React DOM cause Hook errors
Using a version of react-dom older than 16.8.0 or react-native older than 0.59 will cause Hook errors because these versions do not support Hooks. Check your version with 'npm ls react-dom' or 'npm ls react-native'.
Multiple copies of React break Hooks
If your application has two different copies of the React package, the react import from your application code and the react import from inside the react-dom package will resolve to different module exports, causing Hooks to fail. Run 'npm ls react' to check for duplicate React packages.
Fix duplicate React with npm link
If npm link or an equivalent creates multiple React copies between an application folder and a library folder, run 'npm link ../myapp/node_modules/react' from the library folder to make it use the application's React copy.
Unknown Prop warning definition
The unknown-prop warning fires when you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute or property. It indicates that a DOM element has spurious props that should not be there.
Unknown Prop caused by forwarding props with spread operator
The unknown-prop warning occurs when using {...props} or cloneElement(element, props) and accidentally forwarding props that were intended only for the parent component to a child component. The parent component needs to 'consume' any prop intended for itself and not forward it to the child.
Unknown Prop caused by non-standard DOM attribute
The warning appears when using a non-standard DOM attribute on a native DOM node. If you need to attach custom data to a standard DOM element, use a custom data attribute instead (data-* attributes as described on MDN).
Unknown Prop caused by unrecognized React attribute
React may not yet recognize certain attributes. If this is the case, it will likely be fixed in a future version of React. As a workaround, write the attribute name in lowercase and React will allow you to pass it without a warning.
Unknown Prop caused by lowercase component name
The warning occurs when using a React component with a lowercase name, such as <myButton />. React interprets lowercase tags as DOM tags, not React components. React JSX transform uses the upper vs. lower case convention to distinguish user-defined components from DOM tags. For React components, use PascalCase, for example <MyButton /> instead of <myButton />.
Fix Unknown Prop by destructuring props with spread
When passing props to a DOM element, destructure the object to separate props intended for the parent component from the rest. Use const { layout, ...rest } = props to extract component-specific props, then pass only the rest to the DOM element using {...rest}. This prevents custom props like 'layout' from being forwarded to the underlying DOM element.
Fix Unknown Prop by creating new object and deleting keys
Create a new object copying all props using Object.assign({}, props), then delete the keys for props that are intended for the parent component using delete divProps.layout. Pass the modified object to the DOM element. Never delete from the original props object as it should be treated as immutable.
Unknown Prop fix example with destructuring
function MyDiv(props) { const { layout, ...rest } = props if (layout === 'horizontal') { return <div {...rest} style={getHorizontalStyle()} /> } else { return <div {...rest} style={getVerticalStyle()} /> } } This example shows the correct way to handle component-specific props. The 'layout' prop is consumed by the component and not forwarded to the div element.
Unknown Prop fix example with Object.assign
function MyDiv(props) { const divProps = Object.assign({}, props); delete divProps.layout; if (props.layout === 'horizontal') { return <div {...divProps} style={getHorizontalStyle()} /> } else { return <div {...divProps} style={getVerticalStyle()} /> } } This example shows an alternative approach using Object.assign to create a copy of props and then deleting component-specific keys before passing to the DOM element.
Unknown Prop bad example with spread operator
function MyDiv(props) { if (props.layout === 'horizontal') { return <div {...props} style={getHorizontalStyle()} /> } else { return <div {...props} style={getVerticalStyle()} /> } } This is incorrect because the 'layout' prop is forwarded to the div element, but 'layout' is not a valid DOM attribute. This causes the unknown-prop warning.