通过native-components编译成H5组件遇到的问题

[zhuangyuanfeng]

这两天遇到一个问题，想通过组件编译模式，编译成小程序和H5组件。
目前编译成小程序自定义组件已经成功，但是H5组件迟迟没有进展。

app.config.js如下：

export default defineAppConfig({
  pages: [
    'pages/index/index'
  ],
  components: [
    'pages/index/index',
    'component/cards/page/page',
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  }
})

下图编译后的dist目录

根据小程序组件编译模式得知：

{
  "usingComponents": {
		"comp": "../webcards/pages/index/index"
	}
}

我应该引用pages/index/index，但是同样的方法在H5中尝试了一些方案无法成功，想问一下在H5项目中怎么去使用这个组件呢

[zhuangyuanfeng]

对了，用的版本如下：

	"author": "",
	"dependencies": {
		"@babel/runtime": "^7.7.7",
		"@tarojs/components": "3.6.5",
		"@tarojs/helper": "3.6.5",
		"@tarojs/plugin-framework-react": "3.6.5",
		"@tarojs/plugin-html": "3.6.5",
		"@tarojs/plugin-platform-alipay": "3.6.5",
		"@tarojs/plugin-platform-h5": "3.6.5",
		"@tarojs/plugin-platform-jd": "3.6.5",
		"@tarojs/plugin-platform-qq": "3.6.5",
		"@tarojs/plugin-platform-swan": "3.6.5",
		"@tarojs/plugin-platform-tt": "3.6.5",
		"@tarojs/plugin-platform-weapp": "3.6.5",
		"@tarojs/react": "3.6.5",
		"@tarojs/runtime": "3.6.5",
		"@tarojs/shared": "3.6.5",
		"@tarojs/taro": "3.6.5",
		"react": "^18.0.0",
		"react-dom": "^18.0.0"
	},
	"devDependencies": {
		"@babel/core": "^7.8.0",
		"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
		"@tarojs/cli": "3.6.5",
		"@tarojs/plugin-indie": "^0.0.7",
		"@tarojs/webpack5-runner": "3.6.5",
		"@types/node": "^18.15.11",
		"@types/react": "^18.0.0",
		"@types/webpack-env": "^1.13.6",
		"babel-preset-taro": "3.6.5",
		"eslint": "^8.12.0",
		"eslint-config-taro": "3.6.5",
		"eslint-plugin-import": "^2.12.0",
		"eslint-plugin-react": "^7.8.2",
		"eslint-plugin-react-hooks": "^4.2.0",
		"postcss": "^8.4.18",
		"react-refresh": "^0.11.0",
		"stylelint": "^14.4.0",
		"ts-node": "^10.9.1",
		"webpack": "5.78.0"
	}

[zhuangyuanfeng]

import Comp from '../../../comp/component/cards/page/page'
<Comp />

通过这个方式来引用，报错了

ndors-node_modules_taro_h5_prebundle_chunk-3WECZ6EB_js.js:6391 Uncaught (in promise) Error: TypeError: Cannot read properties of undefined (reading 'register')
 

[ZakaryCode]

直接打包出来的组件正常引入就是可以使用的，如果缺少依赖可以检查自动生成的html文件中是否有提示其他类型所需引入的文件（包括样式文件等）

通过这个方式来引用，报错了

ndors-node_modules_taro_h5_prebundle_chunk-3WECZ6EB_js.js:6391 Uncaught (in promise) Error: TypeError: Cannot read properties of undefined (reading 'register')
 

遇到这类问题可以先定位具体报错问题。

由于组件编译模式不支持prebundle特性，这应当是预编译模式与第三方库兼容性问题导致，可以在预编译模式中排出对应组件依赖

[zhuangyuanfeng]

谢谢，我尝试排查了一下，换了一个非常简单的demo
tt.jsx

function Test({count}) {
  console.log(count);
  return (
    <>
    Test
    </>
  )
}

export default Test

tt.config.js

export default {
  navigationBarTitleText: 'Title',
  styleIsolation: 'isolated',
  virtualHost: true,
}

app.config.js

export default defineAppConfig({
  pages: [
    'pages/index2/index'
  ],
  components: [
    'component/cards/tt/tt',
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  }
})

先通过taro build native-components --type h5，打包成组件。最终输出

打开这个tt.html是一个空白页

我再把这个tt组件放到页面上使用

import Taro, { useLoad } from '@tarojs/taro'
import { View } from '@tarojs/components'
import React, { Component } from 'react'
import Test from '../../../comp/component/cards/tt/tt'
console.log('Test: ', Test);

export default class Index extends Component {
  render () {
    return (
      <>
        1
        {/* <Test /> */}
        2
      </>
    )
  }
}

这个test输出的是个空对象，所以应该是编译出问题了，怀疑是个BUG

[ccclllll]

想问下你解决了吗

[Wuhu-dsm]

解决了吗

[honlyHuang]

参考：https://github.com/NervJS/taro/tree/main/examples/blended-taro-component