GJS/GTS components break when rendering an <svg> that contains <linearGradient>

[achambers]

👋 Hi.

I think I've raised this in the correct repo. If not, let me know where is the appropriate place and I'll raise it there.

It seems that when I try and render an inline svg that includes a <linearGradient>, the app blows up with:

Uncaught ReferenceError: linearGradient is not defined
    at Object.scope (my-app.js:67:21)
    at meta (vendor.js:30351:34)
    at compilable (vendor.js:31418:51)
    at TemplateImpl.asLayout (vendor.js:31641:28)
    at ConstantsImpl.resolvedComponent (vendor.js:31853:165)
    at resolveComponent (vendor.js:29533:22)
    at encodeOp (vendor.js:29856:18)
    at pushOp (vendor.js:31448:7)
    at vendor.js:31180:7
    at Compilers.compile (vendor.js:30153:7)

I have made a minimal reproduction here: https://stackblitz.com/edit/ember-cli-editor-output-rvl1ph?file=app%2Ftemplates%2Fapplication.hbs

There are two components rendering svgs. One that works and one that does not.

This is the simple working svg that does not include a gradient

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#2ecc71" />
</svg>

This is the same circle with a gradient.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color: #3498db" />
      <stop offset="100%" style="stop-color: #2ecc71" />
    </linearGradient>
  </defs>
  <circle cx="50" cy="50" r="40" fill="url(#gradient)" />
</svg>

The latter svg breaks with he error above.

I am using:

• "ember-template-imports": "^4.0.0",
• "ember-source": "~5.6.0",

[johanrd]

Hi. For reference, here is the same issue in the glimmer-vm repo: glimmerjs/glimmer-vm#1550.

I was not sure where to post it, either:)

[NullVoxPopuli]

Repro:

https://limber.glimdown.com/edit?c=MQAgygag4gUDCSBnRBXApogXDAtCAxgIYB2A5AC4gqJoED2xAbmseQJYMh0BmIABgBs2xNIQBOUMYQAmbFuT5w%2BygOYArRCCHMYAHnJoAtgAcBhAwD4YIELsSMV1myEZyA7gCE6ADwC8AIgAGEGCARjDA-ycbb0MBYkQAgAtycmNMAHoMtxyAOjcAZly6MRUMgCZAqoz7FSjnEFj4rG8hYgBrZNT0rJy3fKKSstCATjGM1uF2-ysG3Wk0bkRZhts20VKpWXkQNmkAwwBPSRk5VnL-EBUts-IAFSkE7hLDALE6cnM0AAoRwIBKGbRVZ2ch0YxcbhLNDkAIAVgApJdEGDjDh8HQBCUAipMdJLhkVqtbCjwZDobD-CNEcjUejMdj-GI0PiQITgTZdBl1uJrqd5ETbBkFksVsDdPg2GJ8AJaPg-P44Zd8Id4ZcxAEACyXbhsAQCAIoMQCb6kYBHE7bc6kQFslZc2pWJygw6ywW1AA0IAAVBZMElCIhvrV-iAAN4ckBJNBsFQpTAgcKBBEAbmBAF9nTVyK60FYuQYTGZLDBlIo9EkxE6y%2BpNNo0DAMQlKDyxCBfCBpHR8ChDPJcvhmV8AKKyvusU2ty23G1ppsoqOEfDtdv8PRTm47PYHY6b1iXPlW%2B6PRDPMSvJkfL6-AFAzmkiE8CnwpEgB-0rEa-y4gSs9n31FyRoSlqVfd8MU-N4WQJfNuWEDZpwFPg0z0QtTC%2Be1amBVw0E8HwAmCCJE0iYEmgSLo0kybI8kKYpSgqKpAhqBx6mcMiWjaTp-BSSjehowZ6NGcZJg6O9nHmRZlkjMMZIDZd0wU8VhUksU5klaVZQIBUlQIVVFXVLUdT1A1-CNE0zQtPdyBtGCs0dOAANzd0HC9X1-UDYMHFDCNiWjWN42I5M0waTNOWzJy9AyNDizzUtlBgIA&format=glimdown

[simonihmig]

I think this can be closed, as emberjs/babel-plugin-ember-template-compilation#33 fixes this issue. Make sure to update your lockfile to have babel-plugin-ember-template-compilation@2.2.2!

I did however see some other regressions with that version, will report over there. Just mentioning, as this might block upgrading for now...