BUG When import as module Angular 6

[nternouski]

in Version: "grapesjs": "^0.14.61", "grapesjs-preset-newsletter": "^0.2.20",

i import the script as:

import grapesjs from "grapesjs";
import grapesjsPresetNewsletter from "grapesjs-preset-newsletter";

and the context is the code:

 ngOnInit() {
    this.editor = grapesjs.init({
        container: "#gjs",
        components: `<div class="txt-red">Hello world!</div>`,
        style: ".txt-red{color: red}",
        plugins: [
            // "gjs-preset-newsletter"
            grapesjsPresetNewsletter
        ],
        pluginsOpts: {
            "gjs-preset-newsletter": {
                modalTitleImport: "Importar Template",
                importPlaceholder: "Inserte aquí el HTML y CSS inline",
                inlineCss: true,
            },
        }
    });
}

And only on build, the console print:

main.011758c7e31c6528fe91.js:1 ERROR TypeError: i is not a function
    at 15.aacc28347512f1c58ef9.js:1
    at 15.aacc28347512f1c58ef9.js:1
    at 15.aacc28347512f1c58ef9.js:1
    at Array.forEach (<anonymous>)
    at Object.init (15.aacc28347512f1c58ef9.js:1)
    at e.ngOnInit (15.aacc28347512f1c58ef9.js:1)
    at main.011758c7e31c6528fe91.js:1
    at main.011758c7e31c6528fe91.js:1
    at bo (main.011758c7e31c6528fe91.js:1)
    at qo (main.011758c7e31c6528fe91.js:1)

Please Help me. Thanks for your time.

[artf]

Hi @nternouski, unfortunately, that plugin still uses the old exporting, so you have to use it like this:

import grapesjs from "grapesjs";
import "grapesjs-preset-newsletter";
...
grapesjs.init({
 ...
 plugins: ["gjs-preset-newsletter"],
 ...
})

[nternouski]

I test with this change but still not work

[artf]

Here it works: https://codesandbox.io/s/quirky-albattani-28mlt

[nternouski]

Here it works: https://codesandbox.io/s/quirky-albattani-28mlt

This code is based on react, and the issues is on Angular 6. Still not working.

[artf]

This code is based on react

....based on React?? Where? It's just a simple, vanilla JS

[joshberry]

@nternouski I'm guessing you needed to include the gjs-preset-newsletter script in the scripts section of your build in angular.json.

"scripts": [
    "./node_modules/grapesjs/dist/grapes.min.js",
    "./node_modules/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.js",
    "./node_modules/grapesjs-blocks-bootstrap/dist/grapesjs-blocks-bootstrap4.min.js"
]

Any plugins you want to use need to be included here or the angular build won't know to include them.

[nternouski]

@nternouski I'm guessing you needed to include the gjs-preset-newsletter script in the scripts section of your build in angular.json.

"scripts": [
    "./node_modules/grapesjs/dist/grapes.min.js",
    "./node_modules/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.js",
    "./node_modules/grapesjs-blocks-bootstrap/dist/grapesjs-blocks-bootstrap4.min.js"
]

Any plugins you want to use need to be included here or the angular build won't know to include them.

Thanks for the answer! :) Your solution would fix the problem, but this import grapes for all angular application, right? I using lazy loading modules and i need import only for one module to reduce size, it is posible?

[joshberry]

If you don't add it globally, you'll need to manually register the plugin with grapesjs.

import grapesjs from "grapesjs";
import grapesjsPresetNewsletter from "grapesjs-preset-newsletter";

grapesjs.plugins.add('grapesjs-preset-newsletter', grapesjsPresetNewsletter );

Then, be sure to use the ID you configured and not the variable name when initializing.

ngOnInit() {
  this.editor = grapesjs.init({
    container: "#gjs",
    plugins: [ "gjs-preset-newsletter" ]
  });
}

[devtechk]

Hi Guys, I'm facing this error grapesjs-preset-webpage.min.js:3 Uncaught TypeError: Cannot read property 'plugins' of undefined

Try yo importing the plugin in Angular 8 grapesjs-preset-webpage.

I'm able to import grapesjs like this import * as grapesjs from 'grapesjs'; and use it, but when importing the preset of the webpage also in angular.json i get the samer error grapesjs-preset-webpage.min.js:3 Uncaught TypeError: Cannot read property 'plugins' of undefined

Thank you very much!

[devtechk]

Here it works: https://codesandbox.io/s/quirky-albattani-28mlt

This work for me in Angular 8. I've had some problem then with the "height" property here, removing or changing to "100vh" solved for me:

        height: '100%',
        showOffsets: 1,
        noticeOnUnload: 0,
        storageManager: { autoload: 0 },
        container: '#gjs',
        fromElement: true,