BuilderIO / BuilderIO/mitosis

HTML Characters break prettier stage of Vue generation

Open
#59 1 comment 0 reactions 0 assignees View on GitHub
bug core vue
Dominant language
TypeScript
Stars
14.4k
Forks
671
PR merge metrics
No merged PRs in 30d

Description

Minimal reproducible example:
https://mitosis.builder.io/?outputTab=G4VwpkA%3D&code=JYWwDg9gTgLgBAbzgVwM4FMDKMCGN1wC%2BcAZlBCHAEQACAVqgB4C0ANsPgPQDG06VAbgBQQ9I0iw4AE3QkcyVvBLIAdtxjAIKuABV0qGAGEKkFehUwAFAEpEQuHF4qDcA3gIBeFBmzvLCQlsHOBEHKHQYZChtS3tghwAeKWAANwA%2BOPiHADIAYgBGAAZigFZM4ITOZPS462FCISA

```
Could not prettify
Object { string: "\n

\n ✕\n
\n\n\n \n\n\n\n\n export default {\n \n \n\n \n \n\n \n \n }\n" }
SyntaxError: Unexpected character "
" (3:12)
1 |
2 |

> 3 | ✕
| ^
4 |

5 |
6 |
kt https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:117490
ds https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:117602
e https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:117602
parse https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:117602
parse https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:100507
Xi https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:100507
Yi https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:100507
formatWithCursor https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:100507
Px https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:100507
format https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:100507
componentToVue https://jsx-lite.builder.io/static/js/main.836493ea.chunk.js:2856
updateOutput https://jsx-lite.builder.io/static/js/main.836493ea.chunk.js:6552
executeAction https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:57106
res https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:57090
Fiddle https://jsx-lite.builder.io/static/js/main.836493ea.chunk.js:6554
executeAction https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:57106
res https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:57090
reactionRunner https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58637
r https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58618
runReaction_ https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58303
runReactionsHelper https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58445
reactionScheduler https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58420
reactionScheduler https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58458
Wj https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266729
reactionScheduler https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58457
runReactions https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58426
schedule_ https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58282
reaction https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58641
useReaction https://jsx-lite.builder.io/static/js/main.836493ea.chunk.js:6449
fk https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266747
unstable_runWithPriority https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266819
gg https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266607
Oj https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266746
Lj https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266728
jg https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266608
unstable_runWithPriority https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266819
gg https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266607
jg https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266608
ig https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266607
Xj https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266729
tk https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266774
render https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266781
1876 https://jsx-lite.builder.io/static/js/main.836493ea.chunk.js:6562
c https://jsx-lite.builder.io/?outputTab=vue&code=import+{+useState+}+from+"%40jsx-lite%2Fcore"%3B export+default+function+TestComponent()+{ ++const+state+%3D+useState({})++++ ++return+( ++++++<div> ++++++++%26%2310005 ++++++<%2Fdiv> ++)%3B } :1
r https://jsx-lite.builder.io/?outputTab=vue&code=import+{+useState+}+from+"%40jsx-lite%2Fcore"%3B export+default+function+TestComponent()+{ ++const+state+%3D+useState({})++++ ++return+( ++++++<div> ++++++++%26%2310005 ++++++<%2Fdiv> ++)%3B } :1
t https://jsx-lite.builder.io/?outputTab=vue&code=import+{+useState+}+from+"%40jsx-lite%2Fcore"%3B export+default+function+TestComponent()+{ ++const+state+%3D+useState({})++++ ++return+( ++++++<div> ++++++++%26%2310005 ++++++<%2Fdiv> ++)%3B } :1
<anonymous> https://jsx-lite.builder.io/static/js/main.836493ea.chunk.js:1
```

Contributor guide

Open the contributing guide

Research direction

Reproduce the failure using the linked minimal example and inspect the Vue generation path where the prettier stage reports an unexpected character for the HTML entity. Trace the generated template and formatting step; done means the example generates valid, prettified Vue output without the reported syntax error.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
compilers
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.