taro4.0.4，使用mp-html原生混合开发时编译报错

[ChurchTao]

相关平台

微信小程序

小程序基础库: 3.4.3
使用框架: React

复现步骤

pnpm dev:weapp

期望结果

正常编译

实际结果

✖ Errors:

resolve './{{ctrl[i]<0?opts[2]:opts[1]}}' in '/Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node'
using description file: /Users/churcht/WeChatProjects/lfhs-mini/package.json (relative path: ./src/components/mp-html/node)
resolve multi platform file path
using description file: /Users/churcht/WeChatProjects/lfhs-mini/package.json (relative path: ./src/components/mp-html/node)
Field 'browser' doesn't contain a valid alias configuration
root path /Users/churcht/WeChatProjects/lfhs-mini
using description file: /Users/churcht/WeChatProjects/lfhs-mini/package.json (relative path: ./Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node/{{ctrl[i]<0)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/churcht/WeChatProjects/lfhs-mini/Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node/{{ctrl[i]<0 doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/churcht/WeChatProjects/lfhs-mini/Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node/{{ctrl[i]<0.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/Users/churcht/WeChatProjects/lfhs-mini/Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node/{{ctrl[i]<0.jsx doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/churcht/WeChatProjects/lfhs-mini/Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node/{{ctrl[i]<0.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/Users/churcht/WeChatProjects/lfhs-mini/Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node/{{ctrl[i]<0.tsx doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/Users/churcht/WeChatProjects/lfhs-mini/Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node/{{ctrl[i]<0.mjs doesn't exist
.vue
Field 'browser' doesn't contain a valid alias configuration
/Users/churcht/WeChatProjects/lfhs-mini/Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node/{{ctrl[i]<0.vue doesn't exist
as directory
/Users/churcht/WeChatProjects/lfhs-mini/Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node/{{ctrl[i]<0 doesn't exist
using description file: /Users/churcht/WeChatProjects/lfhs-mini/package.json (relative path: ./src/components/mp-html/node/{{ctrl[i]<0)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node/{{ctrl[i]<0 doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node/{{ctrl[i]<0.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node/{{ctrl[i]<0.jsx doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node/{{ctrl[i]<0.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node/{{ctrl[i]<0.tsx doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node/{{ctrl[i]<0.mjs doesn't exist
.vue
Field 'browser' doesn't contain a valid alias configuration
/Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node/{{ctrl[i]<0.vue doesn't exist
as directory
/Users/churcht/WeChatProjects/lfhs-mini/src/components/mp-html/node/{{ctrl[i]<0 doesn't exist

→ Watching... [2024/8/15 18:15:23]

node:internal/process/promises:289
triggerUncaughtException(err, true /* fromPromise */);
^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "[object Array]".] {
code: 'ERR_UNHANDLED_REJECTION'
}

环境信息

👽 Taro v4.0.4


  Taro CLI 4.0.4 environment info:
    System:
      OS: macOS 14.1.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.10.0 - /usr/local/bin/node
      Yarn: 1.22.19 - ~/.yarn/bin/yarn
      npm: 10.2.3 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 4.0.4 => 4.0.4 
      @tarojs/components: 4.0.4 => 4.0.4 
      @tarojs/helper: 4.0.4 => 4.0.4 
      @tarojs/plugin-framework-react: 4.0.4 => 4.0.4 
      @tarojs/plugin-html: 4.0.4 => 4.0.4 
      @tarojs/plugin-platform-alipay: 4.0.4 => 4.0.4 
      @tarojs/plugin-platform-h5: 4.0.4 => 4.0.4 
      @tarojs/plugin-platform-jd: 4.0.4 => 4.0.4 
      @tarojs/plugin-platform-qq: 4.0.4 => 4.0.4 
      @tarojs/plugin-platform-swan: 4.0.4 => 4.0.4 
      @tarojs/plugin-platform-tt: 4.0.4 => 4.0.4 
      @tarojs/plugin-platform-weapp: 4.0.4 => 4.0.4 
      @tarojs/react: 4.0.4 => 4.0.4 
      @tarojs/runtime: 4.0.4 => 4.0.4 
      @tarojs/shared: 4.0.4 => 4.0.4 
      @tarojs/taro: 4.0.4 => 4.0.4 
      @tarojs/taro-loader: 4.0.4 => 4.0.4 
      @tarojs/webpack5-runner: 4.0.4 => 4.0.4 
      babel-preset-taro: 4.0.4 => 4.0.4 
      eslint-config-taro: 4.0.4 => 4.0.4 
      react: ^18.3.1 => 18.3.1 

[qq31311137]

我刚刚也遇到这个问题了，刚创建 taro4.0.4 的模板，引入 mp-html 就报错

[qq31311137]

webpack 直接把原生组件也进行二次编译了，目前还没找到手动忽略的方式，使用 compile.exclude，目前也没办法阻止 webpack 进行二次编译

[ChurchTao]

确实，我也发现了

[nanxiaobei]

确实，我也发现了

[qq31311137]

目前我只能在 mini 配置中加入两个 wepback 插件实现

const config = {
  mini: {
    webpackChain(chain) {
      chain.plugin('copyRawComponent').use(new CopyWebpackPlugin({
        patterns: [{
          from: path.resolve(__dirname, '../src/components/mp-html'), // 源目录
          to: path.resolve(__dirname, '../dist/components/mp-html'),   // 目标目录
        }]
      }))
      chain.plugin('ignoreRawComponent').use(new IgnorePlugin({
        resourceRegExp: /mp-html/
      }))
    }
  }
}