Possible problem on the rollupOptions external and global configs

[gabriel-naressi]

I have a library published in a private repository (the name of the libraby is "@bee-ui/bee-ui:"). This lib uses vite + typescript + vitest + react + react testing library.

My component:

import { ReactNode } from "react";
import styled from "styled-components";

export type Variants = "h1";

export interface TypographyProps {
variant: Variants;
children: ReactNode;
className?: string;
}

const H1 = styled.h1`
color: ${({ theme }) => theme.color.neutral.dark};
font-size: 32px;
line-height: 40px;
font-weight: 700;
`;

const variantMapping = {
h1: H1,
};

export const Typography = ({
variant = "h2",
children,
className,
}: TypographyProps) => {
const Component = variantMapping[variant];
return <Component className={className}>{children}</Component>;
};

After I published it, I created a demo project to use it and add a single test of a component of my library:

import { Typography } from "@bee-ui/bee-ui";

test("should render children", () => {
  render(<Typography variant="h1">H1 content</Typography>);
  expect(screen.getByText(/h1 content/i)).toBeInTheDocument();
});

When I run this, I receive this error:

TypeError: e.h1 is not a function
    at file:///vitest/examples/react-testing-lib/node_modules/@bee-ui/bee-ui/dist/main.js:1:84
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at VitestExecutor.interopedImport (file://vitest/examples/react-testing-lib/node_modules/vite-node/dist/client.mjs:383:28)
    at VitestExecutor.directRequest (file://vitest/examples/react-testing-lib/node_modules/vite-node/dist/client.mjs:253:24)
    at VitestExecutor.cachedRequest (file://vitest/examples/react-testing-lib/node_modules/vite-node/dist/client.mjs:189:14)
    at VitestExecutor.dependencyRequest (file://vitest/examples/react-testing-lib/node_modules/vite-node/dist/client.mjs:233:12)
    at vitest/examples/react-testing-lib/src/App.test.tsx:4:31
    at VitestExecutor.runModule (file:///vitest/examples/react-testing-lib/node_modules/vite-node/dist/client.mjs:362:5)

This is the way I export my "custom theme provider" on my bee-ui, to be used by client apps:

import { ThemeProvider as DefaultThemeProvider } from "styled-components";
import merge from "lodash.merge";
import { defaultTheme } from "./default.ts";
import { ReactNode } from "react";
import { GlobalStyle } from "./global.ts";
import { ThemeStructure } from "@themes/default/types.ts";

interface Props {
  theme?: ThemeStructure;
  children: ReactNode;
}

export const ThemeProvider = ({ theme = defaultTheme, children }: Props) => {
  const mergedTheme = merge(defaultTheme, theme);
  return (
    <DefaultThemeProvider theme={mergedTheme}>
      <GlobalStyle />
      {children}
    </DefaultThemeProvider>
  );
};

There it is my vite.config.ts:

import { join, resolve } from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import dts from "vite-plugin-dts";

import { UserConfigExport } from "vitest/config";
import { compilerOptions } from "./tsconfig.json";

const sanitizeAlias = (val: string): string => val.replace("/*", "");

const aliasWithAbsolutePath = Object.entries(compilerOptions.paths).reduce(
  (acc: { [key: string]: string }, [key, value]) => {
    acc[sanitizeAlias(key)] = sanitizeAlias(join(__dirname, value[0]));
    return acc;
  },
  {} as { [key: string]: string },
);

const config: UserConfigExport = {
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./src/tests/setup.ts"],
  },
  build: {
    lib: {
      entry: resolve(__dirname, "src/main.tsx"),
      formats: ["es", "cjs"],
      name: "BeeUi",
      fileName: (format) => `bee-ui.${format}.js`,
    },
    rollupOptions: {
      external: ["react", "react-dom", "styled-components"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
          "styled-components": "styled",
        },
        exports: 'named'
      },
    },
  },
  plugins: [react(), dts({ rollupTypes: true, insertTypesEntry: true })],
  resolve: {
    alias: { 
       ...aliasWithAbsolutePath,
      "styled-components": resolve(__dirname, "node_modules/styled-components"),
     }
  },
};

export default defineConfig(config);

And my package.json (some dependencies ommited)

 "name": "@bee-ui/bee-ui",
  "version": "1.2.5-beta-2",
  "type": "module",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/bee-ui.es.js",
      "require": "./dist/bee-ui.cjs.js",
      "default": "./dist/bee-ui.es.js"
    }
  },
  "module": "dist/bee-ui.es.js",
  "main": "dist/bee-ui.cjs.js",
  "types": "dist/index.d.ts",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "styled-components": "^6.1.8"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "styled-components": "^6.1.8"
  },
   ...

After investigating for a long time, I discovered that if I remove the "styled-components" from the array rollupOptions.external and also remove it from the object rollupOptions.output.globals, the mentioned problem stops happening.

But another problem happens, the symptom is that I can no longer correctly propagate the theme between components, probably because I have two styled-components in the same project (one from my lib bee-ui and another for the project itself). Does anyone have any suggestions on how to resolve this? For me it doesn't make much sense to have to publish the lib without styled-components in the rollupOptions.

An important piece of information is that, when I remove styled-components from the rollupOptions mentioned before, the only way that my component works with his theme is to use it this way:

import { Typography, BeeUiThemeProvider } from "@bee-ui/bee-ui";
import { ThemeProvider } from "styled-components";

// This works:
<ThemeProvider theme={theme}>
   <BeeUiThemeProvider theme={theme}>
     <Typography variant="h1">Examples with default theme</Typography>
   </BeeUiThemeProvider>
</ThemeProvider>

// It doesn't work (which seems really bad to me)
import { Typography, BeeUiThemeProvider } from "@bee-ui/bee-ui";

<BeeUiThemeProvider theme={theme}>
   <Typography variant="h1">Examples with default theme</Typography>
</BeeUiThemeProvider>

[hi-ogawa]

If you cross post an issue, please put links between two. Otherwise multiple teams would end up debugging the same issue without knowing what's investigated so far.

Original discussion is here vitest-dev/vitest#5286 (reply in thread)

[gabriel-naressi]

Answered here: vitest-dev/vitest#5286 (reply in thread)