React模块导出识别失败：导入Works组件时报错求助

问题原因 #

你遇到的The requested module does not provide an export named 'Works'错误，核心是组件的导出语法和导入语法不匹配：

• Works.jsx使用的是默认导出，但App.jsx里误用了命名导入的语法，导致识别不到对应导出项。

两种修复方案 #

方案1：修改Works组件为命名导出 #

调整Works.jsx的导出代码，将默认导出改为命名导出：

import React from 'react'
import styled from 'styled-components'

const Section = styled.div`
  height: 100vh;
  scroll-snap-align: center;
  display: flex;
  justify-content: center;
  position: relative;
  color: black;
  font-size: 14px;
  font-weight: 300;
`;

// 改为命名导出
export const Works = () => {
  return (
    <Section> </Section>
  );
};

方案2：修改App.jsx为默认导入 #

保持Works.jsx代码不变，修改App.jsx的导入语句，去掉花括号：

// 原导入语句
// import { Works } from "../components/Works"

// 修改为默认导入
import Works from "../components/Works"

语法说明 #

• 默认导出：一个模块仅能有一个默认导出，导入时无需花括号，导入名称可自定义（比如import MyWorks from "../components/Works"也生效）。
• 命名导出：一个模块可存在多个命名导出，导入时必须用花括号包裹，且名称要与导出名称完全一致。

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