KonvaJs example does not work once i updated mobx 5

Question

I am trying to develop on that KonvaJs example: https://konvajs.org/docs/sandbox/Window_Frame_Designer.html

When cloned the repository everything is working fine. However, Once i updated mobx from 4.3.1 to 5.15.0 it gives that error;

Error: MobX injector: Store 'store' is not available! Make sure it is provided by some Provider

Could someone help me to how i fix that problem. Thanks.

Answer 1

It looks like mobx-react is using React Contexts to pass store to components.

But React Context doesn't work automatically for custom react renderers (such as react-konva). For more info see: https://github.com/konvajs/react-konva/issues/188

As workaround you just need to "bridge" store inside <Stage> component:

        <Stage
          width={this.state.width}
          height={height}
          ref={ref => {
            this.stageRef = ref;
          }}
          onClick={this.handleClick}
        >
          <Provider store={this.props.store}>
            <Layer scaleX={scale} scaleY={scale} y={20} x={20}>
              <Section
                section={root.sections[0]}
                x={root.frameSize}
                y={root.frameSize}
              />
              <Sash
                width={root.width}
                height={root.height}
                size={root.frameSize}
              />
              <Metrics />
            </Layer>
          </Provider>
        </Stage>

Demo: https://codesandbox.io/s/frame-editor-update-t7nxw