Flow Status Webpack Plugin

0.1.8 · abandoned · verified Sun Apr 19

This webpack plugin integrates Flow type checking directly into the Webpack build process. On webpack startup, it automatically starts or restarts a Flow server, and subsequently runs `flow status` after each build. The package is currently at version 0.1.8 and was last published over a year ago, indicating it is no longer actively maintained. It was explicitly marked as "experimental" in its documentation. Key differentiators include its ability to pass custom Flow arguments, control Flow server restarts, specify a custom Flow binary path, and optionally fail the webpack build if Flow type checks produce errors. Given its age and the low version number, it is primarily compatible with older Webpack and Node.js environments and does not follow modern module conventions (e.g., ESM). Developers should be aware of its unmaintained status and consider alternatives for current projects.

Common errors

```
Error: Can't resolve 'flow-status-webpack-plugin'
```
cause The package `flow-status-webpack-plugin` is not installed or incorrectly referenced in `webpack.config.js`.

fix Run `npm install --save-dev flow-status-webpack-plugin` or `yarn add --dev flow-status-webpack-plugin`.
```
ReferenceError: webpack is not defined
```
cause The `webpack` module was not imported when `new webpack.NoErrorsPlugin()` (or similar `webpack` utility) was used in `webpack.config.js`.

fix Add `const webpack = require('webpack');` at the top of your `webpack.config.js` if you are using Webpack utility plugins.
```
Flow server is not running.
```
cause The Flow type checker has not been initialized or the Flow server failed to start, preventing the plugin from checking types.

fix Ensure `flow-bin` is installed (`npm install --save-dev flow-bin`) and run `npx flow init` in your project root to initialize Flow. Check Flow's own logs for startup errors if the issue persists.
```
webpack build succeeds despite Flow errors when `failOnError: true` is set.
```
cause The `failOnError` option in `FlowStatusWebpackPlugin` only makes the *plugin* emit an error. If not combined with an appropriate Webpack error handling mechanism (like `webpack.NoErrorsPlugin` in older Webpack, or a custom build failure check), Webpack might still emit bundles.

fix In older Webpack (v1), combine `failOnError: true` with `new webpack.NoErrorsPlugin()`. In newer Webpack versions where `NoErrorsPlugin` is removed, you may need a custom build hook or a different plugin (e.g., `webpack-fail-plugin`) to truly halt the build process based on Flow errors.

Warnings

breaking The `webpack.NoErrorsPlugin` used in the documentation's `failOnError` example is deprecated since Webpack 2 and removed in Webpack 4 and later. Using it in newer Webpack versions will cause configuration errors.
Fix: Remove `new webpack.NoErrorsPlugin()`. For Webpack 2/3, use `new webpack.NoEmitOnErrorsPlugin()`. For Webpack 4+, `NoEmitOnErrorsPlugin` is often enabled by default in production mode, and handling build failures might require custom logic or relying on the plugin's own `failOnError` option in conjunction with Webpack's error handling.
gotcha The plugin is marked as 'Still experimental' in its own README and has not been updated in over a year. This indicates a lack of ongoing maintenance and potential compatibility issues with newer versions of Node.js, Webpack, or Flow itself.
Fix: Thoroughly test compatibility with your specific environment. Consider alternative, more actively maintained Flow-Webpack integration solutions (e.g., `flow-babel-webpack-plugin`, `flowtype-webpack-plugin`, or `flow-webpack-next-plugin`) or migrating to TypeScript if long-term stability and support are critical.
gotcha This plugin requires Flow (specifically the `flow-bin` package and a `.flowconfig` file) to be installed and initialized separately in your project. It does not manage the Flow toolchain itself.
Fix: Ensure `flow-bin` is installed (`npm install --save-dev flow-bin`) and run `npx flow init` in your project root to create a `.flowconfig` file before using the plugin.

Install

npm install flow-status-webpack-plugin npm
yarn add flow-status-webpack-plugin yarn
pnpm add flow-status-webpack-plugin pnpm

Imports

FlowStatusWebpackPlugin
wrong:
```
import FlowStatusWebpackPlugin from 'flow-status-webpack-plugin';
```
correct:
```
const FlowStatusWebpackPlugin = require('flow-status-webpack-plugin');
```
The package is designed for CommonJS (require) imports, reflecting its older codebase. ESM imports are not supported.

Quickstart

This quickstart demonstrates basic integration of the FlowStatusWebpackPlugin into a webpack configuration. It includes babel for Flow syntax stripping, configures the plugin to fail on Flow errors, and provides success/error callbacks. It highlights the use of `failOnError`, `restartFlow`, and `binaryPath` options.

const path = require('path');
const webpack = require('webpack');
const FlowStatusWebpackPlugin = require('flow-status-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-flow']
          }
        }
      }
    ]
  },
  plugins: [
    // In modern webpack, new webpack.NoErrorsPlugin() is deprecated/removed.
    // If using an older webpack, uncomment this line:
    // new webpack.NoErrorsPlugin(),
    new FlowStatusWebpackPlugin({
      failOnError: true, // Fail the webpack build if Flow reports errors
      restartFlow: true, // Always restart the Flow server with each build
      binaryPath: path.resolve(__dirname, 'node_modules/.bin/flow'), // Specify local Flow binary
      onSuccess: function(stdout) { console.log('Flow is happy!\n', stdout); },
      onError: function(stdout) { console.error('Flow found errors!\n', stdout); }
    })
  ]
};

// To run:
// 1. Create src/index.js with some Flow code, e.g.:
//    // @flow
//    function add(a: number, b: number): number {
//      return a + b;
//    }
//    const result: string = add(1, 2); // This will cause a Flow error (number assigned to string)
//    console.log(result);
// 2. npm install --save-dev webpack webpack-cli flow-status-webpack-plugin @babel/core babel-loader @babel/preset-env @babel/preset-flow flow-bin
// 3. Initialize Flow: npx flow init
// 4. Run webpack: npx webpack

view raw JSON →