Next.js transpilePackages与Styled Components搭配触发Webpack错误

我在Next.js项目中引入自定义UI库组件，两者基于相同技术栈（React、TypeScript、Styled Components），运行npm run dev时出现如下错误：

⨯ TypeError: styled_components__WEBPACK_IMPORTED_MODULE_1__ is not a function
    at eval (webpack-internal:///./node_modules/@test/test-ui/dist/components/CtaButton/CtaButton.style.js:35:22)
    at ./node_modules/@test/test-ui/dist/components/CtaButton/CtaButton.style.js (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\vendor-chunks\@test.js:90:1)
    at __webpack_require__ (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/@test/test-ui/dist/components/CtaButton/CtaButton.jsx:7:74) 
    at ./node_modules/@test/test-ui/dist/components/CtaButton/CtaButton.jsx (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\vendor-chunks\@test.js:20:1)
    at __webpack_require__ (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/@test/test-ui/dist/components/CtaButton/index.js:2:68)      
    at ./node_modules/@test/test-ui/dist/components/CtaButton/index.js (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\vendor-chunks\@test.js:100:1)
    at __webpack_require__ (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/@test/test-ui/dist/components/index.js:2:68)
    at ./node_modules/@test/test-ui/dist/components/index.js (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\vendor-chunks\@test.js:170:1)
    at __webpack_require__ (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/@test/test-ui/dist/index.js:2:69)
    at ./node_modules/@test/test-ui/dist/index.js (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\vendor-chunks\@test.js:240:1)
    at __webpack_require__ (C:\Users\Josh\Everything\Files\projects\work\test\test\.next\server\webpack-runtime.js:33:42) {
  page: '/'
}

当前配置信息 #

Next.js配置 #

const nextConfig = {
  transpilePackages: ["@test/test-ui"],
  output: "export",
  reactStrictMode: true,
  compiler: {
    styledComponents: true,
  },
};

export default nextConfig;

UI库构建命令 #

rm -rf dist && npx tsc && npx tsc-alias

UI库TypeScript配置 #

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "target": "ES2020",
    "allowJs": false,
    "skipLibCheck": true,
    "strict": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "strictBindCallApply": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "declaration": true,
    "outDir": "dist",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": [
    "node_modules",
    "src/**/*.test.ts",
    "src/**/*.test.tsx",
    "src/**/*.stories.ts",
    "src/**/*.stories.tsx"
  ]
}

补充说明与其他错误情况 #

我仅将TS/TSX文件编译至dist/目录并生成声明文件。目前相关解决方案文档较少，多数涉及Babel，但Next.js现已默认使用SWC编译器，此前用于转译包的库也已集成到Next配置中。

如果Next配置中未设置transpilePackages，会触发另一个模块解析错误：

⨯ ./node_modules/@test/test-ui/dist/components/CtaButton/CtaButton.jsx
Module parse failed: Unexpected token (4:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this 
file. See https://webpack.js.org/concepts#loaders
| import { ButtonTheme } from "./types";
| export function CtaButton({ text, href, onClick, theme = ButtonTheme.Light, }) {
>     return (<CtaButtonBox href={href} onClick={onClick} $buttonTheme={theme}>
|       <ButtonText>{text}</ButtonText>
|       <ArrowSvg />

Import trace for requested module:
./node_modules/@test/test-ui/dist/components/CtaButton/CtaButton.jsx
./node_modules/@test/test-ui/dist/components/CtaButton/index.js
./node_modules/@test/test-ui/dist/components/index.js
./node_modules/@test/test-ui/dist/index.js

添加transpilePackages解决了模块解析问题，但又触发了开头的TypeError。我已尝试单独使用Babel、SWC和Rollup配置，均未解决；也曾尝试Styled Components的Babel插件，同样无效。

内容的提问来源于stack exchange，提问作者hi-im-b