[BUG] typescript-defined prop with string literal union type gets mistranslated in proptypes.js

[bernardelli]

Context

I am developing a custom components library using dash 3.4.0.

This library uses typescript to define component properties. One of those properties is defined as a literal union:

example_literal_prop: "this" | "that" | "another option"

This gets translated nicely into the python component:

[...]
example_literal_prop: typing.Optional[Literal["this", "that", "another option"]] = None,
[...]

But, in prototypes.js, it gets wrapped around simple quotes:

{
[...]
 example_literal_prop:pt.oneOf(["'this'", "'that'", "'another option'"]),
[...]
}

Bug description

When running a dash app that uses my component with the prop example_literal_prop="this" in debug mode, I get the following error:

Invalid argument `example_literal_prop` passed into Component with ID "example".
Expected one of ["'this'","'that'","'another option'"].
Value provided: "this"

If I use example_literal_prop="'this'", the error goes away, but that's not the value I want the prop to have.

Expected behavior

It's expected that "this" should be a valid value for example_literal_prop.

[AnnMarieW]

Hi @bernardelli

Lots of typescript errors were fixed in dash 4. Try building your custom components with the latest dash version. It will work even if you use the components in an app that uses a different version of dash.

[bernardelli]

@AnnMarieW Works alright with dash 4.0.0. Thanks.