AtSwipeAction 组件报错

chutaozh commented 9 months ago

问题描述

搭建好Taro脚手架后（react），不做任何配置，首次安装 taro-ui，使用AtSwipeAction，一切正常，修改配置，只开启了cssModule，重新运行，开始报错，无法正常渲染

复现步骤

// config/index.js  开启了cssModules
{
  ...,
  mini: {
      postcss: {
        pxtransform: {
          enable: true,
          config: {},
        },
        url: {
          enable: true,
          config: {
            limit: 1024, // 设定转换尺寸上限
          },
        },
        cssModules: {
          enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
          config: {
            namingPattern: "module", // 转换模式，取值为 global/module
            generateScopedName: "[name]__[local]___[hash:base64:5]",
          },
        },
      },
    },
}

期望行为

报错信息

系统信息

Taro 版本：v3.6.2 Taro UI 版本：v3.2.0 报错平台：weapp

window10 微信开发者工具 v1.06.2308310

补充信息

taro-ui-bot[bot] commented 9 months ago

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

robinv8 commented 9 months ago

麻烦提供可以完整运行的 demo，方便跟进问题

chutaozh commented 9 months ago

麻烦提供可以完整运行的 demo，方便跟进问题

仓库链接：https://github.com/chutao-zhang/taro-ui-sass.git

初始化时用的Taro默认模板，之后再安装taro-ui，引入AtSwipeAction组件后第一次运行正常，第二次开始便一直报错，期间没有改过config/...下的任何东西，另外，用的是yarn安装的包，不知道是否缺少什么配置才能使用taro-ui？

chutaozh commented 9 months ago

奇怪的是，用yarn build:weapp 打包后是正常的，

用yarn dev:weapp 本地调试就会报错

robinv8 commented 9 months ago

安装插件

npm i babel-plugin-import -D

按需加载组件需在.babelrc 或 babel.config.js 中添加配置：

{
    plugins: [
    [
      "import",
      {
        libraryName: "taro-ui",
        customName: (name) => `taro-ui/lib/components/${name.slice(3)}`,
        customStyleName: (name) =>
          `taro-ui/dist/style/components/${name.slice(3)}.scss`,
      },
      "taro-ui",
    ],
  ],
}

ZruiMay commented 8 months ago

我看了他的仓库、当前问题没有得到解决，我这边遇到了一样的问题

robinv8 commented 8 months ago

@ZruiMay 试试上面的配置

ZruiMay commented 8 months ago

@robinv8 WechatIMG582 配置加入之后，启动直接报错了

robinv8 commented 8 months ago

上面的 demo 添加配置后没问题啊，你提供个 demo 试试

ZruiMay commented 8 months ago

我目前刚使用taro-cli 创建的项目、和楼上的demo，是一样的，区别在于，我目前是mac环境、本地node 是16.15.0，其他没有差别。你这边可以使用它的这个demo地址，加入配置进行测试一下。仓库链接：https://github.com/chutao-zhang/taro-ui-sass.git

robinv8 commented 8 months ago

@ZruiMay 抱歉！是我之前没表述清楚。现已经添加 Demo 如下，其中也包含按需加载组件的说明 https://github.com/NervJS/taro-ui/tree/next/examples/lazy-load-component

XL-shi commented 7 months ago

@ZruiMay 抱歉！是我之前没表述清楚。现已经添加 Demo 如下，其中也包含按需加载组件的说明 https://github.com/NervJS/taro-ui/tree/next/examples/lazy-load-component

按这个方式解决了！！问题和楼主遇到的一模一样。谢谢。（吐槽一下：一般性排查问题，太难解决这种问题了！）

JuvenileQ commented 6 months ago

我也遇到了，看别人说是：

“在taro3.5之后的版本中，在开启prebundle(默认开启)的情况下，会导致ossaui所引用的@taro/components组件没有被打进最终的bundle中，导致页面表现异常。”手动将ossaui排除在prebundle列表之外

随后搜索taro文档：

compiler.prebundle，“是否开启依赖预编译功能。开启后首次编译 Taro 会把项目的 node_modules 依赖打包为模块联邦的 Remote 应用，二次编译时 Webpack 只需要编译项目源码，从而提升编译速度。”“默认值：生产环境为 false，开发环境为 true”

所以当taro版本>=3.5时，taro项目使用taro-ui的正确的配置方式是在config/index.js文件中排除taro-ui

// config/index.js 
module.exports = {
  framework: 'react',
  compiler: {
    type: 'webpack5',
    prebundle: {
      exclude: ['taro-ui']
    }
  },
}

这是一种解决办法，不知道还有没有其他方式避免这个问题？

官方再后续版本会修复吗？

NervJS / taro-ui

AtSwipeAction 组件报错 #1715