{"id":25566,"library":"fable-loader","title":"fable-loader","description":"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.","status":"active","version":"2.1.9","language":"javascript","source_language":"en","source_url":"https://github.com/fable-compiler/Fable","tags":["javascript","fable","fsharp","F#","webpack"],"install":[{"cmd":"npm install fable-loader","lang":"bash","label":"npm"},{"cmd":"yarn add fable-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add fable-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Babel transformation of compiled JavaScript output; peer dependency since v2.1.0.","package":"@babel/core","optional":false},{"reason":"Core F# to JavaScript compiler; peer dependency, version ^2.1.0.","package":"fable-compiler","optional":false},{"reason":"Webpack is the bundler; peer dependency, version >=4.23.0.","package":"webpack","optional":false}],"imports":[{"note":"Use 'use' instead of 'loader' for consistency with Webpack 4+ rules.","wrong":"module.exports = { module: { rules: [{ test: /\\.fs(x|proj)?$/, loader: 'fable-loader' }] } }","symbol":"module.exports.rules","correct":"module.exports = { module: { rules: [{ test: /\\.fs(x|proj)?$/, use: 'fable-loader' }] } }"},{"note":"fable-loader is a loader, not a package to import; it is referenced by name in the Webpack config.","wrong":"import fableLoader from 'fable-loader'","symbol":"require('fable-loader')","correct":"// No need to require, just reference in webpack config"},{"note":"Options must be nested under 'babel' key; direct string shorthand is invalid.","wrong":"options: { babel: '@babel/preset-env' }","symbol":"options","correct":"{ test: /\\.fs(x|proj)?$/, use: { loader: 'fable-loader', options: { babel: { presets: ['@babel/preset-env'] } } } }"}],"quickstart":{"code":"const path = require('path');\nmodule.exports = {\n  mode: 'production',\n  entry: './src/App.fsproj',\n  output: {\n    path: path.join(__dirname, 'public'),\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: [{\n      test: /\\.fs(x|proj)?$/,\n      use: 'fable-loader'\n    }]\n  }\n};","lang":"javascript","description":"Basic Webpack configuration using fable-loader to compile F# project entry into a single bundle."},"warnings":[{"fix":"Replace 'dotnet fable webpack -- --config webpack.config.js' with 'npx webpack --config webpack.config.js'.","message":"Fable 2.0 required calling Webpack via dotnet-fable CLI; Fable 2.1+ calls Webpack directly.","severity":"breaking","affected_versions":"<2.1.0"},{"fix":"Ensure all peer dependencies are installed at compatible versions.","message":"Peer dependencies: @babel/core ^7.1.6, fable-compiler ^2.1.0, webpack >=4.23.0.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Change 'loader: \"fable-loader\"' to 'use: \"fable-loader\"' in webpack config.","message":"Using 'loader' property in Webpack rule is deprecated in favor of 'use'.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Check options object passed to fable-loader; unknown keys may be silently ignored.","message":"Options passed to the loader must be under allowed keys: babel, define, typedArrays, clampByteArrays, silent.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run 'npm install --save-dev fable-loader'.","cause":"fable-loader not installed as a devDependency.","error":"Module not found: Error: Can't resolve 'fable-loader'"},{"fix":"Run 'npm install --save-dev @babel/core'.","cause":"@babel/core is a peer dependency not installed.","error":"Error: Cannot find module '@babel/core'"},{"fix":"Ensure webpack >=4.23.0 is installed.","cause":"Incompatible webpack version (webpack 3 or earlier).","error":"TypeError: Cannot read property 'hooks' of undefined (webpack)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}