React社交媒体应用报错：AuthReducer模块解析失败

问题代码（authReducer.js） #

const authReducer = (state = { authData: null, loading: false, error: false, updateLoading: false },action) => { 
  switch (action.type) { 
    case "AUTH_START": 
      return {...state, loading: true, error: false }; 
    case "AUTH_SUCCESS": 
      localStorage.setItem("profile", JSON.stringify({...action?.data})); 
      return {...state, authData: action.data, loading: false, error: false }; 
    case "AUTH_FAIL": 
      return {...state, loading: false, error: true }; 
    case "UPDATING_START": 
      return {...state, updateLoading: true , error: false} 
    case "UPDATING_SUCCESS": 
      localStorage.setItem("profile", JSON.stringify({...action?.data})); 
      return {...state, authData: action.data, updateLoading: false, error: false} 
    case "UPDATING_FAIL": 
      return {...state, updateLoading: true, error: true} 
    case "LOG_OUT": 
      localStorage.clear(); 
      return {...state, authData: null, loading: false, error: false, updateLoading: false } 
    case "FOLLOW_USER": 
      return {...state, authData: {...state.authData, user: {...state.authData.user, following: [...state.authData.user.following, action.data]} }} 
    case "UNFOLLOW_USER": 
      return {...state, authData: {...state.authData, user: {...state.authData.user, following: [...state.authData.user.following.filter((personId)=>personId!==action.data)]} }} 
    default: 
      return state; 
  } 
}; 
export default authReducer;

错误信息 #

./src/reducers/AuthReducer.js 21:78 Module parse failed: Unexpected token (21:78) You may need an appropriate loader to handle this file type.

解决方法 #

原因分析 #

报错位置的action?.data使用了可选链操作符（?.），这是ES2020新增的语法。如果你的React项目构建工具（比如旧版Create React App或Babel）未配置对该语法的支持，就会出现解析失败的错误。

方案1：替换可选链为兼容性语法 #

直接把所有action?.data替换为传统的存在性判断写法，无需修改项目配置：

完整修改后的authReducer：

const authReducer = (state = { authData: null, loading: false, error: false, updateLoading: false },action) => { 
  switch (action.type) { 
    case "AUTH_START": 
      return {...state, loading: true, error: false }; 
    case "AUTH_SUCCESS": 
      localStorage.setItem("profile", JSON.stringify({...(action && action.data)})); 
      return {...state, authData: action.data, loading: false, error: false }; 
    case "AUTH_FAIL": 
      return {...state, loading: false, error: true }; 
    case "UPDATING_START": 
      return {...state, updateLoading: true , error: false} 
    case "UPDATING_SUCCESS": 
      localStorage.setItem("profile", JSON.stringify({...(action && action.data)})); 
      return {...state, authData: action.data, updateLoading: false, error: false} 
    case "UPDATING_FAIL": 
      return {...state, updateLoading: true, error: true} 
    case "LOG_OUT": 
      localStorage.clear(); 
      return {...state, authData: null, loading: false, error: false, updateLoading: false } 
    case "FOLLOW_USER": 
      return {...state, authData: {...state.authData, user: {...state.authData.user, following: [...state.authData.user.following, action.data]} }} 
    case "UNFOLLOW_USER": 
      return {...state, authData: {...state.authData, user: {...state.authData.user, following: [...state.authData.user.following.filter((personId)=>personId!==action.data)]} }} 
    default: 
      return state; 
  } 
}; 
export default authReducer;

方案2：升级项目依赖以支持ES2020语法 #

如果想保留可选链语法，可根据项目类型升级配置：

• 若使用Create React App：升级到v3.3.0及以上版本，该版本开始默认支持可选链和空值合并操作符。执行命令：

  npm install react-scripts@latest
  # 或
  yarn upgrade react-scripts@latest
  

• 若手动配置Babel：安装@babel/plugin-proposal-optional-chaining插件，并在babel.config.js中添加配置：

  npm install --save-dev @babel/plugin-proposal-optional-chaining
  

  修改babel.config.js：

  module.exports = {
    plugins: [
      "@babel/plugin-proposal-optional-chaining"
    ]
  };
  

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