从TMDB获取电影列表时遇Module parse错误，寻求解决方案

问题原因 #

这个错误是因为项目未配置支持ES6+的**可选链操作符（?.）**的编译工具，导致Webpack无法解析该语法。你的代码中使用了movie?.title这类可选链写法，但当前的Babel/Webpack配置不支持该语法。

解决方案 #

情况1：使用Create React App（CRA）初始化的项目 #

• 优先升级react-scripts：新版CRA默认支持可选链操作符，执行以下命令升级：

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

• 若无法升级，可通过react-app-rewired扩展配置：
  1. 安装依赖：

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

  2. 在项目根目录创建config-overrides.js，添加配置：

     module.exports = function override(config, env) {
       config.module.rules[0].oneOf.forEach(rule => {
         if (rule.loader && rule.loader.includes('babel-loader')) {
           rule.options.plugins.push('@babel/plugin-proposal-optional-chaining');
         }
       });
       return config;
     };
     

  3. 修改package.json中的启动命令：

     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test"
     }
     

情况2：手动配置Webpack+Babel的项目 #

1. 安装Babel插件：

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

2. 修改Babel配置文件（.babelrc或babel.config.json）：

   {
     "presets": ["@babel/preset-react", "@babel/preset-env"],
     "plugins": ["@babel/plugin-proposal-optional-chaining"]
   }
   

3. 确保Webpack配置中用babel-loader处理JS/JSX文件：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.(js|jsx)$/,
           exclude: /node_modules/,
           use: "babel-loader"
         }
       ]
     }
   };
   

额外优化点 #

你的useState初始值设为数组[]，但movie实际是一个对象，建议修改为：

const [movie, setMovie] = useState({})

避免后续可能出现的类型不匹配问题。

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