Uncaught SyntaxError：请求模块未导出WorkoutContextProvider的问题求助

报错信息 #

Uncaught SyntaxError: The requested module '/context/WorkoutContext.jsx?t=1672368719868' does not provide an export named 'WorkoutContextProvider'

问题代码（context/WorkoutContext.jsx） #

import { createContext, useReducer } from 'react'

export const WorkoutsContext = createContext()

export const workoutsReducer = (state, action) => {
  switch (action.type) {
    case 'SET_WORKOUTS':
      return { 
        workouts: action.payload 
      }
    case 'CREATE_WORKOUT':
      return { 
        workouts: [action.payload, ...state.workouts] 
      }
    default:
      return state
  }
}

export const WorkoutsContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(workoutsReducer, { 
    workouts: null
  })
  
  return (
    <WorkoutsContext.Provider value={{ ...state, dispatch }}>
      { children }
    </WorkoutsContext.Provider>
  )
}

问题原因及解决办法 #

核心问题是拼写不一致：
代码里导出的组件名称是WorkoutsContextProvider（单词Workout后带s，复数形式），但你在导入该组件的文件中，写的是WorkoutContextProvider（少了末尾的s），导致模块解析时找不到对应的导出项。

解决步骤：

• 找到导入该组件的文件，修正导入语句中的名称，确保和导出的完全一致：
  错误示例：

  import { WorkoutContextProvider } from '/context/WorkoutContext.jsx'
  

  正确示例：

  import { WorkoutsContextProvider } from '/context/WorkoutContext.jsx'
  

• 保存修改后重启开发服务（如果需要），即可解决该语法错误。

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