请问taro 4.x如何引入微信原生组件呢？

[qxj]

按照官方文档的步骤跑不通，并且官方给出的示例也无法编译通过了。

由于原示例是基于taro 2.x太老了，根本无法编译。因此，我先taro init了一个项目，把官方示例的一个组件wxParse复制过来，然后按照官方文档如下配置，但是也无法编译通过。

① 配置文件里配置 usingComponents 属性。

export default {
  usingComponents: {
    'wxparse': '../../components/wxParse/index',
  },
}

② 使用组件

import { View, Text } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import './index.scss'

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'wxparse': any
    }
  }
}

export default function Index() {
  useLoad(() => {
    console.log('Page loaded.')
  })

  return (
    <View className='index'>
      <wxparse html={`<div style="color: red">我是HTML代码</div>`} />
    </View>
  )
}

编译错误如下：

❯ taro build --type weapp
👽 Taro v4.1.6

vite v4.5.14 building for production...
Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api

✓ 105 modules transformed.
✓ built in 1.01s
[vite]: Rollup failed to resolve import "/Users/dawn/Workspace/WxProjects/taro-native-components/src/pages/wxParse/wxParse" from "/Users/dawn/Workspace/WxProjects/taro-native-components/src/pages/wxParse/wxParse?page-loader=true".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
file:///Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/vite/dist/node/chunks/dep-827b23df.js:48272
                    throw new Error(`[vite]: Rollup failed to resolve import "${exporter}" from "${id}".\n` +
                          ^

Error: [vite]: Rollup failed to resolve import "/Users/dawn/Workspace/WxProjects/taro-native-components/src/pages/wxParse/wxParse" from "/Users/dawn/Workspace/WxProjects/taro-native-components/src/pages/wxParse/wxParse?page-loader=true".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at viteWarn (file:///Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/vite/dist/node/chunks/dep-827b23df.js:48272:27)
    at onwarn (/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@vitejs/plugin-react/dist/index.cjs:112:7)
    at onRollupWarning (file:///Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/vite/dist/node/chunks/dep-827b23df.js:48301:9)
    at onwarn (file:///Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/vite/dist/node/chunks/dep-827b23df.js:48032:13)
    at file:///Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/rollup/dist/es/shared/node-entry.js:24276:13
    at Object.logger [as onLog] (file:///Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/rollup/dist/es/shared/node-entry.js:25950:9)
    at ModuleLoader.handleInvalidResolvedId (file:///Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/rollup/dist/es/shared/node-entry.js:24862:26)
    at file:///Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/rollup/dist/es/shared/node-entry.js:24822:26 {
  watchFiles: [
    'taro:compiler',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/src/pages/wxParse/wxParse.config',
    '\x00/Users/dawn/Workspace/WxProjects/taro-native-components/src/app.ts?entry-loader=true',
    '\x00/Users/dawn/Workspace/WxProjects/taro-native-components/src/pages/wxParse/wxParse?page-loader=true',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/vite-runner/dist/template/comp.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/vite-runner/dist/template/custom-wrapper.js',
    'package.json',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/plugin-platform-weapp/dist/runtime.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/index.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/plugin-framework-react/dist/runtime.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/taro/index.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/react/index.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/react/dist/react.esm.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/api/dist/index.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/react/cjs/react.production.min.js',
    '\x00commonjsHelpers.js',
    '\x00/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/react/index.js?commonjs-module',
    '\x00/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/react/cjs/react.production.min.js?commonjs-proxy',
    '\x00/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/react/cjs/react.production.min.js?commonjs-exports',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/src/app.ts',
    '\x00/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/taro/index.js?commonjs-module',
    '\x00/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/index.js?commonjs-proxy',
    '\x00/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/api/dist/index.js?commonjs-proxy',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom-external/index.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/env.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/shared/dist/index.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/bom/document.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/bom/getComputedStyle.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/bom/history.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/bom/location.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/bom/navigator.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/bom/raf.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/bom/URL.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/bom/URLSearchParams.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/bom/window.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom/element.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom/event.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom/form.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom/node.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom/root.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom/svg.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom/style.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom/text.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom-external/mutation-observer/index.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/constants/index.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/current.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom/event-source.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dsl/common.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/emitter/emitter.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/hydrate.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/next-tick.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/options.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/perf.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/utils/index.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/polyfill/index.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/utils/router.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/utils/lodash.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/react-reconciler/index.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/react-reconciler/constants.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/api/dist/interceptor/index.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/api/dist/interceptor/interceptors.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/api/dist/env.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/api/dist/tools.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/react-reconciler/cjs/react-reconciler.production.min.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/react-reconciler/cjs/react-reconciler-constants.production.min.js',
    '\x00/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/react-reconciler/constants.js?commonjs-module',
    '\x00/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/react-reconciler/cjs/react-reconciler-constants.production.min.js?commonjs-proxy',
    '\x00/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/react-reconciler/cjs/react-reconciler-constants.production.min.js?commonjs-exports',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom/document.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom-external/element.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom-external/node.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom-external/inner-html/html.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/tslib/tslib.es6.mjs',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/utils/cache.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom/event-target.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom/style_properties.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/package.json',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/src/app.scss',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom/tree.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom/class-list.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/shared/dist/components.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/shared/dist/constants.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/shared/dist/event-channel.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/shared/dist/event-emitter.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/shared/dist/is.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/shared/dist/native-apis.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/shared/dist/runtime-hooks.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/shared/dist/shortcuts.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/shared/dist/utils.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom-external/mutation-observer/implements.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/polyfill/array.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/polyfill/intersection-observer.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/polyfill/object.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/scheduler/index.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/api/dist/interceptor/chain.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/scheduler/cjs/scheduler.production.min.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom/anchor-element.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom/transfer.js',
    '/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/@tarojs/runtime/dist/dom-external/inner-html/parser.js',
    '\x00/Users/dawn/Workspace/WxProjects/taro-native-components/node_modules/react-reconciler/index.js?commonjs-module',
    ... 8 more items
  ]
}

Node.js v24.4.1

[cs-yang]

我用的webpack正常