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

Question

我正在使用以下汇总配置：

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()
  ]
 };

抛出以下错误：

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

而src\components\Card\index.tsx中对应的代码为：

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

此代码在其原始 create-react-app 上下文中编译得非常好，但现在我正在尝试使用 Rollup 构建组件库并出现上述错误。

到目前为止，我到处寻找都没有成功。有什么想法吗？

Answer 1

问题不是来自 Rollup，而是 Card 组件中的导入错误。宏是错误的：

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

以上语法解决了所有问题。

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

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

rollup

reactjs

styled-components