mallfoundry/taroify

[Bug Report] 引入 Icon 组件编译报错

Closed this issue · 1 comments

felix9ia commented

问题出在哪个包

@taroify/icons

问题出在哪个平台/设备/浏览器

微信小程序

平台/设备/浏览器

No response

你正在使用的 Taroify 版本是多少

^0.3.2-alpha.0

描述一下您遇到的问题以及重现步骤

我从手动引入，改成 babel-plugin-import 引入后，
页面使用了

import { Icon } from "@taroify/icons"

编译报错信息

✖ Errors: 

resolve '@taroify/icons/Icon' in 'D:\development\JavaScripts\stall_ma\src\subAdmin\pages\index'
  Parsed request is a module
  using description file: D:\development\JavaScripts\stall_ma\package.json (relative path: ./src/subAdmin/pages/index)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      D:\development\JavaScripts\stall_ma\src\subAdmin\pages\index\node_modules doesn't exist or is not a directory
      D:\development\JavaScripts\stall_ma\src\subAdmin\pages\node_modules doesn't exist or is not a directory
      D:\development\JavaScripts\stall_ma\src\subAdmin\node_modules doesn't exist or is not a directory
      D:\development\JavaScripts\stall_ma\src\node_modules doesn't exist or is not a directory
      looking for modules in D:\development\JavaScripts\stall_ma\node_modules
        existing directory D:\development\JavaScripts\stall_ma\node_modules\@taroify\icons
          using description file: D:\development\JavaScripts\stall_ma\node_modules\@taroify\icons\package.json (relative path: .)
            using description file: D:\development\JavaScripts\stall_ma\node_modules\@taroify\icons\package.json (relative path: ./Icon)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                D:\development\JavaScripts\stall_ma\node_modules\@taroify\icons\Icon doesn't exist
              .js
                Field 'browser' doesn't contain a valid alias configuration
                D:\development\JavaScripts\stall_ma\node_modules\@taroify\icons\Icon.js doesn't exist
              .jsx
                Field 'browser' doesn't contain a valid alias configuration
                D:\development\JavaScripts\stall_ma\node_modules\@taroify\icons\Icon.jsx doesn't exist
              .ts
                Field 'browser' doesn't contain a valid alias configuration
                D:\development\JavaScripts\stall_ma\node_modules\@taroify\icons\Icon.ts doesn't exist
              .tsx
                Field 'browser' doesn't contain a valid alias configuration
                D:\development\JavaScripts\stall_ma\node_modules\@taroify\icons\Icon.tsx doesn't exist
              .mjs
                Field 'browser' doesn't contain a valid alias configuration
                D:\development\JavaScripts\stall_ma\node_modules\@taroify\icons\Icon.mjs doesn't exist
              .vue
                Field 'browser' doesn't contain a valid alias configuration
                D:\development\JavaScripts\stall_ma\node_modules\@taroify\icons\Icon.vue doesn't exist
              as directory
                D:\development\JavaScripts\stall_ma\node_modules\@taroify\icons\Icon doesn't exist
      D:\development\JavaScripts\node_modules doesn't exist or is not a directory
      D:\development\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory

→ Watching... [2024/8/6 12:19:11]

node:internal/process/promises:279
            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'
}

babel.config.js

module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      ts: true
    }]
  ],
  plugins: [
    [
      "import",
      {
        libraryName: "@taroify/core",
        libraryDirectory: "",
        style: true,
      },
      "@taroify/core",
    ],
    [
      "import",
      {
        libraryName: "@taroify/icons",
        libraryDirectory: "",
        camel2DashComponentName: false,
        style: () => "@taroify/icons/style",
      },
      "@taroify/icons",
    ],
  ],
}

如果可能的话，请包含一个代码框的链接与复制的问题

No response

你知道如何解决这个问题吗

None

您是否愿意参与修复这个问题，并创建一个 PR

None

修复这个问题的解决方案

目前我只是把相关配置注释掉了,注释掉以下

    [
      "import",
      {
        libraryName: "@taroify/icons",
        libraryDirectory: "",
        camel2DashComponentName: false,
        style: () => "@taroify/icons/style",
      },
      "@taroify/icons",
    ],
hbztd commented

Icon 和其他文件位置不一样，文档上配置有误， 要添加customName配置

[
      "import",
      {
        libraryName: "@taroify/icons",
        libraryDirectory: "",
        camel2DashComponentName: false,
        style: () => "@taroify/icons/style",
        customName: (name) => name === "Icon" ? "@taroify/icons/van/VanIcon" : `@taroify/icons/${name}`,
      },
      "@taroify/icons",
 ]
  • 🎉2