React项目执行npm start编译失败：htmlparser2模块解析错误

报错详情 #

/node_modules/htmlparser2/lib/esm/index.js 62:9处模块解析失败：意外的标记(62:9)。文件已通过以下加载器处理：./node_modules/babel-loader/lib/index.js，可能需要额外加载器来处理这些加载器的结果。

相关代码片段：

return getFeed(parseDOM(feed, options)); 
}

export * as DomUtils from "domutils"; 
// Old name for DomHandler
export { DomHandler as DefaultHandler };

问题原因 #

该错误源于htmlparser2新版本使用了项目Babel/Webpack配置未支持的ES模块语法（如export * as），而默认情况下Webpack不会转译node_modules目录下的依赖包，导致编译时无法解析这类语法。

解决方案 #

1. 让Babel转译htmlparser2及依赖模块 #

修改项目的Babel配置文件（babel.config.js或.babelrc），将htmlparser2和它的依赖domutils纳入转译范围：

// babel.config.js示例
const path = require('path');

module.exports = {
  presets: ['react-app'], // 保留原有presets配置
  include: [
    path.resolve(__dirname, 'src'),
    /htmlparser2/,
    /domutils/
  ]
};

2. 调整Webpack配置（适用于已eject的Create React App项目） #

若项目通过Create React App创建且已执行npm run eject，修改webpack.config.js中的babel-loader规则，添加目标模块：

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: [
    paths.appSrc,
    /node_modules\/htmlparser2/,
    /node_modules\/domutils/
  ],
  loader: require.resolve('babel-loader'),
  options: {
    // 保留原有options配置
  },
}

3. 降级htmlparser2到兼容版本 #

若上述方法无效，可尝试降级到语法更兼容的旧版本：

npm uninstall htmlparser2
npm install htmlparser2@5.0.1

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