BUG: TS2416: Property '_up' in type 'PropertyStack' is not assignable to the same property in base type 'PropertyComposite<PropertyStackProps>'
Question
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?
- Create Angular Project
- Add grapeJS dependency
- include
"allowSyntheticDefaultImports": trueon tsconfig (for backbone) - 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',
});
}
}
- 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
Answers (3)
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
"skipLibCheck": true,
"skipLibCheck": true did the trick. Thank you @marktamis 👍
Yeah "skipLibCheck": true is necessary here until I find the fix for that TS output 😞
Related Questions and Answers
Continue research with similar issue discussions.
Issue #6365
BUG: Style Manager Fails to Interpret Descendant Selectors Correctly
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 131.0.6778.205 Reproducible...
Issue #6180
BUG: Trait's `setValue()` method not called when value changes
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome latest Reproducible demo link https...
Issue #5269
BUG: Object literal may only specify known properties, and 'el' does not exist in type 'PanelProps'.
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 115.0Reproducible demo link https://j...
Issue #4573
BUG: parseStyle is not a function
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Firefox 104.0.1Reproducible demo link https:...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.