Marko: Unrecognized tags when compiling XML

[austinkelleher]

When introducing the unrecognized tags error was introduced, compiling from XML yields . Currently the only workaround for this is to create an html-elements.json file and ignore each individual tag used.

We should consider:

• When compiling Marko XML files (e.g. template.xml.marko, template.marko.xml) ignoring all unrecognized tags by default

• Introduce a wildcard into the html-elements.json for ignoring all unrecognized tags:

{
  "<*>": {}
}

/cc @mlrawlings @patrick-steele-idem

[abhishekdev]

I have been using Marko as a markup template engine for use with MJML. With Marko v4 the logic to generate dynamic MJML templates broke as marko can no longer recognize mjml tags and custom components. Adding all mjml tags and components individually seems like a maintenance mess. In my scenarios the output from Marko is compiled and validated by mjml, so it would be great if marko can skip the validation logic.

• While this commit should fix the issue at hand, going forward, Is this a recommended usage scenario for Marko?
• Does Marko intend to support the use case for generating generic markup in the foreseeable future?

UPDATE: Just tried with the latest release, but does not seem to work :-(

• I edited the names of my files from *.mjml.marko to *.xml.marko
• Also tried the wildcard entry into html-elements.json

Thanks

[abhishekdev]

FWIW: Here is the errors I get on one of the simplest pages.

[PROJECT-PATH]/node_modules/marko/src/compiler/Compiler.js:84
        throw error;
        ^

Error: An error occurred while trying to compile template at path "[PROJECT-PATH]/src/pages/home/home.xml.marko". Error(s) in template:
1) [src/pages/home/home.xml.marko:1:0] Unrecognized tag: mjml - More details: https://github.com/marko-js/marko/wiki/Error:-Unrecognized-Tag
2) [src/pages/home/home.xml.marko:2:4] Unrecognized tag: mj-head - More details: https://github.com/marko-js/marko/wiki/Error:-Unrecognized-Tag
3) [src/pages/home/home.xml.marko:3:8] Unrecognized tag: mj-title - More details: https://github.com/marko-js/marko/wiki/Error:-Unrecognized-Tag
4) [src/pages/home/home.xml.marko:5:4] Unrecognized tag: mj-body - More details: https://github.com/marko-js/marko/wiki/Error:-Unrecognized-Tag
5) [src/pages/home/home.xml.marko:6:8] Unrecognized tag: mj-container - More details: https://github.com/marko-js/marko/wiki/Error:-Unrecognized-Tag
6) [src/pages/home/home.xml.marko:7:12] Unrecognized tag: mj-section - More details: https://github.com/marko-js/marko/wiki/Error:-Unrecognized-Tag
7) [src/pages/home/home.xml.marko:8:16] Unrecognized tag: mj-column - More details: https://github.com/marko-js/marko/wiki/Error:-Unrecognized-Tag
8) [src/pages/home/home.xml.marko:9:20] Unrecognized tag: mj-divider - More details: https://github.com/marko-js/marko/wiki/Error:-Unrecognized-Tag
9) [src/pages/home/home.xml.marko:10:20] Unrecognized tag: mj-text - More details: https://github.com/marko-js/marko/wiki/Error:-Unrecognized-Tag
10) [src/pages/home/home.xml.marko:13:20] Unrecognized tag: mj-divider - More details: https://github.com/marko-js/marko/wiki/Error:-Unrecognized-Tag

    at handleErrors ([PROJECT-PATH]/node_modules/marko/src/compiler/Compiler.js:82:21)
    at Compiler.compile ([PROJECT-PATH]/node_modules/marko/src/compiler/Compiler.js:151:9)
    at _compile ([PROJECT-PATH]/node_modules/marko/src/compiler/index.js:91:33)
    at Object.compile ([PROJECT-PATH]/node_modules/marko/src/compiler/index.js:105:12)
    at compile ([PROJECT-PATH]/node_modules/marko/src/node-require/index.js:52:38)
    at Object.markoRequireExtension [as .marko] ([PROJECT-PATH]/node_modules/marko/src/node-require/index.js:120:27)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)

