fable-loader

2.1.9 verified Fri May 01 auth: no javascript

Webpack loader for the Fable compiler, enabling F# to JavaScript compilation within a Webpack build pipeline. Current stable version is 2.1.9 (Fable 2.x). The loader is maintained by the Fable team and works with fable-compiler 2.x, @babel/core 7.x, and Webpack 4+. Unlike direct CLI usage, this loader integrates F# compilation into Webpack's module resolution and asset pipeline, allowing hot module replacement and bundling alongside other JS/TS assets. Key differentiator: seamless integration with Webpack ecosystem for F# developers.

Common errors

error Module not found: Error: Can't resolve 'fable-loader' ↓

cause fable-loader not installed as a devDependency.

fix

Run 'npm install --save-dev fable-loader'.

error Error: Cannot find module '@babel/core' ↓

cause @babel/core is a peer dependency not installed.

fix

Run 'npm install --save-dev @babel/core'.

error TypeError: Cannot read property 'hooks' of undefined (webpack) ↓

cause Incompatible webpack version (webpack 3 or earlier).

fix

Ensure webpack >=4.23.0 is installed.

Warnings

breaking Fable 2.0 required calling Webpack via dotnet-fable CLI; Fable 2.1+ calls Webpack directly. ↓

fix Replace 'dotnet fable webpack -- --config webpack.config.js' with 'npx webpack --config webpack.config.js'.

breaking Peer dependencies: @babel/core ^7.1.6, fable-compiler ^2.1.0, webpack >=4.23.0. ↓

fix Ensure all peer dependencies are installed at compatible versions.

deprecated Using 'loader' property in Webpack rule is deprecated in favor of 'use'. ↓

fix Change 'loader: "fable-loader"' to 'use: "fable-loader"' in webpack config.

gotcha Options passed to the loader must be under allowed keys: babel, define, typedArrays, clampByteArrays, silent. ↓

fix Check options object passed to fable-loader; unknown keys may be silently ignored.

Install

npm install fable-loader

yarn add fable-loader

pnpm add fable-loader

Imports

module.exports.rules

wrong

module.exports = { module: { rules: [{ test: /\.fs(x|proj)?$/, loader: 'fable-loader' }] } }

correct

module.exports = { module: { rules: [{ test: /\.fs(x|proj)?$/, use: 'fable-loader' }] } }

Use 'use' instead of 'loader' for consistency with Webpack 4+ rules.

require('fable-loader')
wrong
```
import fableLoader from 'fable-loader'
```
correct
```
// No need to require, just reference in webpack config
```
fable-loader is a loader, not a package to import; it is referenced by name in the Webpack config.

options

wrong

options: { babel: '@babel/preset-env' }

correct

{ test: /\.fs(x|proj)?$/, use: { loader: 'fable-loader', options: { babel: { presets: ['@babel/preset-env'] } } } }

Options must be nested under 'babel' key; direct string shorthand is invalid.

Quickstart

Basic Webpack configuration using fable-loader to compile F# project entry into a single bundle.

const path = require('path');
module.exports = {
  mode: 'production',
  entry: './src/App.fsproj',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.fs(x|proj)?$/,
      use: 'fable-loader'
    }]
  }
};