commandbar render failed

[PitterL]

Hi, Myxvisual: I tried to test the example of commandbar, it shows the and couldn't be render out. There is no icons displayed for primaryCommands. And for secondaryCommands, the could come out, but not appears.

==============================================================

Problem description

commandbar example not work.

Link to minimal working code that reproduces the issue

https://www.react-uwp.com/components/commandbar

Versions

• React-UWP: 1.2.31
• React: 16.4.1
• Browser: electron 2.0.17

[PitterL]

electron 1.8.8 is work for this

[PitterL]

I found the electron boilerplate is not work with , other components are working. Is any any tips for debugging these to components?

Electron Boilerplate:

https://github.com/mjangir/reactron https://github.com/electron-react-boilerplate/electron-react-boilerplate

thanks.

[PitterL]

Hi, Myxvisual: I found there caused the and not created out: when create each primaryCommands elements, there compared the type, when i printed out each elem,

        React.Children.toArray(primaryCommands).filter(
          function (child) { 
            console.log("<CommandBar> child:", child.type, AppBarButton_1.default, child.type == AppBarButton_1.default, child.type == AppBarSeparator_1.default);
            return (child.type === AppBarButton_1.default || child.type === AppBarSeparator_1.default); 
          }
        );

the result show the two function is same but i don't have idea why it's not equal(even use '=='):

child: ƒ AppBarButtonButton() { return _super !== null && _super.apply(this, arguments) || this; } ƒ AppBarButtonButton() { return _super !== null && _super.apply(this, arguments) || this; } false false So i temporarily to change the compare variable to child.type.name and AppBarButton_1.default.name: ```js React.Children.toArray(primaryCommands).filter(function (child) { return (child.type.name === AppBarButton_1.default.name || child.type.name === AppBarSeparator_1.default.name); }) ``` Do you know the reason?

[PitterL]

Still found the same issues in SplitView.prototype.render function:

Use function name to determine the component instead:

React.Children.forEach(children, function (child, index) {
                if (child.type.name === SplitViewPane_1.default.name) {
                    splitViewPanes.push(React.cloneElement(child, {
...

[myxvisual]

Hi, @PitterL sorry for delay in reply, I guess your project has multiple node_modules, which causes the referenced js files to be different.

[PitterL]

Actual it is that, the boilerplate use two-package-structure which has get two node_modules https://www.electron.build/tutorials/two-package-structure

Thank you, Myxvisual .