How to use the react-app-rewired.getLoader function in react-app-rewired

To help you get started, we’ve selected a few react-app-rewired 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.

github strothj / react-app-rewire-typescript-babel-preset / packages / rewire / rewireWebpack.ts View on Github external
// Replace the babel-preset-react-app preset with the preset rewire from this
  // package. This is done so @babel/preset-flow can be removed.
  // const babelLoader = getBabelLoader(config.module.rules) as webpack.NewLoader;
  const babelLoader = getLoader(
    scriptLoader.use as webpack.RuleSetRule[],
    babelLoaderMatcher
  ) as webpack.NewLoader;
  if (!babelLoader || !babelLoader.options)
    throw new Error("Unable to locate Babel loader.");
  babelLoader.options.presets = [path.resolve(__dirname, "rewirePreset")];

  // Older versions of react-scripts v2 use a Webpack loader to add support for
  // SVGs as React components. Later versions do this using a Babel plugin.
  // Check if it is present. If it is, replace the preset in the SVG loader's
  // sibling Babel loader.
  const svgLoader = getLoader(config.module.rules, svgLoaderMatcher);
  if (svgLoader) {
    if (!("use" in svgLoader) || !Array.isArray(svgLoader.use))
      throw new Error("Unexpected layout for SVG loader.");
    const svgBabelLoader = svgLoader.use.find((l: any) =>
      /babel-loader/.test(l.loader)
    );
    if (
      !svgBabelLoader ||
      typeof svgBabelLoader !== "object" ||
      !("options" in svgBabelLoader) ||
      svgBabelLoader.options == null
    )
      throw new Error("Unable to locate sibling Babel loader in SVG loader.");
    if (typeof svgBabelLoader.options === "string")
      throw new Error("Unexpected layout for SVG loader.");
    svgBabelLoader.options.presets = babelLoader.options.presets;
github timarney / react-app-rewired / packages / react-app-rewire-less / index.js View on Github external
return function(config, env) {
    const lessExtension = /\.less$/;

    const fileLoader = getLoader(
      config.module.rules,
      rule => loaderNameMatches(rule, 'file-loader')
    );
    fileLoader.exclude.push(lessExtension);

    const cssRules = getLoader(
      config.module.rules,
      rule => String(rule.test) === String(/\.css$/)
    );

    let lessRules;
    if (env === "production") {
      const lessLoader = cssRules.loader || cssRules.use

      lessRules = {
        test: lessExtension,
        loader: [
          // TODO: originally this part is wrapper in extract-text-webpack-plugin
          //       which we cannot do, so some things like relative publicPath
          //       will not work.
          //       https://github.com/timarney/react-app-rewired/issues/33
          ...lessLoader,
github strothj / react-app-rewire-typescript-babel-preset / packages / rewire / rewireTSLint.ts View on Github external
export default function(
  c: webpack.Configuration,
  options?: object
): webpack.Configuration {
  // Validate and narrow type
  const config = getValidatedConfig(c);

  // Grab the current ESLint config so we can copy some of its settings
  const esLintLoader = getLoader(config.module.rules, esLintLoaderMatcher);

  if (!esLintLoader) {
    throw new Error("Could not locate eslint-loader.");
  }

  // Create a new rule
  const tsLintLoader: webpack.RuleSetRule = {
    test: /\.(ts|tsx)$/,
    enforce: "pre",
    use: [
      {
        options,
        loader: require.resolve("tslint-loader")
      }
    ],
    include: esLintLoader.include,
github jgchenu / Mobile-electricity-provider3 / config-overrides.js View on Github external
'not ie < 9', // React doesn't support IE8 anyway
                ],
                flexbox: 'no-2009',
              }),
            ],
          },
        },
        {
          loader: require.resolve('sass-loader'),
        },
      ]
    }
  );

  // file-loader exclude
  let l = getLoader(config.module.rules, fileLoaderMatcher);
  l.exclude.push(/\.scss$/);

  return config;
};
github lusan / antd-boilerplate / config-overrides.js View on Github external
'>1%',
                  'last 4 versions',
                  'Firefox ESR',
                  'not ie < 9' // React doesn't support IE8 anyway
                ],
                flexbox: 'no-2009'
              })
            ]
          }
        }
      ]
    }
  )

  // file-loader exclude
  let l = getLoader(config.module.rules, fileLoaderMatcher)
  l.exclude.push(/\.less$/)

  return config
}
github joshhunt / destinySets / config-overrides.js View on Github external
module.exports = function override(config, env) {
  config = injectBabelPlugin('lodash', config);

  config.entry.unshift('babel-polyfill');

  const babelLoader = getLoader(config.module.rules, rule => {
    return rule.loader && /[\/\\]babel-loader[\/\\]/.test(rule.loader);
  });

  babelLoader.include = [
    babelLoader.include,
    require.resolve('@destiny-plumbing/definitions')
  ];

  const cssLoader = getLoader(
    config.module.rules,
    rule => String(rule.test) === String(/\.css$/)
  );

  let stylusRules;

  if (false) {
    config.plugins.push(
      new UnusedFilesWebpackPlugin({
        patterns: ['src/**/*.*']
      })
    );
  }

  config.plugins.push(
    new WebpackVisualizerPlugin({
github fxy5869571 / blog-react / config-overrides.js View on Github external
module.exports = function override(config, env) {
  const tsLoader = getLoader(
    config.module.rules,
    rule =>
      rule.loader &&
      typeof rule.loader === 'string' &&
      rule.loader.includes('ts-loader')
  )

  tsLoader.options = {
    getCustomTransformers: () => ({
      before: [
        tsImportPluginFactory({
          libraryDirectory: 'es',
          libraryName: 'antd',
          style: true
        })
      ]
github timarney / react-app-rewired / packages / react-app-rewire-eslint / index.js View on Github external
function getEslintOptions(rules) {
  const matcher = (rule) => loaderNameMatches(rule, ESLINT_PATH);
  return getLoader(rules, matcher).options;
}
github aspnetboilerplate / module-zero-core-template / reactjs / config-overrides.js View on Github external
module.exports = function override(config, env) {
    const tsLoader = getLoader(
        config.module.rules,
        rule =>
        rule.loader &&
        typeof rule.loader === 'string' &&
        rule.loader.includes('ts-loader')
    );

    tsLoader.options = {
        getCustomTransformers: () => ({
            before: [tsImportPluginFactory({
                libraryName: 'antd',
                libraryDirectory: 'es',
                style: 'css',
            })]
        })
    };
github aze3ma / react-app-rewire-scss / index.js View on Github external
return function(config, env) {
		const sassExtension = /(\.scss|\.sass)$/;
		const devMode = env !== 'production';
		const fileLoader = getLoader(config.module.rules, rule => loaderNameMatches(rule, 'file-loader'));

		if(!fileLoader.exclude) fileLoader.exclude = [];
		fileLoader.exclude.push(sassExtension);

		const cssRules = getLoader(config.module.rules, rule => String(rule.test) === String(/\.css$/));
		var sassRules;

		if (devMode) {
			sassRules = {
				test: sassExtension,
				use: [...cssRules.use, { loader: 'sass-loader', options: sassLoaderOptions }],
			};
		} else {
			sassRules = {
				test: sassExtension,
				use: [...cssRules.loader, { loader: 'sass-loader', options: sassLoaderOptions }],
			};
		}

		const oneOfRule = config.module.rules.find(rule => rule.oneOf !== undefined);