diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index cb6e99dec60..5c469f94a12 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -39,6 +39,12 @@ import { writingModeStyles } from './writing_mode.styles'; // once all EUI components are converted to Emotion import '../dist/eui_theme_light.css'; +/** + * Ensure that any provider errors throw & warn us early + */ +import { setEuiDevProviderWarning } from '../src/services'; +setEuiDevProviderWarning('error'); + /** * Prop controls */ @@ -51,7 +57,7 @@ const preview: Preview = { (Story, context) => (
{ }; const isLocalDev = window.location.host.includes('803'); + setEuiDevProviderWarning(isLocalDev ? 'error' : 'warn'); // Note: this can't be in a useEffect, otherwise it fires too late for style memoization warnings to error on page reload return ( { testOnReactVersion(['18'])( 'throws an error if passed anonymous functions', () => { + setEuiDevProviderWarning('error'); expect(() => - renderHook(() => useEuiMemoizedStyles(() => ({}))) + renderHook(() => useEuiMemoizedStyles(() => ({})), { + wrapper: EuiThemeProvider, + }) ).toThrowError( 'Styles are memoized per function. Your style functions must be statically defined in order to not create a new map entry every rerender.' ); + setEuiDevProviderWarning(undefined); } ); }); diff --git a/src/services/theme/style_memoization.tsx b/src/services/theme/style_memoization.tsx index de8d8cd59dd..caf4bab3a91 100644 --- a/src/services/theme/style_memoization.tsx +++ b/src/services/theme/style_memoization.tsx @@ -19,6 +19,7 @@ import React, { import { useUpdateEffect } from '../hooks'; import { useEuiTheme, UseEuiTheme } from './hooks'; +import { emitEuiProviderWarning } from './warning'; type StylesMap = Record; // Typically an object of serialized css`` styles, but can have any amount of nesting, so it's not worth it to try and strictly type this type MemoizedStylesMap = WeakMap; @@ -60,7 +61,7 @@ const getMemoizedStyles = ( euiThemeContext: UseEuiTheme ) => { if (!stylesGenerator.name) { - throw new Error( + emitEuiProviderWarning( 'Styles are memoized per function. Your style functions must be statically defined in order to not create a new map entry every rerender.' ); }