Property 'plugins' does not exist on type 'IntrinsicAttributes & GrapesjsReactProps & { children?: ReactNode; }

[bostondevin]

Any idea what this would be about?

ERROR in libs/grapes/src/lib/grapes.tsx:13:7
TS2322: Type '{ id: string; plugins: string[]; }' is not assignable to type 'IntrinsicAttributes & GrapesjsReactProps & { children?: ReactNode; }'.
Property 'plugins' does not exist on type 'IntrinsicAttributes & GrapesjsReactProps & { children?: ReactNode; }'.
11 | <GrapesjsReact
12 | id='grapesjs-react'

13 | plugins={[
| ^^^^^^^
14 | 'gjs-preset-webpage',
15 | 'gjs-blocks-basic'
16 | ]}

Here's the code - it works fine if I remove the plugins attribute:

import 'grapesjs-preset-webpage';
import { GrapesjsReact } from 'grapesjs-react';
export interface GrapesProps { }

export function Grapes(props: GrapesProps) {
  return (
    <GrapesjsReact
      id='grapesjs-react'
      plugins={[
        'gjs-preset-webpage',
        'gjs-blocks-basic'
      ]}
    />
  );
}

export default Grapes;

[bostondevin]

It seems like there is no way now to add plugins?

[thanhtunguet]

It might be the type declaration bug only. The code should work.
If it does not work, please include the runtime error trace.
Thank you

[vinicius-actcon]

It's probably because you are using this code with typescript and this prop is not defined in the type definition, so the react/typescript is not allowing your conde ran.

[abdellatifLabr]

For anyone who is using typescript, just add // @ts-ignore above plugins prop, should be fine for moving on until this issue is handled.

[junraemon]

Found a way to resolve this, by doing this:

`
import "grapesjs/dist/css/grapes.min.css"
import { GrapesjsReact } from "grapesjs-react"
import blocks from "grapesjs-blocks-basic"
import webpage from "grapesjs-preset-webpage"

function PageCanvas() {
return (
<GrapesjsReact
id="grapesjs-react"
plugins={[blocks, webpage]}
/>
)
}

export default PageCanvas
`