50 Errors in build

[GeorgiaSamaritaki]

After cloning and running yarn add @projectstorm/react-diagrams and yarn build I am getting more than 50 errors, see below. I think I'm missing some react dependencies.

yarn run v1.22.19
$ tsc --build && pnpm run -r build
packages/react-canvas-core/src/core/AbstractReactFactory.tsx:19:63 - error TS2503: Cannot find namespace 'JSX'.

19  abstract generateReactWidget(event: GenerateWidgetEvent<T>): JSX.Element;
                                                                 ~~~

packages/react-canvas-core/src/entities/layer/TransformLayerWidget.tsx:37:8 - error TS2339: Property 'state' does not exist on type 'TransformLayerWidget'.

37   this.state = {};
          ~~~~~

packages/react-canvas-core/src/entities/layer/TransformLayerWidget.tsx:41:22 - error TS2339: Property 'props' does not exist on type 'TransformLayerWidget'.

41   const model = this.props.layer.getParent();
                        ~~~~~

packages/react-canvas-core/src/entities/layer/TransformLayerWidget.tsx:53:12 - error TS2339: Property 'props' does not exist on type 'TransformLayerWidget'.

53   if (this.props.layer.getOptions().transformed) {
              ~~~~~

packages/react-canvas-core/src/entities/layer/TransformLayerWidget.tsx:62:12 - error TS2339: Property 'props' does not exist on type 'TransformLayerWidget'.

62   if (this.props.layer.getOptions().isSvg) {
              ~~~~~

packages/react-canvas-core/src/entities/layer/TransformLayerWidget.tsx:63:12 - error TS2604: JSX element type 'S.SvgLayer' does not have any construct or call signatures.

63    return <S.SvgLayer style={this.getTransformStyle()}>{this.props.children}</S.SvgLayer>;
              ~~~~~~~~~~

packages/react-canvas-core/src/entities/layer/TransformLayerWidget.tsx:63:62 - error TS2339: Property 'props' does not exist on type 'TransformLayerWidget'.

63    return <S.SvgLayer style={this.getTransformStyle()}>{this.props.children}</S.SvgLayer>;
                                                                ~~~~~

packages/react-canvas-core/src/entities/layer/TransformLayerWidget.tsx:65:11 - error TS2604: JSX element type 'S.DivLayer' does not have any construct or call signatures.

65   return <S.DivLayer style={this.getTransformStyle()}>{this.props.children}</S.DivLayer>;
             ~~~~~~~~~~

packages/react-canvas-core/src/entities/layer/TransformLayerWidget.tsx:65:61 - error TS2339: Property 'props' does not exist on type 'TransformLayerWidget'.

65   return <S.DivLayer style={this.getTransformStyle()}>{this.props.children}</S.DivLayer>;
                                                               ~~~~~

packages/react-canvas-core/src/entities/layer/SmartLayerWidget.tsx:12:15 - error TS2339: Property 'props' does not exist on type 'SmartLayerWidget'.

12   return this.props.layer.isRepaintEnabled();
                 ~~~~~

packages/react-canvas-core/src/entities/layer/SmartLayerWidget.tsx:16:15 - error TS2339: Property 'props' does not exist on type 'SmartLayerWidget'.

16   return this.props.engine.getFactoryForLayer(this.props.layer).generateReactWidget({ model: this.props.layer });
                 ~~~~~

packages/react-canvas-core/src/entities/layer/SmartLayerWidget.tsx:16:52 - error TS2339: Property 'props' does not exist on type 'SmartLayerWidget'.

16   return this.props.engine.getFactoryForLayer(this.props.layer).generateReactWidget({ model: this.props.layer });
                                                      ~~~~~

packages/react-canvas-core/src/entities/layer/SmartLayerWidget.tsx:16:99 - error TS2339: Property 'props' does not exist on type 'SmartLayerWidget'.

16   return this.props.engine.getFactoryForLayer(this.props.layer).generateReactWidget({ model: this.props.layer });
                                                                                                     ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:30:8 - error TS2339: Property 'state' does not exist on type 'CanvasWidget'.   

30   this.state = {
          ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:37:8 - error TS2339: Property 'props' does not exist on type 'CanvasWidget'.   

37   this.props.engine.deregisterListener(this.canvasListener);
          ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:38:8 - error TS2339: Property 'props' does not exist on type 'CanvasWidget'.   

38   this.props.engine.setCanvas(null);
          ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:45:8 - error TS2339: Property 'props' does not exist on type 'CanvasWidget'.   

45   this.props.engine.setCanvas(this.ref.current);
          ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:46:8 - error TS2339: Property 'props' does not exist on type 'CanvasWidget'.   

46   this.props.engine.iterateListeners((list) => {
          ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:56:30 - error TS2339: Property 'props' does not exist on type 'CanvasWidget'.  

56   this.canvasListener = this.props.engine.registerListener({
                                ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:58:10 - error TS2339: Property 'forceUpdate' does not exist on type 'CanvasWidget'.

58     this.forceUpdate();
            ~~~~~~~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:63:9 - error TS2339: Property 'props' does not exist on type 'CanvasWidget'.   

63    this.props.engine.getActionEventBus().fireAction({ event });
           ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:66:9 - error TS2339: Property 'props' does not exist on type 'CanvasWidget'.   

66    this.props.engine.getActionEventBus().fireAction({ event });
           ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:75:23 - error TS2339: Property 'props' does not exist on type 'CanvasWidget'.  

75   const engine = this.props.engine;
                         ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:79:5 - error TS2604: JSX element type 'S.Canvas' does not have any construct or call signatures.

79    <S.Canvas
       ~~~~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:80:21 - error TS2339: Property 'props' does not exist on type 'CanvasWidget'.  

80     className={this.props.className}
                       ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:83:11 - error TS2339: Property 'props' does not exist on type 'CanvasWidget'.  

83      this.props.engine.getActionEventBus().fireAction({ event });
             ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:86:11 - error TS2339: Property 'props' does not exist on type 'CanvasWidget'.  

86      this.props.engine.getActionEventBus().fireAction({ event });
             ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:89:11 - error TS2339: Property 'props' does not exist on type 'CanvasWidget'.  

89      this.props.engine.getActionEventBus().fireAction({ event });
             ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:92:11 - error TS2339: Property 'props' does not exist on type 'CanvasWidget'.  

92      this.props.engine.getActionEventBus().fireAction({ event });
             ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:95:11 - error TS2339: Property 'props' does not exist on type 'CanvasWidget'.  

95      this.props.engine.getActionEventBus().fireAction({ event });
             ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:98:11 - error TS2339: Property 'props' does not exist on type 'CanvasWidget'.  

98      this.props.engine.getActionEventBus().fireAction({ event });
             ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:101:11 - error TS2339: Property 'props' does not exist on type 'CanvasWidget'. 

101      this.props.engine.getActionEventBus().fireAction({ event });
              ~~~~~

packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx:107:53 - error TS2339: Property 'props' does not exist on type 'CanvasWidget'. 

107        <SmartLayerWidget layer={layer} engine={this.props.engine} key={layer.getID()} />
                                                        ~~~~~

packages/react-canvas-core/src/core-state/AbstractDisplacementState.ts:10:9 - error TS2503: Cannot find namespace 'React'.

10  event: React.MouseEvent | React.TouchEvent;
           ~~~~~

packages/react-canvas-core/src/core-state/AbstractDisplacementState.ts:10:28 - error TS2503: Cannot find namespace 'React'.

10  event: React.MouseEvent | React.TouchEvent;
                              ~~~~~

packages/react-canvas-core/src/core-state/AbstractDisplacementState.ts:24:37 - error TS2503: Cannot find namespace 'React'.

24     fire: (actionEvent: ActionEvent<React.MouseEvent>) => {
                                       ~~~~~

packages/react-canvas-core/src/core-state/AbstractDisplacementState.ts:33:37 - error TS2503: Cannot find namespace 'React'.

33     fire: (actionEvent: ActionEvent<React.MouseEvent>) => {
                                       ~~~~~

packages/react-canvas-core/src/core-state/AbstractDisplacementState.ts:59:37 - error TS2503: Cannot find namespace 'React'.

59     fire: (actionEvent: ActionEvent<React.TouchEvent>) => {
                                       ~~~~~

packages/react-canvas-core/src/core-state/AbstractDisplacementState.ts:68:37 - error TS2503: Cannot find namespace 'React'.

68     fire: (actionEvent: ActionEvent<React.TouchEvent>) => {
                                       ~~~~~

packages/react-canvas-core/src/core-state/AbstractDisplacementState.ts:91:52 - error TS2503: Cannot find namespace 'React'.

91  protected handleMove(x: number, y: number, event: React.MouseEvent | React.TouchEvent): void {
                                                      ~~~~~

packages/react-canvas-core/src/core-state/AbstractDisplacementState.ts:91:71 - error TS2503: Cannot find namespace 'React'.

91  protected handleMove(x: number, y: number, event: React.MouseEvent | React.TouchEvent): void {
                                                                         ~~~~~

packages/react-canvas-core/src/entities/selection/SelectionBoxWidget.tsx:19:25 - error TS2339: Property 'props' does not exist on type 'SelectionBoxWidget'.

19   const { rect } = this.props;
                           ~~~~~

packages/react-canvas-core/src/entities/selection/SelectionBoxWidget.tsx:24:5 - error TS2604: JSX element type 'S.Container' does not have any construct or call signatures.

24    <S.Container
       ~~~~~~~~~~~

packages/react-canvas-core/src/entities/selection/SelectionBoxLayerFactory.tsx:16:72 - error TS2503: Cannot find namespace 'JSX'.

16  generateReactWidget(event: GenerateWidgetEvent<SelectionLayerModel>): JSX.Element {
                                                                          ~~~

packages/react-canvas-core/src/widgets/PeformanceWidget.tsx:6:18 - error TS2503: Cannot find namespace 'JSX'.

6  children: () => JSX.Element;
                   ~~~

packages/react-canvas-core/src/widgets/PeformanceWidget.tsx:19:13 - error TS2339: Property 'props' does not exist on type 'PeformanceWidget'.  

19   if (!this.props.model.performanceTune()) {
               ~~~~~

packages/react-canvas-core/src/widgets/PeformanceWidget.tsx:23:12 - error TS2339: Property 'props' does not exist on type 'PeformanceWidget'.  

23   if (this.props.model !== nextProps.model) {
              ~~~~~

packages/react-canvas-core/src/widgets/PeformanceWidget.tsx:28:26 - error TS2339: Property 'props' does not exist on type 'PeformanceWidget'.  

28   return !_.isEqual(this.props.serialized, nextProps.serialized);
                            ~~~~~

packages/react-canvas-core/src/widgets/PeformanceWidget.tsx:32:15 - error TS2339: Property 'props' does not exist on type 'PeformanceWidget'.  

32   return this.props.children();
                 ~~~~~

packages/react-canvas-core/src/states/MoveItemsState.ts:23:31 - error TS2503: Cannot find namespace 'React'.

23     fire: (event: ActionEvent<React.MouseEvent>) => {
                                 ~~~~~

Found 50 errors.

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[GeorgiaSamaritaki]

I added @types/react and @types/react-dom deps and the build is now successful but the demo project is throwing an error

yarn run v1.22.19
$ ./node_modules/.bin/start-storybook
/bin/sh: 1: ./node_modules/.bin/start-storybook: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[TrentBrown]

I had this same issue. This suggests a work around which seems to work, so far:

https://github.com/projectstorm/react-diagrams/discussions/998

My WAG is that I didn't have Typescript installed.

I get that the authors are deep in the Typescript world and probably assume that anyone coming to their project is also, but for the rest of us, it's a really discouraging first impression that it won't build out of the box. This is worth fixing soon.