[austinkelleher]

@abhishekdev Looks like Marko files are not skipping the validation logic in that scenario. I will take a look. Sorry for the inconvenience.

[austinkelleher]

@abhishekdev I have a fix prepared in #732 and will publish a new version soon after the code is reviewed.

[austinkelleher]

Published [email protected] @abhishekdev

[blowsie]

I get a similar error when trying to use marko with mjml

Template

<mj-section>
  <mj-column>
    <mj-text mj-class="blue big">
      <b>Batch</b>
    </mj-text>
    <mj-text>
      ${input.batch.reference}
    </mj-text>
  </mj-column>
</mj-section>

Output

Error: Generating code for TemplateRoot node failed. Error: Error: Generating code for <mj-section> tag failed. Error: Error: Generating code for <mj-column> tag (..\..\..\templates\hello.marko:2:2) failed. Error: Error: Generating code for <mj-text> tag (..\..\..\templates\hello.marko:3:4) failed. Error: Error: Invalid JavaScript identifier: mj-class

html-elements.json

{
  "<*>": {},
  "<mjml>": {},
  "<mj-accordion-element>": {},
  "<mj-accordion-text>": {},
  "<mj-accordion-title>": {},
  "<mj-accordion>": {},
  "<mj-all>": {},
  "<mj-attributes>": {},
  "<mj-body>": {},
  "<mj-breakpoint>": {},
  "<mj-button>": {},
  "<mj-carousel-image>": {},
  "<mj-carousel>": {},
  "<mj-class>": {},
  "<mj-column>": {},
  "<mj-divider>": {},
  "<mj-font>": {},
  "<mj-head>": {},
  "<mj-hero>": {},
  "<mj-image>": {},
  "<mj-include>": {},
  "<mj-invoice>": {},
  "<mj-location>": {},
  "<mj-navbar-link>": {},
  "<mj-navbar>": {},
  "<mj-preview>": {},
  "<mj-raw>": {},
  "<mj-section>": {},
  "<mj-social-element>": {},
  "<mj-social>": {},
  "<mj-spacer>": {},
  "<mj-style>": {},
  "<mj-table>": {},
  "<mj-text>": {},
  "<mj-wrapper>": {}
}

@abhishekdev did you ever get your solution working?

[eikaramba]

for anyone coming across this issue i fixed it and am using marko BEFORE MJML rendering by adding a marko.json to the root folder with the following content:

{
  "<mj-accordion>": {
    "html": true
  },
  "<mj-body>": {
    "html": true
  },
  "<mj-button>": {
    "html": true
  },
  "<mj-carousel>": {
    "html": true
  },
  "<mj-cli>": {
    "html": true
  },
  "<mj-column>": {
    "html": true
  },
  "<mj-core>": {
    "html": true
  },
  "<mj-divider>": {
    "html": true
  },
  "<mj-group>": {
    "html": true
  },
  "<mj-attributes>": {
    "html": true
  },
  "<mj-breakpoint>": {
    "html": true
  },
  "<mj-font>": {
    "html": true
  },
  "<mj-preview>": {
    "html": true
  },
  "<mj-style>": {
    "html": true
  },
  "<mj-head>": {
    "html": true
  },
  "<mj-hero>": {
    "html": true
  },
  "<mj-image>": {
    "html": true
  },
  "<mj-includ>e": {
    "html": true
  },
  "<mj-migrate>": {
    "html": true
  },
  "<mj-navbar>": {
    "html": true
  },
  "<mj-parser-xml>": {
    "html": true
  },
  "<mj-raw>": {
    "html": true
  },
  "<mj-section>": {
    "html": true
  },
  "<mj-social>": {
    "html": true
  },
  "<mj-spacer>": {
    "html": true
  },
  "<mj-table>": {
    "html": true
  },
  "<mj-text>": {
    "html": true
  },
  "<mj-title>": {
    "html": true
  },
  "<mj-validator>": {
    "html": true
  },
  "<mj-wrapper>": {
    "html": true
  },
  "<mjml>": {
    "html": true
  }
}