Fable3 importDefault throws a TypeError

[halcwb]

Description

When importing a simple color constant, this seems to be resolved as a function. This relates to:

Shmew/Feliz.MaterialUI#59.

Repro code

The minimal code to reproduce this problem is:

open Feliz

open Fable.Core.JsInterop

type Color =
    abstract ``50``: string
    abstract ``100``: string
    abstract ``200``: string
    abstract ``300``: string
    abstract ``400``: string
    abstract ``500``: string
    abstract ``600``: string
    abstract ``700``: string
    abstract ``800``: string
    abstract ``900``: string
    abstract A100: string
    abstract A200: string
    abstract A400: string
    abstract A700: string


type Colors =

  static member inline red: Color = importDefault "@material-ui/core/colors/red"

// A simple React component

[<ReactComponent>]
let Counter() =
//    Browser.Dom.console.log("red", Colors.red.``50``)
    let (count, setCount) = React.useState(0)
    Html.div [
        prop.style [ style.padding 10; style.color Colors.red.``50`` ]
        prop.children [
            Html.h1 count
            Html.button [
                prop.text "Increment"
                prop.onClick (fun _ -> setCount(count + 1))
            ]
        ]
    ]

I added the material ui colors interop in the Safe.React from Ajaj.

Expected and actual results

With the fable 2 compiler the above code runs, and the counter turns red.

The compiled js looks like

export function Counter() {
    const patternInput = useFeliz_React__React_useState_Static_1505(0);
    const setCount = patternInput[1];
    const count = patternInput[0] | 0;
    return createElement("div", {
        style: {
            padding: 10,
            color: red(),  //note: this should be just 'red?'
        },
        children: reactApi.Children.toArray([createElement("h1", {
            children: [count],
        }), createElement("button", {
            children: "Increment",
            onClick: (_arg1) => {
                setCount(count + 1);
            },
        })]),
    });
}

The resulting error is:

TypeError
_material_ui_core_colors_red__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function

Related information

Fable: F# to JS compiler 3.0.1

[Zaid-Ajaj]

Can you try

type Colors =
  static member inline red: string = import "red" "@material-ui/core/colors"

or

type Colors =
  static member inline red = importMember<string> "@material-ui/core/colors"

One of those should work I think

[halcwb]

@Zaid-Ajaj Sorry, was in the process of correctly writing this down. The material ui color looks like:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var red = {
  50: '#ffebee',
  100: '#ffcdd2',
  200: '#ef9a9a',
  300: '#e57373',
  400: '#ef5350',
  500: '#f44336',
  600: '#e53935',
  700: '#d32f2f',
  800: '#c62828',
  900: '#b71c1c',
  A100: '#ff8a80',
  A200: '#ff5252',
  A400: '#ff1744',
  A700: '#d50000'
};
var _default = red;
exports.default = _default;

So, just a simple object. In Feliz.MatarialUI this is imported as a Color. See my updated code above.

[alfonsogarciacaro]

Thanks for the report @halcwb. Yes, this is indeed a problem with Fable 3. I will fix it 👍

[alfonsogarciacaro]

It should hopefully be fixed in Fable 3.0.5, could you please try (dotnet tool update fable)? The other issue was fixed directly in Feliz.MaterialUI so you will likely have to update that dependency too.