fable-loader

library2.1.9jsnpmunverified

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.

devops

npm install fable-loader

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · FABLE-LOADER

fable-loader

devopsjavascriptv2.1.9

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

module.exports.rules

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

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

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

require('fable-loader')

✓ // No need to require, just reference in webpack config

✗ import fableLoader from 'fable-loader'

fable-loader is a loader, not a package to import; it is referenced by name in the Webpack config.

options

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

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

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

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' }] } };

Debug

Known issues

breakingFable 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'.

affects: <2.1.0

breakingPeer 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.

affects: >=2.0.0

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

fix

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

affects: >=4.0.0

gotchaOptions 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.

affects: >=2.0.0

Errors

Common errors & fixes

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

fable-loader not installed as a devDependency.

fix

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

Error: Cannot find module '@babel/core'

@babel/core is a peer dependency not installed.

fix

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

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

Incompatible webpack version (webpack 3 or earlier).

fix

Ensure webpack >=4.23.0 is installed.

Upgrade

Version history

2.1.9latest on npm

Audit

Dependencies

@babel/corerequiredRequired for Babel transformation of compiled JavaScript output; peer dependency since v2.1.0.

fable-compilerrequiredCore F# to JavaScript compiler; peer dependency, version ^2.1.0.

webpackrequiredWebpack is the bundler; peer dependency, version >=4.23.0.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/fable-compiler/Fable ↗

packagehttps://www.npmjs.com/package/fable-loader ↗

homepagehttps://fable.io ↗