template literals
See original GitHub issueMDX appears to be trying to parse template literals into MDX Tags, rather than pass the value through.
# Testing template literals
<TemplateLiteralTest
test={`
thing1 {
background: blue;
}
thing2 {
background: blue;
}
`}
/>
MDX is transforming that into this:
<TemplateLiteralTest
test={`
thing1 {
background: blue;
}
<MDXTag name="pre" components={components}><MDXTag name="code" components={components} parentName="pre">{`thing2 {
background: blue;
}
`}</MDXTag></MDXTag>
<MDXTag name="p" components={components}>{` \`}
/>`}</MDXTag></MDXTag>
which leads to this error:
SyntaxError: unknown: Unexpected token, expected "}" (23:106)
21 | background: blue;
22 | }
> 23 | <MDXTag name="pre" components={components}><MDXTag name="code" components={components} parentName="pre">{`thing2 {
| ^
24 | background: blue;
25 | }
26 | `}</MDXTag></MDXTag>
I’d expect MDX to interpolate and pass the template literal value through to the component.
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Template literals (Template strings) - JavaScript | MDN
Template literals are enclosed by backtick ( ` ) characters instead of double or single quotes. Along with having normal strings, template ...
Read more >JavaScript Template Literals - W3Schools
Template literals provide an easy way to interpolate variables and expressions into strings. The method is called string interpolation. The syntax is:.
Read more >8. Template literals - Exploring JS
A template literal is a new kind of string literal that can span multiple lines and interpolate expressions (include their results). For example:...
Read more >ES6 Template Literals (Template Strings) - CanIUse
Template literals are string literals allowing embedded expressions using backtick characters (`). You can use multi-line strings and string interpolation ...
Read more >JavaScript Template Literals (Template Strings) - Programiz
Template literals (template strings) allow you to use strings or embedded expressions in the form of a string. They are enclosed in backticks...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks for filing an issue!
This is a known bug with empty lines within JSX blocks (a problem with the remark parser). We’re currently working on implementing a new custom parser to better handle JSX parsing.
Going to close this since we can track progress in #195. Thanks for opening up the issue!