React项目导入错误求助：'Component Name'未导出问题

我在React项目中遇到错误提示：Attempted import error: 'Component Name' is not exported from file，已经尝试恢复代码、重启编辑器、检查控制台提示的文件等操作，但还是找不到问题根源，现在卡壳了，希望有人帮忙排查代码问题。

相关代码文件 #

Navbar.js #

import React from 'react';
import '../Assets/style/navigation.css';
import { useQuery } from '@apollo/client'; 
import { BrowserRouter as Router, Link } from 'react-router-dom';

import { accessoriesQuery } from "../PagesQuery/navigation/accessories-links";
import { aboutQuery } from "../PagesQuery/navigation/about-links";
import { homeQuery } from "../PagesQuery/navigation/home-links";
import { helpQuery } from "../PagesQuery/navigation/help-links";


export default function App() {

  const { loading: logoAssetsLoading, error: logoassetsData } = useQuery(logoassetsQuery);
  
  //This is a query for the pages:

  const { loading: homeLoading, error: homeError, data: homeData } = useQuery(homeQuery);
  const { loading: eyeglassesLoading, error: eyeglassesError, data: eyeglassesData } = useQuery(eyeglassesQuery);
  const { loading: sunglassesLoading, error: sunglassesError, data: sunglassesData } = useQuery(sunglassesQuery);
  const { loading: accessoriesLoading, error: accessoriesError, data: accessoriesData } = useQuery(accessoriesQuery);
  const { loading: aboutLoading, error: aboutError, data: aboutData } = useQuery(aboutQuery);
  const { loading: helpLoading, error: helpError, data: helpData } = useQuery(helpQuery);
  
  //This is an error message:

  if (logoAssetsLoading) return <p>Loading Logo Assets...</p>;
  if (eyeglassesLoading || sunglassesLoading || accessoriesLoading || homeLoading || helpLoading || aboutLoading) return <p>Loading... this pages.</p>;
  if (eyeglassesError || sunglassesError || homeError || helpError || accessoriesError || aboutError) return <p>Error :( this page don't work.</p>;

  // Debugging step 1: Check the value of data.navigation
  //console.log(data.navigation);

  // Debugging step 2: Check the value of data
  //console.log(data);
  
  
  return (
    <div className='navigation'>
      <div className='full_width_container'>
        <div className='wrapper'>
        <Router>
          <React.Fragment>
            <nav>
                <div className='nav_groups logo'>
                    {homeData.homeLinks.map(link => (
                        <li key={link.slug}>
                          <Link to={`/${link.url}`}>
                            <img src={logoassetsData.logoAssets.url} alt='main logo'/>
                          </Link>
                        </li>
                    ))}
                </div>
              
                <ul className='nav_groups nav_unorder'>
                    {accessoriesData.accessoriesLinks.map(link => (
                      <li key={link.id}>
                        <Link to={`/accessories/${link.slug}`}>
                          {link.title}
                        </Link>
                      </li>
                    ))}

                    {aboutData.aboutLinks.map(link => (
                      <li key={link.id}>
                        <Link to={`/about/${link.slug}`}>
                          {link.title}
                        </Link>
                      </li>
                    ))}
                </ul>

                <div className='nav_groups nav_three'>
                    {helpData.helpLinks.map(link => (
                      <li key={link.id}>
                        <Link to={`/help/${link.slug}`}>
                          {link.title}
                        </Link>
                      </li>
                    ))}
                </div>
            </nav>
          </React.Fragment>
        </Router>
      </div>
    </div>
  </div>
  );
}

AboutQuery（对应文件：about-links.js） #

import { gql } from "@apollo/client";

export const AboutQuery = gql`
    query aboutLinks {
        pages(
            where: {id: "clbzlfvd84iqn0bir8gxekb6m", slug: "accessories"}
            stage: PUBLISHED
            locales: en
        ) {
            id
            slug
            title
        }
    }`
; 

Accessories-Link.js #

import { gql } from "@apollo/client";

export const AccessoriesQuery = gql`
    query accessoriesLinks {
        pages(
            where: {id: "clbzlfvd84iqn0bir8gxekb6m", slug: "accessories"}
            stage: PUBLISHED
            locales: en
        ) {
            id
            slug
            title
        }
    }`
; 

Help-Link.js #

import { gql } from "@apollo/client";

export const HelpQuery = gql`
    query helpLinks {
        pages(
            where: {id: "clc8822bzj0rg0biqqg1it31w", slug: "help"}
            stage: PUBLISHED
            locales: en
        ) {
            id
            slug
            title
        }
    }`
; 

Home-Link.js #

import { gql } from "@apollo/client";

export const HomeQuery = gql`
    query homeLinks {
        pages(
            where: {id: "clbzl7ovpe64d0ak5qh7o2p8f", slug: "Home"}
            stage: PUBLISHED
            locales: en
        ) {
            id
            slug
            title
        }
    }`
; 

问题排查与修复方案 #

1. 导入名称与导出名称大小写不匹配（核心错误） #

JavaScript对变量名大小写敏感，你在Navbar.js中导入的查询名称是小写开头（如accessoriesQuery），但对应的查询文件中导出的是大写开头的变量（如AccessoriesQuery），直接导致导入失败。

修复步骤：

• 修改Navbar.js中的导入语句，保持与导出名称一致：

  import { AccessoriesQuery } from "../PagesQuery/navigation/accessories-links";
  import { AboutQuery } from "../PagesQuery/navigation/about-links";
  import { HomeQuery } from "../PagesQuery/navigation/home-links";
  import { HelpQuery } from "../PagesQuery/navigation/help-links";
  

• 同时修改useQuery调用中的查询名称：

  const { loading: homeLoading, error: homeError, data: homeData } = useQuery(HomeQuery);
  const { loading: accessoriesLoading, error: accessoriesError, data: accessoriesData } = useQuery(AccessoriesQuery);
  const { loading: aboutLoading, error: aboutError, data: aboutData } = useQuery(AboutQuery);
  const { loading: helpLoading, error: helpError, data: helpData } = useQuery(HelpQuery);
  

2. 未定义的变量引用 #

• Navbar.js中使用了logoassetsQuery、eyeglassesQuery、sunglassesQuery，但没有导入或定义这些查询，需要补充对应的导入文件，或者删除无用的代码逻辑。
• 渲染homeData.homeLinks时使用了link.url，但GraphQL查询只请求了id、slug、title三个字段，要么在查询语句中添加url字段，要么修改渲染逻辑使用已请求的字段（比如link.slug）。

3. 文件名与导入路径一致性 #

Linux/macOS系统对文件名大小写敏感，确认导入路径中的文件名（如accessories-links）与实际文件（Accessories-Link.js）的大小写、拼写完全一致，避免路径匹配失败。

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