Compile fable generated code with webpack

Question

My test.fsx looks like:

module Test
#r "./node_modules/fable-core/Fable.Core.dll"
open Fable.Core
open Fable.Import.Browser
type ItemCompletedData    = {itemsCompleted:int}
type AddData              = {text:string}
[<Pojo>]
type ActionData =
  | ItemCompleted of ItemCompletedData
  | Add of AddData
let test = (Add {text="hello world"})
console.log(test)

Compile it with:

node node_modules/fable-compiler/index.js --projFile test.fsx -o ./js/

webpack.config.js looks like:

var path = require("path");
module.exports = {
  entry: {
    main: ["./js/test.js"]
  },
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: ".",
    filename: "[name].js"
  }
  ,devServer: {
    contentBase: path.join(__dirname, "./"),
    compress: true,
    port: 9000
  }
};

Running webpack with the following command:

node node_modules/webpack/bin/webpack.js --devtool source-map

That will give warnigns:

WARNING in ./~/.0.7.26@fable-core/umd/Symbol.js 3:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./~/.0.7.26@fable-core/umd/Util.js 3:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

When opening an html file that uses main.js I get an error in the console:

Symbol.js:3 Uncaught Error: Cannot find module "."

The symbol.js comes from fable-core/umd/Symbol (in the fable generated script). When I change it manually to: fable-core/Symbol (for all fable-core dependencies) then I can webpack compile without warnings and do not get errors in the page.

How can I prevent this error without having to manually change the fable output?

HMR HMR · Accepted Answer · 2017-02-11T02:45:45

While writing this question I was going through the steps and tried adding -m es2015 to the fable compiler command.

That was the solution.

Now that fable code can load I only need to solve the problem that riot generated js code creates. I need to load the tags after setting riot.mixin so I load them in nested requiejs umd statements (maybe that causes an error).

require riot
  ... require tag1 tag2 ...

Compile fable generated code with webpack

1 Answers