Warning '@emotion/react' is already loaded

[Mamaduka]

I started seeing the @emotion/react is already loaded warning in recent builds. Not sure if it's related to build tooling refactoring or something else. The warning trace points to Private APIs.

Screeenshot

[CreativeDive]

The same in my case. I think the message appeared for me after I installed one of the latest Gutenberg versions.

[t-hamano]

This issue appears to be caused by #72480.

While I'm not sure of the root cause, but it seems that removing emotion from the block editor package can resolve the issue. Since the emotion is only used in one place in the block editor, it's easy to remove:

Diff

diff --git a/package-lock.json b/package-lock.json
index 8b6caf6f7f..6bf3896fa6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53541,8 +53541,6 @@
                        "version": "15.9.0",
                        "license": "GPL-2.0-or-later",
                        "dependencies": {
-                               "@emotion/react": "^11.7.1",
-                               "@emotion/styled": "^11.6.0",
                                "@react-spring/web": "^9.4.5",
                                "@wordpress/a11y": "file:../a11y",
                                "@wordpress/api-fetch": "file:../api-fetch",
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 0d9f4553bb..4453377e32 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -52,8 +52,6 @@
                "build-module/hooks/**"
        ],
        "dependencies": {
-               "@emotion/react": "^11.7.1",
-               "@emotion/styled": "^11.6.0",
                "@react-spring/web": "^9.4.5",
                "@wordpress/a11y": "file:../a11y",
                "@wordpress/api-fetch": "file:../api-fetch",
diff --git a/packages/block-editor/src/components/dimensions-tool/width-height-too
l.js b/packages/block-editor/src/components/dimensions-tool/width-height-tool.js
index 4c45dd6fec..a76cc8b2e0 100644
--- a/packages/block-editor/src/components/dimensions-tool/width-height-tool.js
+++ b/packages/block-editor/src/components/dimensions-tool/width-height-tool.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
 /**
  * WordPress dependencies
  */
@@ -12,10 +7,6 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const SingleColumnToolsPanelItem = styled( ToolsPanelItem )`
-       grid-column: span 1;
-`;
-
 /**
  * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUni
tControlUnit} WPUnitControlUnit
  */
@@ -72,12 +63,13 @@ export default function WidthHeightTool( {
 
        return (
                <>
-                       <SingleColumnToolsPanelItem
+                       <ToolsPanelItem
                                label={ __( 'Width' ) }
                                isShownByDefault={ isShownByDefault }
                                hasValue={ () => width !== '' }
                                onDeselect={ onDimensionChange( 'width' ) }
                                panelId={ panelId }
+                               style={ { gridColumn: 'span 1' } }
                        >
                                <UnitControl
                                        label={ __( 'Width' ) }
@@ -89,13 +81,14 @@ export default function WidthHeightTool( {
                                        onChange={ onDimensionChange( 'width' ) }
                                        size="__unstable-large"
                                />
-                       </SingleColumnToolsPanelItem>
-                       <SingleColumnToolsPanelItem
+                       </ToolsPanelItem>
+                       <ToolsPanelItem
                                label={ __( 'Height' ) }
                                isShownByDefault={ isShownByDefault }
                                hasValue={ () => height !== '' }
                                onDeselect={ onDimensionChange( 'height' ) }
                                panelId={ panelId }
+                               style={ { gridColumn: 'span 1' } }
                        >
                                <UnitControl
                                        label={ __( 'Height' ) }
@@ -107,7 +100,7 @@ export default function WidthHeightTool( {
                                        onChange={ onDimensionChange( 'height' ) }
                                        size="__unstable-large"
                                />
-                       </SingleColumnToolsPanelItem>
+                       </ToolsPanelItem>
                </>
        );
 }

Or can this be resolved by modifying the build process? cc @youknowriad

[youknowriad]

I think I suspect that this issue always existed and was hidden and that PR highlighted it. I agree with removing emotion.

[Mamaduka]

Thanks for digging into this, @t-hamano!

I agree that removing emotion from block editor packages makes more sense. There's no reason to use it when a simple style override will do.

P.S. I think there's a plan to stop using Emotion for components. See: #73714. cc @jsnajdr

[jsnajdr]

The issue happens when the @emotion/react library is bundled twice in two different scripts. I suspect it's caused by the dataviews package, which bundles its own copy of @wordpress/components.

And yes, going to be fixed soon by Emotion removal.

[youknowriad]

I suspect it's caused by the dataviews package, which bundles its own copy of @wordpress/components.

This is not the case in the context of WordPress Core.

[jsnajdr]

This is not the case in the context of WordPress Core.

I see, the real reason is that block-editor uses and bundles Emotion independently from components. Then we get two instances.

Fixing in #73799 which migrates the single usage of Emotion in block-editor, a very simple one.