针对无Intl支持浏览器的Chunked polyfill报错排查求助

为不原生支持Intl对象及相关国际化特性的浏览器配置分片polyfill后，前端编译报错。注释掉polyfill代码仅保留render命令时一切正常，尝试过无头/有头模式运行前端、指定浏览器，问题依旧。

相关代码 #

// Chunked polyfill for browsers without Intl support
if (!window.Intl) {
  new Promise(resolve => {
    resolve(import('intl'));
  })
    .then(() =>
      Promise.all([
        import('intl/locale-data/jsonp/en')
      ]),
    ) // eslint-disable-line prettier/prettier
    .then(() => render(translationMessages))
    .catch(err => {
      throw err;
    });
} else {
  render(translationMessages);
}

报错信息 #

ERROR in ./app/app.js 112:12
Module parse failed: Unexpected token (112:12)
You may need an appropriate loader to handle this file type.
| if (!window.Intl) {
|   new Promise(function (resolve) {
>     resolve(import('intl'));
|   }).then(function () {
|     return Promise.all([import('intl/locale-data/jsonp/en')]);

问题原因及解决方法 #

核心原因 #

代码中使用了动态import()语法，但当前打包工具（如webpack）缺少对应的解析配置，无法识别该ES2020+特性，导致编译失败。

解决步骤 #

1. 配置Babel支持动态import
   安装@babel/plugin-syntax-dynamic-import插件，然后在Babel配置文件（.babelrc或babel.config.js）中添加该插件：

   {
     "plugins": ["@babel/plugin-syntax-dynamic-import"]
   }
   

2. 简化代码写法
   动态import()本身返回Promise，无需手动包裹新的Promise，简化后代码更简洁且不易出错：

   // Chunked polyfill for browsers without Intl support
   if (!window.Intl) {
     import('intl')
       .then(() => import('intl/locale-data/jsonp/en'))
       .then(() => render(translationMessages))
       .catch(err => {
         console.error('Intl polyfill加载失败:', err);
         throw err;
       });
   } else {
     render(translationMessages);
   }
   

3. 替代方案：静态引入（不分片）
   如果不需要分片加载polyfill，可以直接静态引入，无需配置动态import，缺点是会增加主包体积：

   // 静态引入polyfill（不分片）
   if (!window.Intl) {
     require('intl');
     require('intl/locale-data/jsonp/en');
   }
   render(translationMessages);
   

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