Bug? Not being notified of app-bridge ContextualSaveBar events

Retired Boards Appdev Tools
1

I’m having a weird issue where my react components aren’t receiving notifications directly from the (app-bridge, not polaris) ContextualSaveBar, but they receive the exact same notifications from the app-bridge itself when I subscribe to the fully-qualified action names. I’m not sure if this is a bug or just me not understanding how the app-bridge or react work.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { AppBridgeContext } from '@shopify/app-bridge-react/context';
import { ContextualSaveBar } from '@shopify/app-bridge/actions';
import { Provider } from '@shopify/app-bridge-react';
import { Heading } from '@shopify/polaris';

const apiKey = 'SOME-API-KEY';
const shopOrigin = 'SOME-STORE';

class App extends Component {
  componentDidMount() {
    this.saveBar = ContextualSaveBar.create(this.context, {});
    this.saveBar.dispatch(ContextualSaveBar.Action.SHOW);

    ////////// THE IMPORTANT BIT: Here's where I subscribe to notifications from both the save bar and the app-bridge itself.  I only ever receive the latter
    this.saveBar.subscribe(ContextualSaveBar.Action.SAVE, () => console.log("Save Clicked (subscribed to ContextualSaveBar)"));
    this.context.subscribe('APP::CONTEXTUAL_SAVE_BAR::SAVE', () => console.log("Save Clicked (subscribed to App Bridge)"));
  }

  render() {
   return <Heading>Contextual Save Bar Test</Heading>
  }
}

App.contextType = AppBridgeContext;
ReactDOM.render(<Provider config={ { apiKey: apiKey, shopOrigin: shopOrigin } }><App /></Provider>, document.getElementById('root'));

My package.json

  "dependencies": {
    "@shopify/polaris": "3.16.0",
    "@shopify/app-bridge-react": "^1.6.7",
    "lodash": "4.17.11",
    "mkdirp": "0.5.1",
    "node-sass": "4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-lifecycle-component": "4.0.0",
    "react-redux": "7.0.2",
    "react-scripts": "2.1.8",
    "redux": "4.0.1",
    "redux-logger": "3.0.6",
    "redux-thunk": "2.3.0",
    "reselect": "4.0.0",
    "rimraf": "^2.6.3"
  },
2

Hi @james_beninger ,

I checked with our team of developers who work on the App Bridge, and they’ve let me know that the snippet you sent SHOULD work, but are hoping you could give some additional context. Specifically, what does ContextualSaveBar.Action.SAVE evaluate to when you run that app? Are you seeing any errors at all?

Cheers

3

No matter what I do now, I can’t reproduce the problem. If it crops up again, I’ll see if I can find out exactly what was causing it. For now, it looks like the problem was somewhere on my end.

4

It looks like this is a Windows-only problem. My app was created with create-react-app. When I build it in Windows (cygwin environment), I get the problem described above. When I build it using my Mac, the problem disappears.

I assume this is somehow related to webpack and the order in which it initializes javascript modules, but it’s hard to say exactly where the problem is occurring. I don’t intend to look any deeper into it right now since I have a workaround. I just wanted to record my findings for posterity.