Hooks

There are four hooks available to a plugin:

• overrideCracoConfig - customize the CRACO config object before it is processed by CRACO
• overrideWebpackConfig - customize the Webpack config after it is processed by CRACO
• overrideDevServerConfig - customize the DevServer config after it is processed by CRACO
• overrideJestConfig - customize the Jest config after it is processed by CRACO

important

Every function must return the updated configuration object.

overrideCracoConfig

overrideCracoConfig(data): CracoConfig

data is an object with the following structure:

Property	Description
cracoConfig	The config object read from the CRACO config provided by the consumer
pluginOptions	The plugin options provided by the consumer
context	A context object containing env and paths

This function must return a valid CRACO config.

Example

craco-log-plugin.js

module.exports = {
  overrideCracoConfig: ({
    cracoConfig,
    pluginOptions,
    context: { env, paths },
  }) => {
    if (pluginOptions.preText) {
      console.log(pluginOptions.preText);
    }

    console.log(JSON.stringify(cracoConfig, null, 4));

    return cracoConfig;
  },
};

craco.config.js

const logPlugin = require('./craco-log-plugin');

module.exports = {
  // ...
  plugins: [
    {
      plugin: logPlugin,
      options: { preText: 'CRACO CONFIG' },
    },
  ],
};

overrideWebpackConfig

overrideWebpackConfig(data): WebpackConfig

data is an object with the following structure:

Property	Description
webpackConfig	The Webpack config object already customized by CRACO
cracoConfig	The config object read from the CRACO config provided by the consumer
pluginOptions	The plugin options provided by the consumer
context	A context object containing env and paths

This function must return a valid Webpack config.

Example

craco-log-plugin.js

module.exports = {
  overrideWebpackConfig: ({
    webpackConfig,
    cracoConfig,
    pluginOptions,
    context: { env, paths },
  }) => {
    if (pluginOptions.preText) {
      console.log(pluginOptions.preText);
    }

    console.log(JSON.stringify(webpackConfig, null, 4));

    return webpackConfig;
  },
};

craco.config.js

const logPlugin = require('./craco-log-plugin');

module.exports = {
  // ...
  plugins: [
    {
      plugin: logPlugin,
      options: { preText: 'WEBPACK CONFIG' },
    },
  ],
};

overrideDevServerConfig

overrideDevServerConfig(data): DevServerConfig

data is an object with the following structure:

Property	Description
devServerConfig	The DevServer config object already customized by CRACO
cracoConfig	The config object read from the CRACO config provided by the consumer
pluginOptions	The plugin options provided by the consumer
context	A context object (DevServer-specific) containing env, paths, and allowedHost

This function must return a valid DevServer config.

Example

craco-log-plugin.js

module.exports = {
  overrideDevServerConfig: ({
    devServerConfig,
    cracoConfig,
    pluginOptions,
    context: { env, paths, allowedHost },
  }) => {
    if (pluginOptions.preText) {
      console.log(pluginOptions.preText);
    }

    console.log(JSON.stringify(devServerConfig, null, 4));

    return devServerConfig;
  },
};

craco.config.js

const logPlugin = require('./craco-log-plugin');

module.exports = {
  // ...
  plugins: [
    {
      plugin: logPlugin,
      options: { preText: 'DEVSERVER CONFIG' },
    },
  ],
};

overrideJestConfig

overrideJestConfig(data): JestConfig

data is an object with the following structure:

Property	Description
jestConfig	The Jest config object already customized by CRACO
cracoConfig	The config object read from the CRACO config provided by the consumer
pluginOptions	The plugin options provided by the consumer
context	A context object (Jest-specific) containing env, paths, resolve, and rootDir

This function must return a valid Jest config.

Example

craco-log-plugin.js

module.exports = {
  overrideJestConfig: ({
    jestConfig,
    cracoConfig,
    pluginOptions,
    context: { env, paths, resolve, rootDir },
  }) => {
    if (pluginOptions.preText) {
      console.log(pluginOptions.preText);
    }

    console.log(JSON.stringify(jestConfig, null, 4));

    return jestConfig;
  },
};

craco.config.js

const logPlugin = require('./craco-log-plugin');

module.exports = {
  // ...
  plugins: [
    {
      plugin: logPlugin,
      options: { preText: 'JEST CONFIG' },
    },
  ],
};