React.lazy使用变量字符串动态导入组件报错求助

一、模块解析错误（Unexpected token ??） #

这个错误源于打包工具（如Webpack）或Babel无法解析空值合并运算符（??）——这是ES2020的语法，需要配置对应编译支持：

• 若使用Babel：
  1. 安装语法插件：

     npm install @babel/plugin-proposal-nullish-coalescing-operator --save-dev
     

  2. 在Babel配置文件（.babelrc或babel.config.js）中添加该插件：

     {
       "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
     }
     

     或者通过@babel/preset-env自动适配目标浏览器，无需单独配置插件：

     {
       "presets": [
         ["@babel/preset-env", {
           "targets": "> 0.25%, not dead"
         }]
       ]
     }
     

• 若使用Webpack 5：它默认支持ES2020语法，无需额外配置；Webpack 4则必须通过Babel处理上述语法。

二、React.lazy动态导入变量路径不生效 #

React.lazy结合动态导入时，打包工具需要静态可分析的路径前缀，同时要注意组件导出规则：

1. 保留静态路径前缀：你写的import(./${product_map})格式是可行的，但要确认：
   • 变量product_map对应的组件文件存在（比如./DVD.jsx或./DVD.tsx，若未配置Webpack自动解析扩展名，需写全文件名）。
2. 确保目标组件是默认导出：
   示例组件写法：

   const DVD = () => {
     return <div>DVD Component</div>;
   };
   
   export default DVD;
   

   若组件是命名导出，需调整导入逻辑：

   const Product = React.lazy(() => import(`./${product_map}`).then(module => ({ default: module.DVD })));
   

3. 禁止完全动态路径：不能直接使用import(product_map)，必须保留静态前缀（如./），否则打包工具无法预打包可能的组件模块。

内容的提问来源于stack exchange，提问作者Abdulaziz S Dablo