Blank Preview - No error message...

[JeffCleverley]

I had tried preview previously, but without any luck and an error message (detailed in other issue)

I uninstalled the package, but tried again today after a suggestion that it might fix itself after a reinstall - I had tried this previously, but a few other packages and Atom has updated so I figured, why not?

Unfortunately... preview still isn't working, and I don't get any error message at all... All I get is a blank preview window

[ngarnier]

hey @JeffCleverley, well the good news is that you don't have the aggressive error message anymore.

Usually, this happens when you're using not supported in the version of MJML ran by the preview package (3.1.0 right now) or something that breaks the rendering. Can you please share the MJML you're using or just try with this one for example:

<mjml>
  <mj-body>
    <mj-container>
      <mj-section background-color="#ffffff">
        <mj-column>

          <mj-image width="100" src="/assets/img/logo-small.png"></mj-image>

          <mj-divider border-color="#F45E43"></mj-divider>

          <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>

        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

[JeffCleverley]

Hey @ngarnier, less flashing red is good :)

... and your code previews fine, so it's a problem with my code below:

<mjml>
  <mj-head>
    <mj-title>Zane Mellupe | [Date] Newsletter</mj-title>
    <mj-attributes>
      <mj-all font-family="Helvetica, Verdana, sans-serif" />
      <mj-all color="black" />
      <mj-all background-color="white" />
      <mj-class name="big" font-size="24px" />
      <mj-class name="biggish" font-size="15px" />
      <mj-class name="medium" font-size="13px" />
      <mj-class name="small" font-size="8px" />
      <mj-class name="alright" align="right" />
      <mj-class name="alleft" align="left" />
      <mj-class name="full" width="100%" />
      <mj-class name="head" padding-bottom="0px" />
    </mj-attributes>
    <mj-style />
      .op3 {opacity:0.3;} .op5 {opacity:0.5;} .op7 {opacity:0.7;} .op8 {opacity:0.8;} .op9 {opacity:0.9;}
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-container>
      <mj-section mj-class="head">
        <mj-column>
          <mj-image width="600px" src="https://zanemellupe.com/zanemellupenavbanner.png" href="https://zanemellupe.com" />
          <mj-text mj-class="biggish">
            <span class="op8">News Release - [Date][Year]</span>
          </mj-text>
          <mj-text mj-class="big">
            <span class="op3">Beyond The Lights | Animal Farm <br/>ifa gallery</span>
          </mj-text>
        </mj-column>
      </mj-section>
      <mj-section>
        <mj-column>
          <mj-image width="600px" src="https://ezuconsulting.com/images/revisitinglandscapeandrevisitinglandscape1.jpg" href="https://zanemellupe.com/artwork/revisiting-landscape-and-revisiting-landscape/" />
          <mj-text mj-class="small head"><span class="op3"><em>revisiting a landscape and revisiting a landscape, Zane Mellupe, 2016</em></span></mj-text>
        </mj-column>
      </mj-section>
      <mj-section>
        <mj-column>
          <mj-text><p class="op3">For the exhibition "Beyond the lights", <a href="#">ifa gallery</a> proposes a series of "luminous" works by varied artists such as Zane Mellupe or Christophe Demaître.</p>
          <p class="op3">'Since the 1950s, natural or artificial light has become a privileged material for many contemporary artistic practices, whether they come from painting, sculpture or photography. For a long time, the light was a mystical or religious symbol materialising the divine and integrated by artists such as physical and natural. It has graduallly been introduced as immaterial, almost tangible, prevailing in art.</p>
          <p><b class="op3"><a href="#">ifa gallery</a></b><br>
          <span class="op5">
          Vernissage Preview: Saturday 10th Dec<br>
          Public Exhibition: 11th Dec to 29th Jan<br>
          Tuesdays through Sundays<br>
          ifa gallery<br>
          71 place du jeu de balle<br>
          Brussels, 1000<br>
          Belgium<br>
          Free Entry<br>
          </span></p>
          </mj-text>
        </mj-column>
        <mj-column>
          <mj-text><p class="op3">For the exhibition "Beyond the lights", <a href="#">ifa gallery</a> proposes a series of "luminous" works by varied artists such as Zane Mellupe or Christophe Demaître.</p>
          <p class="op3">'Since the 1950s, natural or artificial light has become a privileged material for many contemporary artistic practices, whether they come from painting, sculpture or photography. For a long time, the light was a mystical or religious symbol materialising the divine and integrated by artists such as physical and natural. It has graduallly been introduced as immaterial, almost tangible, prevailing in art.</p>
          <p><b class="op3"><a href="#">ifa gallery</a></b><br>
          <span class="op5">
          Vernissage Preview: Saturday 10th Dec<br>
          Public Exhibition: 11th Dec to 29th Jan<br>
          Tuesdays through Sundays<br>
          ifa gallery<br>
          71 place du jeu de balle<br>
          Brussels, 1000<br>
          Belgium<br>
          Free Entry<br>
          </span></p></mj-text>
        </mj-column>
      </mj-section>
      <mj-section>
        <mj-column>
          <mj-image width="600px" src="https://ezuconsulting.com/images/revisitinglandscapeandrevisitinglandscape1.jpg" href="https://zanemellupe.com/artwork/revisiting-landscape-and-revisiting-landscape/" />
          <mj-text mj-class="small head"><span class="op3"><em>revisiting a landscape and revisiting a landscape, Zane Mellupe, 2016</em></span></mj-text>
        </mj-column>
      </mj-section>
      <mj-section>
        <mj-column>
          <mj-social
            mode="horizontal"
            display="google:url facebook:url twitter:url"
            google-icon-color="#dc4e41"
            facebook-icon-color="#3b5998"
            twitter-icon-color="#55acee"
            google-content=""
            facebook-content=""
            twitter-content=""
            facebook-href="My facebook page"
            google-href="My google+ page"
            twitter-href="My twitter page"/>
        </mj-column>
      </mj-section>
      <mj-section>
        <mj-column width="50%">
          <mj-text mj-class="small alleft">
            <span class="op5">[View in Browser]</span>
          </mj-text>
        </mj-column>
        <mj-column width="50%">
          <mj-text mj-class="small alright">
            <span class="op5">[Unsubscribe]</span>
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Looking forward to finding out what I'm doing wrong...

Cheers

[ngarnier]

You'll laugh, but the error is in your opening mj-style tag: <mj-style />. Change it to <mj-style> and the preview is all fine :).

You might be interested in the linter package, it tells you when there are errors (if there is such an error in the head of the file, it spits a red warning because it can't actually parse the file).

[JeffCleverley]

oh a bittersweet laugh...

I am very interested in the linter package... unfortunately I have a bug there, I think...

I am getting a parse error for any error, as opposed to it being picked up by the linter. For example in the following screenshots I have removed a t from<mj-text>so it reads <mj-tex>...

The linter doesn't pick up the error:

When I save I get the parse error:

Anyway, I have another ticket open for it: https://github.com/mjmlio/atom-linter-mjml/issues/3

So I will close this, thanks again...

p.s at least I know if I get the parse error and no preview it's because of an error somewhere :)