Fable3 importDefault throws a TypeError
Closed this issue · 4 comments
Description
When importing a simple color constant, this seems to be resolved as a function. This relates to:
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
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
@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.
Thanks for the report @halcwb. Yes, this is indeed a problem with Fable 3. I will fix it 👍
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.