TS2416: Property '_up' in type 'PropertyStack' is not assignable to the same property in base type 'PropertyComposite<PropertyStackProps>'
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: seems to be what allows the compi...
Read full answer below ↓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 (4)
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 😞
Thanks for reporting this, @jmtt89.
Security and dependency issues are important. The GrapesJS team actively works on keeping dependencies up-to-date.
For you right now:
- Run
npm audit fixto see available patches - Check for a newer GrapesJS version that may have already addressed this
- If available, test the latest stable release before upgrading
- If the vulnerability is critical,
npm audit fix --forceis an option, but test thoroughly
Understanding the risk:
- Review the specific vulnerability details on GitHub Security Advisories
- Not all high-severity issues affect your code path
- Some vulnerabilities only trigger under specific conditions
Staying current:
- Watch for new GrapesJS releases
- Subscribe to security notifications on the repo
- The team prioritizes security updates in their release cycle
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4854
export 'default' not found in 'backbone' (module has no exports)
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 109 Reproducible demo link none De...
Issue #4573
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:...
Issue #6685
Custom component styles are not applied after deletion and re-addition
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v143.0.7499.193 Reproducible demo l...
Issue #6527
Malformed inline styles causing editor freeze
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 138.0.4 Reproducible demo link htt...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live
We're shipping a set of discovery upgrades. New label filters, a proper compatibility switch for GrapesJS vs Studio, one-click and a smarter sort bar.
Tutorial
GJS Market 2.0 - Donations, Tracking, Labels and Better Product Discovery
We’ve rolled out a new set of GrapesJS marketplace updates across GJS Market, focused on improving how creators distribute products
Tutorial
Preset DevFuture 2.0 — New Update Released
Preset continues evolving as a clean, production-ready starting point for building visual editors powered by GrapesJS
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.