error when importing a styled-components library build with vite

[serdec]

Hi,

i am creating a styled-components library and i build it using vite.

Whenever i create a new react application using vite i can import my components and everything works correctly.

However, when i create a react app using nextjs or remix i get errors similar to the following:

or

const r = o.button.withConfig({
                   ^
TypeError: Cannot read properties of undefined (reading 'withConfig')

my lib is as simple as

src/components/Button/Button.tsx

import styled from "styled-components";

const Button = styled.button`
  border-radius: 8px;
  background-color: darkviolet;
  color: deeppink;
`;

export { Button };

src/components/index.ts

export { Button } from "./Button/Button";

src/index.ts

export * from "./components";

my vite.config.ts:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [["babel-plugin-styled-components", { displayName: false }]],

        env: {
          development: {
            plugins: [["babel-plugin-styled-components", { displayName: true }]],
          },
        },
      },
    }),
    dts({
      include: ["src/"],
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      name: "mylib",
      formats: ["es", "umd"],
      fileName: format => `mylib.${format}.js`,
    },
    rollupOptions: {
      // Add _all_ external dependencies here
      external: ["react", "react-dom", "styled-components"],
    },
  },
});

and my package.json:

{
  "name": "mylib",
  "version": "0.0.1",
  "description": "My awesome lib",
  "type": "module",
  "license": "Apache-2.0",
  "files": [
    "dist"
  ],
  "exports": {
    ".": {
      "import": "./dist/mylib.es.js",
      "require": "./dist/mylib.umd.js"
    }
  },
  "main": "./dist/mylib.umd.js",
  "module": "./dist/mylib.es.js",
  "types": "./dist/index.d.ts",
  "scripts": {
    "watch": "jest --watch",
    "test": "jest",
    "dev": "vite",
    "generate-tokens": "node build-tokens.js",
    "build": "tsc && vite build",
    "build:watch": "watch 'npm run build' ./src",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "chromatic": "npx chromatic"
  },
  "dependencies": {
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-avatar": "^1.0.3",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-context-menu": "^2.1.4",
    "@radix-ui/react-dropdown-menu": "^2.0.5",
    "@radix-ui/react-hover-card": "^1.0.6",
    "@radix-ui/react-popover": "^1.0.6",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-scroll-area": "^1.0.4",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-tooltip": "^1.0.6",
    "cmdk": "^0.2.0",
    "lodash": "^4.17.21",
    "vite-tsconfig-paths": "^4.2.0"
  },
  "devDependencies": {
    "@radix-ui/react-switch": "^1.0.2",
    "@storybook/addon-essentials": "^7.0.18",
    "@storybook/addon-interactions": "^7.0.18",
    "@storybook/addon-links": "^7.0.18",
    "@storybook/blocks": "^7.0.18",
    "@storybook/manager-api": "^7.0.23",
    "@storybook/react": "^7.0.18",
    "@storybook/react-vite": "^7.0.18",
    "@storybook/testing-library": "^0.1.0",
    "@storybook/theming": "^7.0.23",
    "@testing-library/dom": "^9.3.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@tokens-studio/sd-transforms": "^0.10.3",
    "@types/jest": "^29.5.2",
    "@types/lodash-es": "^4.17.7",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "@vitejs/plugin-react": "^4.0.1",
    "babel-jest": "^29.5.0",
    "babel-plugin-styled-components": "^2.1.4",
    "chromatic": "^6.18.2",
    "eslint": "^8.43.0",
    "eslint-plugin-prefer-arrow-functions": "^3.1.4",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "eslint-plugin-storybook": "^0.6.12",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "prop-types": "^15.8.1",
    "storybook": "^7.0.18",
    "storybook-addon-pseudo-states": "^2.0.1",
    "styled-components": "^6.0.6",
    "stylis": "^4.3.0",
    "ts-jest": "^29.1.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.2",
    "vite": "^4.3.9",
    "vite-plugin-dts": "^3.5.1",
    "watch": "^1.0.2"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "styled-components": ">= 5"
  }
}

[serdec]

It seems that this gives an error only when using typescript. Javascript projects work

[luistak]

I'm having the same problem but only after i upgraded NextJs to 14+, my project is using a ui library build with vite but even after upgrading the vite version and changing the output.interop option to auto it did not fix my problem :(

[andreisaikouski]

Running into the same issue using vite 4.4.5, although my app does not use styled components.

Looks like dependency [email protected] is using styled components and causing this same issue. React 17.0.2

[alexomon018]

Hiya guys, is this still a problem? I am trying to create lib and I want to use styled components for styling. The lib will be used in NextJS 14.

[dj-fiorex]

i'm having the same, exact error. Same styled.button exported in a simple vite based package. When i try to import it in another project that uses webpack + babel it will throw the same error, Cannot read withConfig

Is there anythings we can do?

[kevinmamaqi]

Same error using styled-components as a peer-dep, but only in tests

[Saggitarie]

Hi is there any solution to this?
I'm getting the same error when upgrading vite to v5.x.x

[zengnificant]

@alexomon018 @dj-fiorex @Saggitarie
Create a file like below and import this file instead. This works fine.

import styled2 from 'styled-components'
import { createGlobalStyle, ServerStyleSheet, StyleSheetManager } from 'styled-components'

import { isFunction } from '@src/utils/type.js'

let styled = styled2

if (!isFunction(styled2.div)) {
    styled = styled2.default
}

export { createGlobalStyle, ServerStyleSheet, StyleSheetManager }

export default styled

[serdec]

we solved our issue by changing all instances of

import styled from 'styled-components'

to

import { styled } from 'styled-components'