BUG: none of the official GrapesJS plugins works with the new index.d.ts

[jchautreux]

GrapesJS version

• [X] I confirm to use the latest version of GrapesJS

What browser are you using?

all and none, the bug is during the build

Reproducible demo link

unnecessary

Describe the bug

How to reproduce the bug?

1. create a blank project
2. use NPM to install GrapesJS and a plugin (preset-webpage in this example but "works" for all official plugins)
3. load GrapesJS using import GrapeJS from 'grapesjs'
4. attempt to load preset-webpage using import plugin from 'grapesjs-preset-webpage';

What is the expected behavior? the project build correctly and the plugin is available

What is the current behavior? the project failed to build because the d.ts of GrapeJS has changed

FYI I could have created this ticket in each official plugins but I think one ticket to remind to update all is enough

Code of Conduct

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

[artf]

I'm closing this as related to https://github.com/GrapesJS/grapesjs/issues/5149

[jchautreux]

That's not really the same problem, in the #5149, the bug is related on how to set plugin options during the tool initialization. Here, the bug is related to the last update of the project that has defined a new index.d.ts that is not compatible with the way of the plugins used it previously

[artf]

In the previous release index.d.ts had the same signature for plugins so I'm not sure to what change you're referring to https://github.com/GrapesJS/grapesjs/blob/095466c8cc8034e54888d67beef4cb9296c823e4/index.d.ts#L50-L53

Can you share the exact error during the build?

[jchautreux]

for example, into the index.d.ts from grapesjs-preset-webpage: grapesjs is the only import and there are references to grapesjs.Editor and grapesjs.Plugin. But Editor and Plugin are not anymore part of this unique import. In my opinion, the correct way to render the code functional is to change import (and uses): import {Editor, Plugin} from 'grapesjs.

I supposed the bug has been introduced by the last update of the index.d.ts, but maybe it's older

[jchautreux]

Error: node_modules/grapesjs-preset-webpage/dist/index.d.ts:36:42 - error TS2503: Cannot find namespace 'grapesjs'.

36  modalImportContent?: string | ((editor: grapesjs.Editor) => string);
                                            ~~~~~~~~

Error: node_modules/grapesjs-preset-webpage/dist/index.d.ts:59:23 - error TS2503: Cannot find namespace 'grapesjs'.

59 declare const plugin: grapesjs.Plugin<PluginOptions>;

[artf]

Yeah, that part is documented in the release note

[jchautreux]

But the official plugins still use the old notation, so there are unusable for the moment unless i missed something

[artf]

Unfortunately I didn't find time to update plugins, but any help would be appreciated.

[Idaryss]

@artf Hello, I am getting an error while implementing this solution. Before I used to declare a file name grapesjs.d.ts and have to write in it 'declare module grapesjs'

But looks like i need to remove it to use usePlugin helper. but once I remove this file I am getting the below issue:

Any support will be appreciated OR can you please setup a quick simple Stackbliz using angular 17 or 18 and MJML plugin ? this would be awesome.