ERROR NEW VERSION: "grapesjs": "0.21.6"

[JoanCodinachUoc]

With the new version and the new file added grapes.mjs appears this new error with webpack. I think that it's a grapesjs bug.

[iamqinglong]

I also experience this one in 0.21.6.

[artf]

can you please indicate the exact step to reproduce?

[JoanCodinachUoc]

I update the new version and i do a npm install, and when i run the app npm run sdk:local throws this error, it's not necessary to stay in the editor page and do the grapesjs.init.... is it throwed before. Is it throwed when i run the app. I don't know if i help you with that.

[artf]

Are you able to create a reproducible demo (by using for example stackblitz)?

[JoanCodinachUoc]

Sorry i can't get it , here are my dependencies

` "dependencies": {
"@agm/core": "^1.1.0",
"@agm/snazzy-info-window": "^1.1.0",
"@angular-slider/ngx-slider": "^2.0.3",
"@angular/animations": "^8.2.14",
"@angular/cdk": "^8.2.3",
"@angular/cli": "^8.3.19",
"@angular/common": "^8.2.14",
"@angular/compiler": "^8.2.14",
"@angular/core": "^8.2.14",
"@angular/forms": "^7.1.0",
"@angular/material": "^8.2.3",
"@angular/material-moment-adapter": "^9.0.1",
"@angular/platform-browser": "^8.2.14",
"@angular/platform-browser-dynamic": "^8.2.14",
"@angular/router": "^8.2.14",
"@angular/upgrade": "^8.2.11",
"@bpmn-io/properties-panel": "^0.23.0",
"@ckeditor/ckeditor5-angular": "^1.2.3",
"@ckeditor/ckeditor5-core": "^23.0.0",
"@ckeditor/ckeditor5-ui": "^23.0.0",
"@datadog/browser-rum": "^4.7.1",
"@deepstream/client": "5.2.4",
"@ngrx/core": "^1.2.0",
"@ngrx/effects": "^8.5.2",
"@ngrx/router-store": "^8.5.2",
"@ngrx/store": "^8.5.2",
"@ngrx/store-devtools": "^8.5.2",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"@popperjs/core": "2.10.2",
"@swimlane/ngx-charts": "^14.0.0",
"@uirouter/core": "^6.0.1",
"ace-builds": "^1.2.6",
"angular": "~1.6.10",
"angular-animate": "~1.6.10",
"angular-aria": "~1.6.10",
"angular-bootstrap-datetimepicker": "~3.0.0",
"angular-cookies": "~1.6.10",
"angular-google-maps": "2.4.1",
"angular-google-places-autocomplete": "~0.2.9",
"angular-legacy-sortablejs-maintained": "~0.6.2",
"angular-loading-bar": "~0.8.0",
"angular-material": "~1.1.20",
"angular-messages": "~1.6.10",
"angular-mocks": "~1.6.10",
"angular-moment": "~1.3.0",
"angular-resource": "~1.6.10",
"angular-route": "~1.6.10",
"angular-router-loader": "^0.8.5",
"angular-sanitize": "~1.6.10",
"angular-touch": "~1.6.10",
"angular-translate": "~2.18.0",
"angular-translate-loader-static-files": "~2.18.0",
"angular-translate-loader-url": "~2.18.1",
"angular-translate-storage-cookie": "~2.18.0",
"angular-translate-storage-local": "~2.18.0",
"angular-ui-bootstrap": "~2.5.6",
"angular-ui-grid": "~4.5.1",
"angular-ui-router": "~0.4.2",
"angular-ui-utils": "~0.1.1",
"angularjs-toaster": "~3.0.0",
"anychart": "^7.14.4",
"aws4": "~1.6.0",
"bootstrap": "~3.4.1",
"bootstrap-datepicker": "^1.9.0",
"bpmn-js": "^7.4.0",
"bpmn-js-properties-panel": "^0.46.0",
"bson": "^4.7.0",
"camunda-bpmn-moddle": "^5.1.0",
"clipboard": "~2.0.4",
"core-js": "^2.5.7",
"crypto-js": "~3.1.9-1",
"d3": "~4.13.0",
"gantt-schedule-timeline-calendar": "^3.33.15",
"grapesjs-plugin-ckeditor": "^1.0.1",
"grapesjs": "0.21.5",
"grapesjs-mjml": "1.0.5",
"gulp-download-stream": "0.0.19",
"jquery": "~3.3.1",
"jquery-ui": "^1.13.2",
"jquery-ui-touch-punch": "^0.2.3",
"jquery.browser": "~0.1.0",
"lodash": "~4.17.15",
"measuretool-googlemaps-v3": "~1.0.2",
"moment": "~2.24.0",
"moment-business-days": "^1.0.6",
"moment-timezone": "~0.5.21",
"ng-dialog": "~0.6.6",
"ng-file-upload": "~12.2.13",
"ng-tags-input": "~3.2.0",
"ngstorage": "~0.3.11",
"ngx-bootstrap": "^5.2.0",
"ngx-clipboard": "^14.0.1",
"ngx-color": "^5.1.2",
"ngx-device-detector": "^1.3.20",
"ngx-moment": "^3.5.0",
"ngx-monaco-editor": "^8.0.0",
"ngx-toastr": "^11.2.1",
"ngx-zendesk-webwidget": "^0.1.4",
"node-fetch": "^2.6.0",
"npm": "~6.9.0",
"npm-run-all": "^4.1.5",
"oclazyload": "~1.1.0",
"papaparse": "^4.5.1",
"pdfjs-dist": "2.5.207",
"pretty": "^2.0.0",
"request": "^2.88.0",
"run-p": "0.0.0",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.5.3",
"sass-loader": "^8.0.0",
"simple-line-icons": "~2.2.3",
"snazzy-info-window": "^1.1.1",
"sortablejs": "^1.7.0",
"sprintf-js": "~1.1.2",
"style-loader": "^1.0.0",
"summernote": "~0.8.12",
"systemjs": "~0.20.19",
"terser-webpack-plugin": "^4.2.3",
"text-encoding": "~0.7.0",
"to-string-loader": "^1.1.6",
"unzipper": "^0.10.5",
"xlsx": "~0.13.3",
"zone.js": "^0.12.0"

[artf]

unfortunately, it's not enough, I guess we'll need to wait until someone is able to create a reproducible demo

[dattrinhquoc112]

I have same issue
Check my code: https://github.com/dattrinhquoc112/nuxt-mjml
Step:

1. yarn create nuxt-app nuxt-mjml
2. yarn add grapesjs
3. yarn add grapesjs-mjml

[JoanCodinachUoc]

Any update?? @artf

[AFriboulet-ii]

Any update??

[artf]

From a quick check, the issue seems to be related to the usage webpack v4 with the grapejs module which is built with v5. As a quick workaround, you can import the builtin UMD bundle

import grapesjs from "grapesjs/dist/grapes.min";

[javadsamiee]

After updating to v0.21.8, we have this problem and adding this import will fix it. Is there any plan to fix it or we should go with this solution for now?

[artf]

Is there any plan to fix it

not really as it doesn't dependent on grapesjs itself.

Out of curiosity, what are you using as a bundler of your app?

[javadsamiee]

I'm using CRA (React v17.0.2 & react-scripts 3.4.3), which uses WebPack as a bundler. My current GrapesJs version is 0.21.2 and I can not upgrade to upper versions.

[artf]

yeah unfortunately the issue here is the usage of react-scripts 3.4.3 which under the hood uses webpack 4