Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(mjml-browser): typeerror when using inline styles and juicePreserveTags #2654

Merged
merged 1 commit into from
Apr 5, 2023
Merged

fix(mjml-browser): typeerror when using inline styles and juicePreserveTags #2654

merged 1 commit into from
Apr 5, 2023

Conversation

robin-ray
Copy link
Contributor

fixes #2653

To Reproduce

Steps to reproduce the behavior:

  1. Create the following package.json file:
{
  "name": "mjml-browser-juice-preserve-tags-issue",
  "scripts": {
    "start": "http-server"
  },
  "dependencies": {
    "http-server": "^14.1.1",
    "mjml-browser": "^4.13.0"
  }
}
  1. Create the following index.html file in the same directory:
<html>
  <body>
    <script src="/node_modules/mjml-browser/lib/index.js"></script>
    <script>
      console.log(
        mjml(
          `
<mjml>
  <mj-head>
    <mj-style inline="inline">.example { color: red }</mj-style>
  </mj-head>
  <mj-body>
    <mj-raw>
      <div style="background-color: {% example_color %}" class="example">Example</div>
    </mj-raw>
  </mj-body>
</mjml>`,
          { juicePreserveTags: { EXAMPLE: { start: "{%", end: "%}" } } }
        ).html
      );
    </script>
  </body>
</html>
  1. Run npm install
  2. Run npm start
  3. Open your browser to http://localhost:8080/
  4. Open the developer console
  5. See the following error in the developer console:
Uncaught TypeError: Cannot set properties of undefined (setting 'EXAMPLE')

The expected behavior is that the MJML is rendered to HTML with the following body:

  <body style="word-spacing:normal;">
      <div style>
        <div style="color: red; background-color: {% example_color %};" class="example">Example</div>
      </div>
  </body>

Thanks for considering my PR!

@robin-ray robin-ray force-pushed the mjml-browser-juice branch from b7c9be8 to 846d482 Compare March 20, 2023 15:36
@robin-ray
Copy link
Contributor Author

@iRyusa I updated the yarn.lock to point to the registry at https://registry.yarnpkg.com

@iRyusa
Copy link
Member

iRyusa commented Mar 20, 2023

🙌 Thanks !

@iRyusa iRyusa merged commit a56ad67 into mjmlio:master Apr 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@iRyusa iRyusa iRyusa approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

TypeError with inline styles and juicePreserveTags in mjml-browser
2 participants
@robin-ray @iRyusa