integrate Fable.ReactGoogleMaps with Fable.Template.Elmish.React

[poborin]

Hi,

I'm new in web and Fable development. However, I'm a big fan of F#. So I decided to give it a try.

So far, I'm trying just to display google maps. I have started with https://github.com/elmish/templates. As I was able to run the build a minimal project from https://github.com/elmish/templates Then I followed instructions from https://github.com/fable-compiler/fable-react/tree/master/src/Fable.ReactGoogleMaps, but I couldn't make it work.

As soon as I added @babel/plugin-proposal-class-properties to my webpack, I've got the following issue when I build an app:

Executing task: dotnet fable yarn-run start <

Fable (1.3.3) daemon started on port 61225
CWD: /Users/PavelOborin/projects/fable_telemetry
yarn run start
yarn run v1.12.3
$ webpack-dev-server
internal/modules/cjs/loader.js:589
    throw err;
    ^

Error: Cannot find module 'babel-plugin-@babel/plugin-proposal-class-properties'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:587:15)
    at Function.resolve (internal/modules/cjs/helpers.js:32:19)
    at resolve (/Users/PavelOborin/projects/fable_telemetry/node_modules/fable-utils/index.js:13:24)
    at ar.map.item (/Users/PavelOborin/projects/fable_telemetry/node_modules/fable-utils/index.js:18:15)
    at Array.map (<anonymous>)
    at resolveArray (/Users/PavelOborin/projects/fable_telemetry/node_modules/fable-utils/index.js:16:19)
    at Object.exports.resolveBabelOptions (/Users/PavelOborin/projects/fable_telemetry/node_modules/fable-utils/index.js:25:27)
    at Object.<anonymous> (/Users/PavelOborin/projects/fable_telemetry/webpack.config.js:9:31)
    at Module._compile (internal/modules/cjs/loader.js:707:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Closing Fable daemon...
The terminal process terminated with exit code: 1

here is my webpack

var path = require("path");
var webpack = require("webpack");
var fableUtils = require("fable-utils");

function resolve(filePath) {
    return path.join(__dirname, filePath)
}

var babelOptions = fableUtils.resolveBabelOptions({
    presets: [["es2015", { "modules": false }]],
    plugins: [["transform-runtime", {
        "helpers": true,
        // We don't need the polyfills as we're already calling
        // cdn.polyfill.io/v2/polyfill.js in index.html
        "polyfill": false,
        "regenerator": false
    }],
    "@babel/plugin-proposal-class-properties"]
});

var isProduction = process.argv.indexOf("-p") >= 0;
console.log("Bundling for " + (isProduction ? "production" : "development") + "...");

module.exports = {
    devtool: isProduction ? undefined : "source-map",
    entry: resolve('./src/fable_telemetry.fsproj'),
    output: {
        filename: 'bundle.js',
        path: resolve('./public'),
    },
    resolve: {
        modules: [
            "node_modules", resolve("./node_modules/")
        ]
    },
    devServer: {
        contentBase: resolve('./public'),
        port: 8080,
        hot: true,
        inline: true
    },
    module: {
        rules: [
            {
                test: /\.fs(x|proj)?$/,
                use: {
                    loader: "fable-loader",
                    options: {
                        babel: babelOptions,
                        define: isProduction ? [] : ["DEBUG"]
                    }
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: babelOptions
                },
            },
            {
                test: /\.sass$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    },
    plugins: isProduction ? [] : [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()
    ]
};

[MangelMaxime]

Hello did you install @babel/plugin-proposal-class-properties nom packages ?

Also the Elmish templates are a bit old and still use Fable 1 and babel 6.x

I think you should use Fulma-minimal. You can easily remove Fulma from the project.

[poborin]

all right, let me try Fulma.

[poborin]

Thank @MangelMaxime, that works