Create a UI package with Emotion and consume it with Next.js application

Question

Problem:

We've built a UI package usingReact,Emotion, andVite. We're consuming it in a Next.js app.

But when we import a component, we get the following ServerError -

TypeError: Cannot read properties of null (reading 'registered')

Seems like the cache object is null on the server. Even when adding <CacheProvider> to the Next.js app, we still get the same error.

Extra information:

Here's how our vite.config.js loos like -

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

import packageJson from './package.json';

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin'],
      },
    }),
  ],
  esbuild: {
    jsxInject: "import React from 'react'",
  },
  build: {
    outDir: 'lib',
    lib: {
      entry: './src/index',
      formats: ['esm'],
      fileName: (format) => `ui.${format}.js`,
    },
    rollupOptions: {
      // Externalize dependencies that shouldn't be bundled into library
      external: [...Object.keys(packageJson.peerDependencies)],
    },
  },
});

Answer 1

did you find any solution? I have the same problem