BUG: TS2416: Property '_up' in type 'PropertyStack' is not assignable to the same property in base type 'PropertyComposite<PropertyStackProps>'

[jmtt89]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

---

Reproducible demo link

https://codesandbox.io/p/sandbox/pensive-browser-mfhxp8

Describe the bug

How to reproduce the bug?

1. Create Angular Project
2. Add grapeJS dependency
3. include "allowSyntheticDefaultImports": true on tsconfig (for backbone)
4. Create wrapper component for GrapeJS

import { Component, OnInit } from '@angular/core';
import grapesjs from 'grapesjs';

@Component({
  selector: 'app-editor',
  template: '<div id="myComposer"></div>',
  styleUrls: ['./editor.component.css'],
})
export class EditorComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {
    this.loadGrapesJS();
  }

  private loadGrapesJS() {
    console.log('loadGrapesJS');
    grapesjs.init({
      container: '#myComposer',
    });
  }
}

6. Use the wrapper component on the project

<app-editor></app-editor>

What is the expected behavior?

Render GrapeJS Editor

What is the current behavior?

Broken on Build

Build at: 2023-05-31T14:41:40.309Z - Hash: dc2896192a7f20df - Time: 11178ms

Warning: /workspace/src/app/editor/editor.component.ts depends on 'grapesjs'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies



Error: node_modules/grapesjs/dist/index.d.ts:7601:2 - error TS2416: Property '_up' in type 'PropertyStack' is not assignable to the same property in base type 'PropertyComposite<PropertyStackProps>'.
  Type '(props: Partial<PropertyStackProps>, opts?: OptionsUpdate | undefined) => this' is not assignable to type '(props: Partial<PropertyCompositeProps>, opts?: OptionsUpdate | undefined) => this'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'Partial<PropertyCompositeProps>' is not assignable to type 'Partial<PropertyStackProps>'.
        Types of property 'fromStyle' are incompatible.
          Type 'FromStyle | undefined' is not assignable to type '((style: StyleProps, data: FromStyleDataStack) => PropValues) | undefined'.

7601  _up(props: Partial<PropertyStackProps>, opts?: OptionsUpdate): this;
      ~~~

Code of Conduct

• I agree to follow this project's Code of Conduct

[sfreed]

Getting Same Error

[Deepakanandrao]

+1

[marktamis]

+1

[marktamis]

I copied over some of the settings of the tsconfig from a working vite gjs project into my stenciljs project and now it is running correctly. I think you need to do some tweaking to your angular tsconfig and it should not throw the error anymore

below is my working stenciljs tsconfig:

{
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "declaration": false,
    "experimentalDecorators": true,
    "lib": ["dom", "es2021", "DOM.Iterable"],
    "skipLibCheck": true,
    "strictNullChecks": false,
    "moduleResolution": "nodenext",
    "module": "esnext",
    "target": "es2021",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "jsx": "react",
    "jsxFactory": "h"
  },
  "include": [
    "src"
  ],
  "exclude": [
      "node_modules"
  ]
}

    "skipLibCheck": true,
    "strictNullChecks": false,

seems to be what allows the compilation

[Deepakanandrao]

"skipLibCheck": true,

"skipLibCheck": true did the trick. Thank you @marktamis 👍

[artf]

Yeah "skipLibCheck": true is necessary here until I find the fix for that TS output 😞

[jmtt89]

Thanks!!!