Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
// Support eslint for ts and tsx files
config.module.rules[1] = {
test: /\.(js|jsx|mjs|ts|tsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
useEslintrc: true,
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
};
const reactScriptsCssLoaders = [
{
loader: 'css-loader',
options: {
minimize: true,
sourceMap: !prod,
context: '/',
},
},
// copied from react-scripts/config/webpack.config.dev.js
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
module.exports = (rules, packages) => {
const babelLoaderPaths = getPaths(isBabelLoader, rules);
const babelLoader = get(rules, babelLoaderPaths[0].join("."));
// Include the main app package + all other monorepo packages (this allows us to use monorepo).
babelLoader.include = [paths.appSrc, ...packages];
babelLoader.options = {
// Use original react-scripts babel-loader options.
...babelLoader.options,
// Set path to `babel.config.js` explicitly, as `react-scripts` disable configFile by default.
// (https://babeljs.io/docs/en/options#configfile)
configFile: path.join(paths.appSrc, "..", "babel.config.js"),
// Enable `babelrc` searching (https://babeljs.io/docs/en/options#babelrc)
babelrc: true,
// We must explicitly set paths to all babel roots to transpile them accordingly when importing from the main app.
// (https://babeljs.io/docs/en/options#babelrcroots)
babelrcRoots: packages
};
};
module.exports = (rules, packages) => {
const babelLoaderPaths = getPaths(isBabelLoader, rules);
const babelLoader = get(rules, babelLoaderPaths[0].join("."));
// Include the main app package + all other monorepo packages (this allows us to use monorepo).
babelLoader.include = [paths.appSrc, ...packages];
babelLoader.options = {
// Use original react-scripts babel-loader options.
...babelLoader.options,
// Set path to `babel.config.js` explicitly, as `react-scripts` disable configFile by default.
// (https://babeljs.io/docs/en/options#configfile)
configFile: path.join(paths.appSrc, "..", "babel.config.js"),
// Enable `babelrc` searching (https://babeljs.io/docs/en/options#babelrc)
babelrc: true,
// We must explicitly set paths to all babel roots to transpile them accordingly when importing from the main app.
// (https://babeljs.io/docs/en/options#babelrcroots)
babelrcRoots: packages
};
};
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works just like "file" loader but it also embeds
// assets smaller than specified size as data URLs to avoid requests.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// @remove-on-eject-begin
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
// @remove-on-eject-end
compact: true,
},
},
// The notation here is somewhat confusing.
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader normally turns CSS into JS modules injecting <style>,
// but unlike in development configuration, we do something different.
// `ExtractTextPlugin` first applies the "postcss" and "css" loaders
// (second argument), then grabs the result CSS and puts it into a</style>
rules.forEach(rule => {
if (foundBabel) {
return;
}
if (rule.hasOwnProperty("options") && rule.options.hasOwnProperty("babelrc")) {
rule.include = [paths.appSrc, ...packages];
rule.options = {
...merge(rule.options, {
babelrc: true,
babelrcRoots: packages,
plugins: [["babel-plugin-module-resolver", { alias: aliases }]]
})
};
foundBabel = true;
return;
}
overrideBabel(
rule.use || rule.oneOf || (Array.isArray(rule.loader) && rule.loader) || []
);
});
module.exports = (rules, packages, aliases) => {
const babelLoaderPaths = getPaths(isBabelLoader, rules);
const babelLoader = get(rules, babelLoaderPaths[0].join("."));
babelLoader.include = [paths.appSrc, ...packages];
babelLoader.options = {
...babelLoader.options,
babelrc: true,
babelrcRoots: packages,
ignore: [/node_modules/],
plugins: [["babel-plugin-module-resolver", { alias: aliases }]]
};
};
module.exports = (rules, packages, aliases) => {
const babelLoaderPaths = getPaths(isBabelLoader, rules);
const babelLoader = get(rules, babelLoaderPaths[0].join("."));
babelLoader.include = [paths.appSrc, ...packages];
babelLoader.options = {
...babelLoader.options,
ignore: [/node_modules/],
babelrc: true,
babelrcRoots: packages,
plugins: [["babel-plugin-module-resolver", { alias: aliases }]]
};
};
module.exports = (rules, packages, aliases) => {
const babelLoaderPaths = getPaths(isBabelLoader, rules);
const babelLoader = get(rules, babelLoaderPaths[0].join("."));
babelLoader.include = [paths.appSrc, ...packages];
babelLoader.options = {
...babelLoader.options,
babelrc: true,
babelrcRoots: packages,
plugins: [["babel-plugin-module-resolver", { alias: aliases }]]
};
};
}
function getServedPath(publicUrl) {
const servedUrl = publicUrl ? url.parse(publicUrl).pathname : '/'
return ensureSlash(servedUrl, true)
}
paths.dotenv = existsSync(appDotEnv) ? appDotEnv : paths.dotenv
paths.appPath = appRootPath + '/'
paths.appPublic = appPublic
paths.appHtml = appPublic + '/index.html'
paths.appBuild = appBuild
paths.appPackageJson = appPackage
paths.yarnLockFile = appRootPath + '/yarn.lock'
paths.appSrc = appSrc
paths.appIndexJs = appSrc + '/index.js'
paths.proxySetup = appSrc + '/setupProxy.js'
paths.testsSetup = appSrc + '/setupTests'
paths.appNodeModules = appNodeModules
paths.servedPath = homepage ? getServedPath(homepage) : '/'
paths.publicUrl = homepage || ''
module.exports = paths