React JSX导出组件与变量报错：未找到'Menu'导出名称

错误详情 #

SyntaxError: The requested module '/src/components/Menu.jsx?t=1724725277296' does not provide an export named 'Menu'

路径已通过VSCode的CTRL-CLICK验证正确，baseURL导出逻辑无问题，尝试过用圆括号和方括号导出但仍未解决。以下是Menu组件代码：

import React from 'react'
import logo from '../assets/logo.png'
const baseURL = 'http://localhost:5173';

const Menu = () => {
  return (
    <nav className="navbar navbar-expand-lg bg-dark">
      <div className="container-fluid">
        <a className="navbar-brand" href="#"><img src={logo} alt="Moncria" height="192" /></a>
        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav">
            <li className="nav-item">
              <a className="nav-link active text-success" href={baseURL}>Home</a>
            </li>
            <li className="nav-item">
              <a className="nav-link active text-danger" href={`${baseURL}/wiki`}>Wiki</a>
            </li>
            <li className="nav-item">
              <a className="nav-link active text-warning" href={`${baseURL}/users`}>Users</a>
            </li>
            <li className="nav-item">
              <a className="nav-link active" style={{color: '#fc0fc0'}} href={`${baseURL}/register`}>Register</a>
            </li>
            <li className="nav-item">
              <a className="nav-link active text-primary" href={`${baseURL}/register`}>Login</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  )
}

export default [ Menu, baseURL ]

问题原因 #

你当前用export default [ Menu, baseURL ]将组件和baseURL包装成数组作为默认导出，但如果你的导入代码使用的是命名导入（比如import { Menu } from './Menu.jsx'），就会找不到名为'Menu'的导出项——因为默认导出没有对应的命名标识，命名导入只会查找显式声明的命名导出。

解决方案 #

方案1：改用命名导出（推荐） #

修改Menu组件的导出代码，替换原来的默认导出为命名导出：

// 替换原有的export default行
export { Menu, baseURL };

导入时直接用命名导入即可：

import { Menu, baseURL } from './components/Menu.jsx';

方案2：调整导入方式匹配默认导出 #

如果不想修改导出逻辑，将导入改为默认导入后解构数组：

import menuExports from './components/Menu.jsx';
const [ Menu, baseURL ] = menuExports;

方案3：导出对象（更易读） #

把默认导出改成对象形式，避免数组解构的顺序依赖问题：

export default { Menu, baseURL };

导入时可以选择：

// 方式一：命名导入
import { Menu, baseURL } from './components/Menu.jsx';

// 方式二：默认导入后解构
import menuExports from './components/Menu.jsx';
const { Menu, baseURL } = menuExports;

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