H5和小程序是否不兼容

[haocan]

NutUI scenes（nutui 场景）

H5 + 小程序

NutUI-react version（nutui-react 版本）

2.0.0-alpha.0

React version（react 版本）

17.0.0

Operating environment（运行环境）

dev:h5

Citation method（引用方式）

npm

Node version（node 版本）

16.19.0

Browser and its version（浏览器及其版本）

100.0.4896.60

System and its version（系统及其版本）

window11

Taro environmental information（taro 环境信息）

"@tarojs/taro": "3.4.6", windows11

Reproduction link（重现链接）

nutui.jd.com/taro/react/1x/

Steps to reproduce（重现步骤）

安装Nutui后小程序能显示组件，H5不能 import { View, Text } from "@tarojs/components"; import { useLoad } from "@tarojs/taro"; import { Button } from "@nutui/nutui-react-taro";

import "./index.scss";

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

  return (           Hello world!       点击按钮       ); }

What is expected?（期望的结果是什么？）

期望的结果是H5和小程序组件库统一安装运行

What is actually happening?（实际的结果是什么？）

H5和小程序不统一安装组件库

Remarks（补充说明）

const config = { projectName: "taroreact", date: "2023-4-19", designWidth: 750, ..., mini: { plugins: [ "@tarojs/plugin-html", [ "import", { libraryName: "@nutui/nutui-react-taro", libraryDirectory: "dist/esm", style: true, camel2DashComponentName: false, }, "nutui-react", ], ], sass: { data: @import "@nutui/nutui-react-taro/dist/styles/variables.scss";, }, postcss: { pxtransform: { enable: true, config: {}, }, url: { enable: true, config: { limit: 1024, // 设定转换尺寸上限 }, }, cssModules: { enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true config: { namingPattern: "module", // 转换模式，取值为 global/module generateScopedName: "[name][local][hash:base64:5]", }, }, }, pxtransform: { config: { selectorBlackList: ['nut-'] } }, }, h5: { publicPath: "/", staticDirectory: "static", postcss: { autoprefixer: { enable: true, config: {}, }, cssModules: { enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true config: { namingPattern: "module", // 转换模式，取值为 global/module generateScopedName: "[name]__[local]___[hash:base64:5]", }, }, }, plugins: [ [ "import", { libraryName: "@nutui/nutui-react", libraryDirectory: "dist/esm", style: true, camel2DashComponentName: false, }, "nutui-react", ], ], sass: { data: @import "@nutui/nutui-react/dist/styles/variables.scss";, }, }, }; 因为组件库引入不统一，在小程序和H5的plugins配置里统一了组件库的引入方式，但在页面引入nutui-react并未达到预期，如果我分开引入@nutui/nutui-react-taro和@nutui/nutui-react，分开编译则会出现H5不能显示按钮，小程序则可以

[oasis-cloud]

你再 taro 环境下面只需要使用 @nutui/nutui-react-taro ，taro 提供了编译到 H5 的能力，所以不需要在 taro 项目中使用 @nutui/nutui-react。

@nutui/nutui-react 只在 H5 的场景下使用。不适用于 taro 场景。