Rollup error with Styled Components - Error: 'ThemeContext' is not exported by node_modules\styled-components\dist\styled-components-macro.esm.js

Question

I'm using the following rollup configuration:

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import json from "@rollup/plugin-json";

const packageJson = require("./package.json");

export default {
  input: "src/library-index.ts",
  external: ['styled-components'],
  output: [
    {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true
    },
    {
        file: packageJson.module,
        format: "esm",
        sourcemap: true
    }
 ],
 plugins: [
    peerDepsExternal(),
    nodeResolve({ preferBuiltins: false }),
    commonjs({
        include: 'node_modules/**'
    }),
    json(),
    typescript(),
    postcss()
  ]
 };

Which is throwing the following error:

Error: 'ThemeContext' is not exported by node_modules\styled-components\dist\styled-components-macro.esm.js, imported by src\components\Card\index.tsx

And the corresponding code in src\components\Card\index.tsx is:

import styled, {ThemeContext} from 'styled-components\macro'

This code compiles perfectly well in its original create-react-app context, but now I'm trying to build a component library with Rollup and getting the above error.

I've been looking everywhere with no success so far. Any ideas?

Answer 1

The issue didn't come from Rollup, it was the import in the Card component that was wrong. macro was there by mistake:

import styled, {ThemeContext} from 'styled-components'

The above syntax fixed everything.