Node.js v12 M1环境下htmlparser2模块解析失败求助

问题原因 #

Node.js v12不支持export * as这类较新的ES模块语法，而html-to-react依赖的新版htmlparser2使用了该语法，你的babel-loader没有对这个包做转译，导致解析失败。

具体解决办法 #

• 降级htmlparser2版本
  锁定htmlparser2到支持Node12的5.x版本，在package.json中添加对应配置：

  • 若用npm 8+：

    "overrides": {
      "html-to-react": {
        "htmlparser2": "^5.0.1"
      }
    }
    

  • 若用yarn：

    "resolutions": {
      "html-to-react/htmlparser2": "^5.0.1"
    }
    

  之后删除node_modules、package-lock.json（或yarn.lock），重新执行npm install或yarn install，再启动项目。

• 让babel转译htmlparser2包
  修改babel配置文件（如babel.config.js），添加对htmlparser2的转译规则：

  module.exports = {
    presets: [/* 保留你原有的预设，比如react-app */],
    overrides: [
      {
        test: /node_modules\/htmlparser2/,
        presets: [
          ['@babel/preset-env', { targets: { node: '12' } }]
        ]
      }
    ]
  };
  

  同时安装依赖：npm install --save-dev @babel/preset-env，之后重启项目。

• 升级Node.js版本（推荐）
  Node.js v12已停止维护，升级到v14及以上版本（v14+原生支持export * as语法），升级后删除旧依赖文件，重新安装依赖并启动项目。

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