Couldn't use with wux-weapp

[18601673727]

Am I doing it wrong?

Steps to reproduce

Install

npm i -S wux-weapp --production

Modified home.mina

{
  "usingComponents": {
    "wux-icon": "~wux-weapp/dist/icon/index",
    "wux-tabbar": "~wux-weapp/dist/tabbar/index",
    "wux-tabbar-item": "~wux-weapp/dist/tabbar-item/index"
  }
}

<wux-tabbar defaultCurrent="tab2">
  <wux-tabbar-item key="tab1" title="Tab 1">
    <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-on" />
    <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-off" />
  </wux-tabbar-item>
  <wux-tabbar-item key="tab2" title="Tab 2">
    <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-on" />
    <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-off" />
  </wux-tabbar-item>
  <wux-tabbar-item key="tab3" title="Tab 3">
    <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-on" />
    <wux-icon wux-class="icon" type="ios-home" size="22" slot="icon-off" />
  </wux-tabbar-item>
</wux-tabbar>

Browser errors

thirdScriptError 
 sdk uncaught third Error 
 Cannot assign to read only property 'exports' of object '#<Object>' 
 TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

jsEnginScriptError
Component is not found in path "_/_node_modules_/wux-weapp/dist/tabbar/index" (using by "pages/home");onAppRoute
Error: Component is not found in path "_/_node_modules_/wux-weapp/dist/tabbar/index" (using by "pages/home")

https://github.com/wux-weapp/wux-weapp/

[imyelo]

I tried to run your code and found that wux-weapp's source code mistakenly mixed ESM and CJS. In the above use case, we need to modify these two files as follows:

1.node_modules/wux-weapp/dist/helpers/computedBehavior.js

// ...
- module.exports = Behavior({
+ export default Behavior({
//

2.node_modules/wux-weapp/dist/helpers/relationsBehavior.js

// ...
- module.exports = Behavior({
+ export default Behavior({
//

But I suggest you make a PR to wux-weapp, a change that makes their code more robust. 😉

[alinjiajun]

你好 我是下载了wux-weapp取了dist目录下的部分组件，但是引入后报这些错误，该怎么处理呢

[imyelo]

你好 我是下载了wux-weapp取了dist目录下的部分组件，但是引入后报这些错误，该怎么处理呢

看截图的错误提示是 animation-group 依赖 helpers/baseComponent，而这个文件漏了。试下把完整的 dist 目录拷进去呢?

[alinjiajun]

我测了最简单的wux-button组件，并且全部dist都引入。在原生项目里引入就没报错。现在是报了这个错，感觉是webpack处理js的问题？

[imyelo]

@alinjiajun 建议直接用 npm 引入；如果复制 dist 目录引入的话，要留意把 webpack 里的配置改为：

// ...
      {
        test: /\.mina$/,
-        exclude: /node_modules/,
+        exclude: [/node_modules/, require('path').resolve(__dirname, 'src/wuxui')],
        use: [
          {
            loader: '@tinajs/mina-loader',
            options: {
              loaders,
            },
          },
        ],
      },
// ...