Problems with inline functions in Fable.Helpers.React

[ghost]

Description

When trying to follow the examples the inline functions named 'fn', 'com', 'from', 'domEl' and 'svgEl' used on 'render' throw errors.

error FABLE: Fable.Helpers.React.from is inlined but is not reachable. If it belongs to an external project try removing inline modifier.

There is also a minor problem with the webpack.config.js file:

The provided value is not an absolute path!

To solve this problem, I must to change this:

output: {
    filename: "[name].js",
    path: "./app/js",
    libraryTarget: "commonjs2"
},

...into this:

output: {
    filename: "./app/js/[name].js"
    libraryTarget: "commonjs2"
},

As dependencies are outdated these are my reproduction steps:

Steps to reproduce

1. Create a new solution and install dependencies:

mkdir testing-material-ui
cd testing-material-ui
npm init -y
npm install --save fable-core 
npm install --save-dev electron webpack source-map-loader fable-import-electron 
npm install --save react react-dom react-tap-event-plugin material-ui 
npm install --save-dev fable-react fable-import-react

2. Copy-paste all the content of material-ui to our new solution with the exception of package.json and node_modules and create a temp folder.

3. Remember to add the following line to package.json inside of "scripts":

"start": "electron app/js/main.js"

4. Remember to change the content of webpack.config.js as previously said:

output: {
    filename: "./app/js/[name].js"
    libraryTarget: "commonjs2"
},

5. Try to compile:

fable

Expected behaviour

Fable should compile successfully.

Actual behaviour

You will get a couple of warnings for Fable.Helpers.React.fs

This construct is deprecated.

...related to the inline functions 'fn', 'com', 'from', 'domEl' and 'svgEl' used along with 'render.

And the compilation will fail with the following error

/home/ferbraz/Projects/tmaterialui/src/renderer.fsx(50, 12) : error FABLE: Fable.Helpers.React.from is inlined but is not reachable. If it belongs to an external project try removing inline modifier.

Related information

• Fable v0.7.50
• Node 6.10.2
• NPM v4.5.0
• Ubuntu 16.04

[alfonsogarciacaro]

Thanks for the report, I need to update the Electron samples to Fable 1.0 beta which allows you to use inline functions across projects. Have you tried it? Maybe it can fix the problem. Please note the workflow has changed a bit (it's explained in the blog post) and that you should use fable-react@next prerelease.

[aolney]

I took a look at updating the samples to 0.7 in January but ran into many issues. Most of the samples need a more direct/less abstracted usage of the React libraries than the current Elmish idiom. I may be wrong but seem to recall code like this breaking:

    let safeState state =
        match unbox this.props with 
        | false -> this.state <- state
        | _ -> this.setState state

I'm currently working on a 1.0 project with Express, which hopefully will help me learn enough of 1.0 to update the Electron samples (perhaps in May).

@ferbraz89 would it help if I made a quickstart for Fable/Electron along the lines of https://github.com/fable-compiler/fable-getting-started ?

[alfonsogarciacaro]

@aolney That'd be really helpful! We can also create a template for Fable Electron projects. I'll try to updates some of the samples so you can use them as a guide :+1:

[ghost]

@alfonsogarciacaro Oh, ok. I was reading your book "Mastering F#", published by Packt... I don't know why I wasn't aware of the prerelease.

@aolney Yes, please. I don't know where to start now...

[alfonsogarciacaro]

@ferbraz89 Yeah, sorry. Some things changed after the book was published and I cannot change it anymore 😅. Thanks a lot for buying the book, btw!

[alfonsogarciacaro]

@ferbraz89 @aolney I've upgraded the material-ui sample to Fable 1.0: https://github.com/fable-compiler/fable-electron/commit/fbe8fd7656e8302c2341d4965e40154231d876cc

There may still be some adjustments to be made but the sample is working so it can be used as a reference to create a fable-electron getting started project or template. I added instructions in a README in the folder, please ask me if you have any question.

[aolney]

:+1:

[ghost]

Sorry for the late response but I get this error now:

ERROR in Entry module not found: Error: Can't resolve '/home/ferbraz/Downloads/fable-electron-master/samples/material-ui/src/Renderer/renderer.fsproj' in '/home/ferbraz/Downloads/fable-electron-master/samples/material-ui'

after running dotnet fable npm-run watch.

[aolney]

It's a naming issue - should be Renderer.fsproj. I'm submitting a PR now that fixes this an adds a getting started.