Blueprint: Unable to get ContextMenu working (HOC style)

[Svenito]

Environment

• __Package version(s)__: @blueprintjs/[email protected],
• __Browser and OS versions__: Version 1.1.20 Chromium: 79.0.3945.74 (Official Build) (64-bit), Linux 4.15.0-72-generic #81-Ubuntu SMP Tue Nov 26 12:20:02 UTC 2019

Question

Using the higher order component example from the docs, I am unable to get the ContextMenu to work. The error I am getting is

TypeError: Class constructor RightClickMeWithContext cannot be invoked without 'new'

Full error page:
https://pastebin.com/9N7Uusrb

I am using a create-react-app project, hence the HOC solution.

My component:

import React from "react";
import { ContextMenuTarget, Menu, MenuItem } from "@blueprintjs/core";

export const RightClickMe = ContextMenuTarget(
  class RightClickMeWithContext extends React.Component {
    render() {
      // root element must support `onContextMenu`
      return <div>TEST</div>;
    }

    renderContextMenu() {
      // return a single element, or nothing to use default browser behavior
      return (
        <Menu>
          <MenuItem onClick={this.handleSave} text="Save" />
          <MenuItem onClick={this.handleDelete} text="Delete" />
        </Menu>
      );
    }

    onContextMenuClose() {
      // Optional method called once the context menu is closed.
    }
  }
);

[TheDiamondDoge]

@Svenito Try to use ContextMenu.show() from "Imperative usage" section.

Works for me.

[Svenito]

Thanks, that is what I ended up doing. I raised the issue as the above is expected to work according to the docs.

[maclockard]

@Svenito This is most likely this issue: https://github.com/palantir/blueprint/issues/3604

This is a solution: https://github.com/palantir/blueprint/issues/3604#issuecomment-551277834

if you are unable to do that, then this could also work: https://github.com/pmclachlan/blink-mind/commit/79511a52ac379ab04f4d7fa96588733bac54b8cd

[natejcho]

@Svenito This is most likely this issue: #3604

This is a solution: #3604 (comment)

if you are unable to do that, then this could also work: pmclachlan/blink-mind@79511a5

Thanks!

The first is not possible if using CRA https://github.com/facebook/create-react-app/issues/8139

Second is more applicable for my use case, and can be used for HOC method as well