Curly bracket problem in string interpolation of JSX fragments with F# 8.0 or vite?

[halcwb]

Description

Upgrading existing code from F# 6 to 8 causes a problem with string interpolation when using this in JSX fragments. I think it is related to a different way of string interpolation in F#8? But could also be related to another version of vite.

Repro code

This code worked with F# 6:

let checkBox () =
    JSX.jsx $"""
    import Checkbox from '@mui/material/Checkbox';

    <Checkbox
        checked={props.patient |> Option.map (fun p -> p.CVL) |> Option.defaultValue false}
        onChange={fun _ -> ToggleCVL |> dispatch} >
    </Checkbox>
    """

JSX.jsx
    $"""
import Checkbox from '@mui/material/Checkbox';

<FormControlLabel
    control={ checkBox () }
    label="CVL" />
"""

The code still works when this is run through the fable compiler in developer mode. But when trying to build a production version using vite build, you'll get an error: expected '{' but got '<'.

You can fix this by:

JSX.jsx
    $"""
import Checkbox from '@mui/material/Checkbox';

<FormControlLabel
    control={{{ checkBox () }}}
    label="CVL" />
"""

Then vite can build the generated jsx file, however, the file cannot be used in the development, because that causes a problem with the triple curly brackets.

Expected and actual results

A workaround is to make the checkBox ()' just a value checkBoxand use that likecontrol={checkBox}`.

Related information

• Fable version: 4.6.0
• Operating system MacOs