balmjs / balm-ui

:diamonds: A modular and customizable UI library based on Material Design and Vue
https://material.balmjs.com
MIT License
506 stars 30 forks source link

Cannot use "import { detectIE } from 'balm-ui';" #25

Closed XiaoPangxie732 closed 3 years ago

XiaoPangxie732 commented 3 years ago

balm-ui版本9.0.2,脚手架vite,使用import { detectIE } from 'balm-ui';时浏览器控制台报错

// 一段使用了import { detectIE } from 'balm-ui';的代码
import { detectIE } from 'balm-ui';
if(detectIE()) { ... }

浏览器控制台报错

Uncaught SyntaxError: The requested module '/@modules/balm-ui.js' does not provide an export named 'detectIE'

image

但是使用 import detectIE from 'balm-ui/utils/ie'; 就不会有报错

XiaoPangxie732 commented 3 years ago

我又发现好像除了能直接import BalmUI from 'balm-ui';之外,其它的单独的组件或方法必须从相应的文件导入,不能直接import from 'balm-ui'

elf-mouse commented 3 years ago

@XiaoPangxie732 , 感谢您的反馈,今天我会全面确认一波 :)

elf-mouse commented 3 years ago

这个问题只有 Vite 中会出现(Balm CLI 和 Vue CLI 脚手架中均正常),属于 Native ES Module 的打包和使用问题。

当前独立使用的临时解决方案:

我会尽快调整测试完毕后发布补丁,再次感谢!

elf-mouse commented 3 years ago

@XiaoPangxie732 ,

balm-ui@9.1.0已发布,可以正常使用 esModule。

export default {
  alias: {
    vue: "vue/dist/vue.esm-bundler.js",
    "balm-ui": "balm-ui/dist/balm-ui.esm.js",
    "balm-ui-plus": "balm-ui/dist/balm-ui-plus.esm.js",
    "balm-ui-css": "balm-ui/dist/balm-ui.css",
  },
  optimizeDeps: {
    // Remove useless warning for `balm-ui`
    exclude: ["balm-ui"]
  }
};
import BalmUI, { detectIE } from "balm-ui";
import BalmUIPlus from "balm-ui-plus";
import "balm-ui-css";

console.log(detectIE());

const app = createApp(App);

app.use(BalmUI);
app.use(BalmUIPlus);

app.mount("#app");
XiaoPangxie732 commented 3 years ago

可以正常使用,感谢