reactjs - Vous chargez @emotion/react alors qu'il est déjà chargé

J'ai l'impression d'avoir tout essayé ici, mais toute aide serait grandement appréciée pour résoudre ce problème.

J'ai un composant que j'ai publié, et je ne peux pas résoudre le message d'avertissement « Vous chargez @emotion/react ... ».

  // components package.json dependencies:
  "peerDependencies": {
    "@emotion/react": ">=10.x",
    "@emotion/styled": ">=10.x",
    "@hakit/core": "^1.0.1",
    "lodash": ">=4.x",
    "react": ">=16.x",
    "react-dom": ">=16.x"
  },
  "devDependencies": {
    "@emotion/babel-plugin": "^11.x"
  }

// components vite.config.ts
export default defineConfig(configEnv => {
  return {
    build: {
      lib: {
        entry: path.resolve(__dirname, 'src/index.ts'),
        name: 'hakit-components',
        formats: ['es', 'umd'],
        fileName: (format) => `hakit-components.${format}.js`,
      },
      rollupOptions: {
        external:[
          ...Object.keys(packageJson.peerDependencies),
          'react/jsx-runtime',
          'react-is',
          'javascript-time-ago/locale/en.json'
        ],
        output: {
          globals: {
            react: 'React',
            'react-dom': 'ReactDOM',
            '@emotion/styled': '@emotion/styled',
            '@emotion/react': '@emotion/react',
            'react/jsx-runtime': 'react/jsx-runtime',
            '@hakit/core': '@hakit/core',
            'lodash': 'lodash'
          }
        }
      },
      minify: true,
    },

    optimizeDeps: {
      include: ['@emotion/react']
    },
    resolve: {
      dedupe: ['@emotion/react'],
      alias: {
        '@emotion/react': '@emotion/react/jsx-runtime'
      },
    },
    plugins: [
      tsconfigPaths({
        root: path.resolve(__dirname, './')
      }),
      react(),
      linterPlugin({
        include: ['./src}/**/*.{ts,tsx}'],
        linters: [new EsLinter({ configEnv })],
      }),
    ],
  }
});

Ensuite, sur mon projet principal, j’installe le paquet ci-dessus, ainsi que @emotion/react @emotion/styled @emotion/babel-plugin comme dépendances de développement.

La configuration vite du projet principal :

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react({
    jsxImportSource: '@emotion/react',
    babel: {
      plugins: ['@emotion/babel-plugin'],
    },
  }),],
})

J'ai l'impression d'avoir lu une vingtaine de numéros du même problème, tous avec des solutions totalement différentes. J'aimerais juste savoir où je me suis trompé, si je le construis incorrectement du côté du paquet, ou si je l'utilise incorrectement du côté du projet, toute aide serait incroyable !