Next.js项目使用styled-components出现组件类型无效错误求助

我在构建Next.js应用时，使用styled-components并将样式文件导入响应式卡片组件（Ncard）时，遇到以下错误和警告：

错误信息：error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
警告信息：Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

附上Ncard组件文件和对应的styled-components样式文件，无法编译，求解决。

排查与解决步骤 #

1. 核对样式组件的导出与导入匹配 #

这是触发该错误的最常见原因，必须保证导出和导入方式完全一致：

• 默认导出场景：
  样式文件中用默认导出：

  // CardStyles.js
  import styled from 'styled-components';
  
  export default styled.div`
    // 样式代码
  `;
  

  组件文件中对应使用默认导入：

  // Ncard.jsx
  import CardStyles from './CardStyles';
  

• 命名导出场景：
  样式文件中用命名导出：

  // CardStyles.js
  export const CardContainer = styled.div`
    // 样式代码
  `;
  

  组件文件中对应使用命名导入：

  // Ncard.jsx
  import { CardContainer } from './CardStyles';
  

2. 检查Ncard组件自身的导出 #

确保Ncard组件正确导出，避免在使用该组件时出现导入错误：

• 默认导出：

  export default function Ncard() {
    return <CardStyles>...</CardStyles>;
  }
  

• 命名导出：

  export function Ncard() {
    return <CardStyles>...</CardStyles>;
  }
  

  在调用Ncard的文件中，导入方式要和此处的导出方式匹配。

3. 配置Next.js App Router的styled-components支持（13+版本） #

如果使用Next.js 13+的App Router，必须配置StyledComponentsRegistry才能让styled-components正常工作：

1. 创建app/registry.jsx：

   import React, { useState } from 'react';
   import { useServerInsertedHTML } from 'next/navigation';
   import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
   
   export function StyledComponentsRegistry({ children }) {
     const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
   
     useServerInsertedHTML(() => {
       const styles = styledComponentsStyleSheet.getStyleElement();
       styledComponentsStyleSheet.instance.clearTag();
       return <>{styles}</>;
     });
   
     if (typeof window !== 'undefined') return <>{children}</>;
   
     return (
       <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
         {children}
       </StyleSheetManager>
     );
   }
   

2. 在app/layout.jsx中引入并使用：

   import { StyledComponentsRegistry } from './registry';
   
   export default function RootLayout({ children }) {
     return (
       <html lang="en">
         <body>
           <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
         </body>
       </html>
     );
   }
   

4. 检查文件路径与大小写 #

Next.js在区分大小写的文件系统（如Linux/macOS）中对路径大小写敏感，比如./cardstyles.js和./CardStyles.js会被视为不同文件，导致导入失败返回undefined，务必保证路径完全匹配。

5. 验证依赖版本兼容性 #

确保styled-components版本与Next.js兼容，Next.js 13+建议使用styled-components@6.x版本，可重新安装依赖：

npm uninstall styled-components
npm install styled-components

内容的提问来源于stack exchange，提问作者Nuwan Chamikara