search

GrapesJS / mjml

Newsletter Builder with MJML components in GrapesJS
http://grapesjs.com/demo-mjml.html
BSD 3-Clause "New" or "Revised" License
637 stars 227 forks source link

[0.1.15] Cannot read property 'innerHTML' of null in production, works fine in dev #155

Closed Ardhimas closed 3 years ago

Ardhimas commented 4 years ago

Hello everyone,

First of all, thanks to everyone who has done a great job in this package. Unfortunately, I ran into an issue in prod that doesn't happen in dev.

I did some research on the existing issues and found https://github.com/artf/grapesjs-mjml/issues/110 which had been closed and resolved. However, I ran into the exact same issue. I was able to downgrade grapesjs-mjml to version 0.0.31 to get it working as other posters suggested before the fix https://github.com/artf/grapesjs-mjml/pull/115. This confirms that I ran into the same issue, but it seems that the fix did not work for me. I've tried several versions of grapesjs-mjml at 0.1.x, but it seems 0.0.31 is the only one that worked in prod. The issue with this is that the lack of support for mj-style tags could cause issues for my use case.

I put together a quick repo to demonstrate the divergent behavior between dev and prod webpack environments here https://github.com/Ardhimas/grapesjs-mjml-broken-demo.

Unfortunately, I am not sufficiently well versed in the intricacies of webpack to suggest what the issue could be. I'd appreciate it if someone could take a look and see what the issue is.

Thanks in advance,

Ardy

Felix-Indoing commented 4 years ago

Confirm exactly the same issue here.

For anyone who wants to work around this, just use import tag for grapesjs-mjml, do not use ES import.

DRoet commented 4 years ago

I am not exactly sure what caused the breakage this time, but the problem is that this plugin doesn't work when function names gets distorted by minifiers. This is due to the fact that the plugin calls "parent" methods from grapesjs without having a direct dependency

If you are using terser there is an option to keep the original function names: keep_fnames

MaxTemplar commented 4 years ago

i have same issue when use v-html in #gjs container and use fromElement: true. if I set fromElement to false or not use v-html error is not present.

jcolla-holla commented 3 years ago

Anyone find a consistent solution for this? With examples ideally that can be shared.

DRoet commented 3 years ago

Workaround is to import the unminified bundle import grapesjsMJML from 'grapesjs-mjml/dist/grapesjs-mjml' but this will bloat up your bundle size quite a bit, I'm hoping a future release (5.x) of mjml will have better browser support since it will exclude things like the minifier/beautifier and will have a significant bundle decrease overall.

DRoet commented 3 years ago

This should be fixed now as of v0.4.0 since it include the official mjml-browser build