How to use @craco/craco - 10 common examples
To help you get started, we’ve selected a few @craco/craco examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
preconstruct / preconstruct / packages / craco / index.js View on Github 
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;
}@craco/craco
Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app.
