unable to use my component library based on Material UI with a nextjs application (both typescript)

Question

On one side I have a component library using react, mui and emotion as peerDep.

package.json

"peerDependencies": {
  "@emotion/react": "^11.10.5",
  "@emotion/styled": "^11.10.5",
  "@mui/icons-material": "^5.10.15",
  "@mui/material": "^5.10.15",
  "react": "18.2.0",
  "react-dom": "18.2.0"
}

rollup config (note the regexp for @emotion and @mui)

  external: [
    'react',
    'react-dom',
    /@emotion\/.*/,
    /@mui\/.*/,
  ],
  output: [
    {
      file: 'dist/index.cjs.min.js',
      format: 'cjs',
      sourcemap: true,
      plugins: [terser()],
    },
    {
      file: 'dist/index.esm.min.js',
      format: 'esm',
      sourcemap: true,
      plugins: [terser()],
    },
  ],
  plugins: [
    resolve({ browser: true }),
  ...
    typescript({ tsconfig: './tsconfig.json' }),
  ],
},

Lib is published with npm.

On the other side, I have an application (nextjs and storybook, webpack5) Nothing special on the config on this side.

When I run storybook, it works fine.

But when I run dev, I get this error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at Bidon (/home/smallet/Dev/sandbox/spike-nextjs/node_modules/@msio/common-frontend/dist/index.cjs.min.js:629:18)
    at div
    at /home/smallet/Dev/sandbox/spike-nextjs/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at Stack (/home/smallet/Dev/sandbox/spike-nextjs/node_modules/@mui/material/node/Stack/Stack.js:111:49)
    at Home (webpack-internal:///./pages/index.tsx:32:81)
    at Layout (webpack-internal:///./components/Layout/Layout.tsx:14:19)
    at InnerThemeProvider (/home/smallet/Dev/sandbox/spike-nextjs/node_modules/@mui/system/ThemeProvider/ThemeProvider.js:19:39)
    at ThemeProvider (/home/smallet/Dev/sandbox/spike-nextjs/node_modules/@mui/private-theming/node/ThemeProvider/ThemeProvider.js:39:5)
    at ThemeProvider (/home/smallet/Dev/sandbox/spike-nextjs/node_modules/@mui/system/ThemeProvider/ThemeProvider.js:38:5)
    at App (webpack-internal:///./pages/_app.tsx:27:16)
    at StyleRegistry (/home/smallet/Dev/sandbox/spike-nextjs/node_modules/styled-jsx/dist/index/index.js:449:36)
    at PathnameContextProviderAdapter (/home/smallet/Dev/sandbox/spike-nextjs/node_modules/next/dist/shared/lib/router/adapters.js:60:11)
    at AppContainer (/home/smallet/Dev/sandbox/spike-nextjs/node_modules/next/dist/server/render.js:289:29)
    at AppContainerWithIsomorphicFiberStructure (/home/smallet/Dev/sandbox/spike-nextjs/node_modules/next/dist/server/render.js:325:57)
    at div
    at Body (/home/smallet/Dev/sandbox/spike-nextjs/node_modules/next/dist/server/render.js:612:21)

I tried to change the tsconfig file but didn't change anything I tried to put only @mui and not @emotion as a peer dependency, but it didn't work.

First for the bundle size it is better to have those libs as peer dependency, but moreover, I have a ThemeProvider initialized with a custom theme and I want it to be shared between lib and app.

I spent a lot of time looking for something wrong in the Theme, but in fact, the error was here because it is the first component imported from my lib.

I added a dummy component with just a div => the app works fine. But as soon as I add an import on @mui lib, like :

import Paper from '@mui/material/Paper';

I get the crash.

It works with storybook.

I also created a simple react app and it works, so it doesn't seem to be on the side on the library.

I suppose it comes from some config on Nextjs side.