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.

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

[v4] Strange compilation error with SVG #2723

Closed
2 of 7 tasks
exside opened this issue Jun 27, 2019 · 3 comments
Closed
2 of 7 tasks

[v4] Strange compilation error with SVG #2723

exside opened this issue Jun 27, 2019 · 3 comments
Assignees

Comments

@exside
Copy link

exside commented Jun 27, 2019

Help us to manage our issues by answering the following:

  1. Describe your issue:
    I'm running into this very strange issue when compiling inline templates, the error basically says:
Uncaught TypeError: Cannot read property 'isRaw' of undefined
    at Object.pushText (riot+compiler.js:5920)
    at Object.push (riot+compiler.js:5915)
    at flush (riot+compiler.js:5640)
    at pushTag (riot+compiler.js:5846)
    at parseTag (riot+compiler.js:5862)
    at tag (riot+compiler.js:5857)
    at eat (riot+compiler.js:5959)
    at walk (riot+compiler.js:5954)
    at walk (riot+compiler.js:5954)
    at walk (riot+compiler.js:5954)

I narrowed it down to an svg that contains two circles:

              <svg xmlns="http://www.w3.org/2000/svg" class="donut" viewbox="0 0 36 36" transform="rotate(-90 18 18)">
                <circle class="donut__background" stroke="#efefef" stroke-width="4" fill="none" cx="50%" cy="50%" r="15.91549431"></circle>
                <circle class="donut__fill" stroke="#00acc1" stroke-width="4" stroke-dasharray="50,100" fill="none" cx="50%" cy="50%" r="15.91549431" />
              </svg>

the "fun" thing is, the error disappears if I remove one of these circles contained within the SVG, most sandbox online code-playgrounds do not even show the error (like codesandbox), but jsbin does: http://live.datatables.net/xawotale/3/ (although not the one above I get in the browser).

I have no clue why this would happen and specifically with circles (tried with two svg text elements instead and there was no issue...)

  1. Can you reproduce the issue?
    http://live.datatables.net/xawotale/3/

  2. On which browser/OS does the issue appear?
    newest Chrome

  3. Which version of Riot does it affect?
    4.x.x

  4. How would you tag this issue?

  • Question
  • Bug
  • Discussion
  • Feature request
  • Tip
  • Enhancement
  • Performance
@GianlucaGuarini GianlucaGuarini self-assigned this Jun 28, 2019
GianlucaGuarini added a commit to riot/compiler that referenced this issue Jun 29, 2019
GianlucaGuarini added a commit to riot/parser that referenced this issue Jun 29, 2019
GianlucaGuarini added a commit to riot/parser that referenced this issue Jun 29, 2019
@GianlucaGuarini
Copy link
Member

This is definitely a parser bug, In Riot.js@4.3.0 I have mitigated the issue but I am not done yet here. The output markup is still wrong

@GianlucaGuarini
Copy link
Member

@exside The issue was fixed in Riot.js@4.3.1 the problem was your invalid svg markup. The <circle> tags are void tags but in the example they were used not as such (<circle></circle>). The new compiler version will recognize these user errors and correct them automatically.

@exside
Copy link
Author

exside commented Jul 2, 2019

@GianlucaGuarini awesome! Damn, didn't think of that! Thanks for the explanation and the fix!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants