Fable not attempting to compile all source files?

[JesseALancaster]

Description

I have a short project file with less than 20 source files (pasted below). When I call webpack (npx webpack) it only compiles 3 of these files.

My intent is to provide a shared library of business logic and types between my back end code and my front end code. I'm not ready to go all in on rebuilding the front end in Fable, so I thought this would be an excellent timesaving proof of concept for code sharing.

As a note about the item references; I have been careful to keep this to types and purely logical functions (for example the references to the google API are for signatures of functions, but no calls to the API are made in this code). I don't know if this is going to cause me problems later on or not.

Repro code

Project file:

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <GenerateDocumentationFile>true</GenerateDocumentationFile>
  </PropertyGroup>

  <ItemGroup>
    <Compile Include="FSharpUtils.fs" />
    <Compile Include="CertificateCache.fs" />
    <Compile Include="Integrations\IntegrationTypes.fs" />
    <Compile Include="Integrations\CollectionTasks.fs" />
    <Compile Include="Integrations\AzureB2C.fs" />
    <Compile Include="Integrations\Google.fs" />
    <Compile Include="Integrations\OfficeGraph.fs" />
    <Compile Include="Integrations\Salesforce.fs" />
    <Compile Include="Integrations\SalesforceTypeProviders.fs" />
    <Compile Include="API\APITypes.fs" />
    <Compile Include="CRM\CRMTypes.fs" />
    <Compile Include="Process\CommonTypes.fs" />
    <Compile Include="Process\RuleTypes.fs" />
    <Compile Include="Process\FieldTypes.fs" />
    <Compile Include="Process\FormTypes.fs" />
    <Compile Include="Process\ProcessTypes.fs" />
    <Compile Include="Organizations\OrganizationTypes.fs" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Azure.Identity" Version="1.6.0-beta.1" />
    <PackageReference Include="Azure.Security.KeyVault.Secrets" Version="4.3.0-beta.4" />
    <PackageReference Include="FSharp.Data" Version="4.2.8" />
    <PackageReference Include="FSharp.Json" Version="0.4.1" />
    <PackageReference Include="Google.Apis" Version="1.56.0" />
    <PackageReference Include="Google.Apis.Auth" Version="1.56.0" />
    <PackageReference Include="Google.Apis.Calendar.v3" Version="1.56.0.2590" />
    <PackageReference Include="Google.Apis.Core" Version="1.56.0" />
    <PackageReference Include="Google.Apis.Gmail.v1" Version="1.56.0.2510" />
    <PackageReference Include="Microsoft.Graph" Version="4.19.0" />
    <PackageReference Include="Trivial.Json" Version="3.9.0" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Update="FSharp.Core" Version="6.0.3" />
  </ItemGroup>

</Project>

Webpack config

var path = require("path");
 
module.exports = {
    mode: "production",
    entry: "./Domain.fsproj",
    output: {
        path: path.join(__dirname, "./fable-test"),
        filename: "bundle.js",
    },
    devServer: {
        contentBase: "./fable-test",
        port: 8080,
    },
    module: {
        rules: [{
            test: /\.fs(x|proj)?$/,
            use: "fable-loader"
        }]
    }
}

Expected and actual results

I would expect that all files listed in the project file would be compiled, instead only 3 are.

I know I'm probably doing something unexpected here, but I didn't know where else to get help, and most of the examples I am able to find are assuming you are building a full site in Fable, not just using the compiler to produce a JS library from F# so comparing setups is pretty hard for a beginner to Fable.

Related information

• Fable version: 2.13.0
• Operating system Windows 10

[MangelMaxime]

Hello @JesseALancaster ,

you are using Fable 2 which is an old version of Fable.

You should try to use Fable 3, which comes as dotnet tool and write JS files directly on the disk.

Using Fable 3, would looks like that:

1. Install Fable: dotnet tool install fable
2. Run fable against your project: dotnet fable myProject.fsproj

This should compile all the F# files from your fsproj as File.fs.js, if you prefer to not have the JS files near the F# file you can use --outDir build to specify an output dir.

Edit:

Also, when using Fable 3, you don't need fable-loader anymore. You can just consome the generated file as if they were standard JavaScript file.

[JesseALancaster]

Ah thank you, I didn't realize the Webpack version was all the old stuff. Thank you

[alfonsogarciacaro]

Thanks for checking @MangelMaxime and sorry for the late reply. There's also a sample PR here of upgrading a Fable 2 project in case it helps: MangelMaxime/fulma-demo#43