How to use @craco/craco - 10 common examples

overrideWebpackConfig: ({ webpackConfig }) => {
    // Search for all instances of babel-loader.
    const { hasFoundAny, matches } = getLoaders(
      webpackConfig,
      loaderByName("babel-loader")
    );

    // If we can't find the loader then throw an error.
    if (!hasFoundAny) {
      throw new Error("could not find babel-loader");
    }

    let hasFoundRightLoader = false;

    // Loop through each match, enabling babelrc and clearing any presets.
    matches.forEach(({ loader }) => {
      if (loader.test.toString() === /\.(js|mjs|jsx|ts|tsx)$/.toString()) {
        hasFoundRightLoader = true;
        if (!loader.options) {
          loader.options = {};
        }

overrideWebpackConfig: ({ webpackConfig }) => {
    // Search for all instances of babel-loader.
    const { hasFoundAny, matches } = getLoaders(
      webpackConfig,
      loaderByName("babel-loader")
    );

    // If we can't find the loader then throw an error.
    if (!hasFoundAny) {
      throw new Error("could not find babel-loader");
    }

    let hasFoundRightLoader = false;

    // Loop through each match, enabling babelrc and clearing any presets.
    matches.forEach(({ loader }) => {
      if (loader.test.toString() === /\.(js|mjs|jsx|ts|tsx)$/.toString()) {
        hasFoundRightLoader = true;
        if (!loader.options) {

overrideWebpackConfig: ({ webpackConfig, context: { env } }) => {
    const workerLoader = {
      test: /\.worker\.js/,
      use: {
        loader: "worker-loader"
      }
    };
    addBeforeLoader(webpackConfig, loaderByName("babel-loader"), workerLoader);
    return webpackConfig;
  }
};

packageName: 'craco-linaria',
			githubRepo: 'jedmao/craco-linaria',
			message,
			githubIssueQuery,
		})

	if (!webpackConfig.module) {
		throwError(
			`Can't find 'module' key in the ${context.env} webpack config!`,
			'webpack+module',
		)
	}

	const { isFound, match: babelLoaderMatch } = getLoader(
		webpackConfig,
		loaderByName('babel-loader'),
	)

	if (!isFound) {
		throwError(
			`Can't find babel-loader in the ${context.env} webpack config!`,
			'webpack+babel-loader',
		)
	}

	const oneOfRules = webpackConfig.module.rules.find(rule => rule.oneOf)
	if (!oneOfRules) {
		throwError(
			`Can't find 'oneOf' rules under module.rules in the ${context.env} webpack config!`,
			'webpack+rules+oneOf',
		)
	}

overrideWebpackConfig: ({ context, webpackConfig }) => {
          const { isFound, match: fileLoaderMatch } = getLoader(
            webpackConfig,
            loaderByName("file-loader")
          );

          if (!isFound) {
            throwUnexpectedConfigError({
              message: `Can't find file-loader in the ${context.env} webpack config!`
            });
          }

          fileLoaderMatch.loader.exclude.push(/theme.config$/);
          fileLoaderMatch.loader.exclude.push(/\.variables$/);
          fileLoaderMatch.loader.exclude.push(/\.overrides$/);

          return webpackConfig;
        }
      }

configure: (webpackConfig) => {
      const lm = getLoader(webpackConfig, loaderByName('babel-loader'));
      const loader = lm.match.loader;
      webpackConfig.module.rules[2].oneOf[1] = transformBabelLoader(loader);
      return webpackConfig;
    }
  }

} else {
      throwError(
        `Found an unhandled loader in the ${context.env} webpack config: ${rule.loader}`,
        "webpack+unknown+rule"
      );
    }
  });

  if (pluginOptions.modifyLessRule) {
    lessRule = pluginOptions.modifyLessRule(lessRule, context);
  }
  oneOfRule.oneOf.push(lessRule);

  const { isFound, match: fileLoaderMatch } = getLoader(
    webpackConfig,
    loaderByName("file-loader")
  );
  if (!isFound) {
    throwError(
      `Can't find file-loader in the ${context.env} webpack config!`,
      "webpack+file-loader"
    );
  }
  fileLoaderMatch.loader.exclude.push(lessExtension);

  return webpackConfig;
};

}
      });
    } else {
      throwError(
        `Found an unhandled loader in the ${context.env} webpack config: ${rule.loader}`,
        "webpack+unknown+rule"
      );
    }
  });

  if (pluginOptions.modifyLessRule) {
    lessRule = pluginOptions.modifyLessRule(lessRule, context);
  }
  oneOfRule.oneOf.push(lessRule);

  const { isFound, match: fileLoaderMatch } = getLoader(
    webpackConfig,
    loaderByName("file-loader")
  );
  if (!isFound) {
    throwError(
      `Can't find file-loader in the ${context.env} webpack config!`,
      "webpack+file-loader"
    );
  }
  fileLoaderMatch.loader.exclude.push(lessExtension);

  return webpackConfig;
};

const throwError = (message, githubIssueQuery) =>
		throwUnexpectedConfigError({
			packageName: 'craco-linaria',
			githubRepo: 'jedmao/craco-linaria',
			message,
			githubIssueQuery,
		})

	if (!webpackConfig.module) {
		throwError(
			`Can't find 'module' key in the ${context.env} webpack config!`,
			'webpack+module',
		)
	}

	const { isFound, match: babelLoaderMatch } = getLoader(
		webpackConfig,
		loaderByName('babel-loader'),
	)

	if (!isFound) {
		throwError(
			`Can't find babel-loader in the ${context.env} webpack config!`,
			'webpack+babel-loader',
		)
	}

	const oneOfRules = webpackConfig.module.rules.find(rule => rule.oneOf)
	if (!oneOfRules) {
		throwError(
			`Can't find 'oneOf' rules under module.rules in the ${context.env} webpack config!`,
			'webpack+rules+oneOf',

overrideWebpackConfig: ({ context, webpackConfig }) => {
          const { isFound, match: fileLoaderMatch } = getLoader(
            webpackConfig,
            loaderByName("file-loader")
          );

          if (!isFound) {
            throwUnexpectedConfigError({
              message: `Can't find file-loader in the ${context.env} webpack config!`
            });
          }

          fileLoaderMatch.loader.exclude.push(/theme.config$/);
          fileLoaderMatch.loader.exclude.push(/\.variables$/);
          fileLoaderMatch.loader.exclude.push(/\.overrides$/);

          return webpackConfig;
        }