How to use the react-app-rewired.getBabelLoader 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 AdaptiveConsulting / ReactiveTraderCloud / src / client / config-overrides.js View on Github external
// Inject babel-plugin-emotion
  config = injectBabelPlugin(
    [
      'emotion',
      {
        autoLabel: true,
        hoist: env === 'production',
        labelFormat: '[filename]--[local]',
        sourceMap: env !== 'production'
      }
    ],
    config
  )

  // Rewire typescript with our rewired babel config
  const babelLoader = getBabelLoader(config.module.rules)
  const tsLoader = getLoader(config.module.rules, rule => /ts|tsx/.test(rule.test))
  tsLoader.use.unshift({
    loader: babelLoader.loader,
    options: babelLoader.options
  })

  config.devtool = env !== 'production' ? 'source-map' : config.devtool

  return config 
}
github nos / client / config-overrides.js View on Github external
function rewireBabel(config, _env) {
  const loader = getBabelLoader(config.module.rules);

  if (!loader) {
    console.warn('babel-loader not found'); // eslint-disable-line no-console
    return config;
  }

  loader.options = merge(loader.options, {
    babelrc: fs.existsSync(path.resolve(__dirname, './.babelrc'))
  });

  return config;
}
github yeojongki / douban-house / config-overrides.js View on Github external
module.exports = function rewire(config) {
  // add antd-mobile
  config = injectBabelPlugin(
    ['import', { libraryName: 'antd-mobile', style: 'css' }],
    config
  );

  // add styled-jsx plugin
  const babelOptions = getBabelLoader(
    config.module.rules,
    rule => String(rule.test) === String(/\.(js|jsx|mjs)$/)
  ).options;
  let babelrc = require(babelOptions.presets[0]);
  babelrc.plugins = [
    [
      'styled-jsx/babel',
      {
        plugins: ['styled-jsx-plugin-sass', 'styled-jsx-plugin-postcss']
      }
    ]
  ].concat(babelrc.plugins || []);
  babelOptions.presets = babelrc;

  // add alias
  let originAlias = config.resolve.alias;
github lwd-technology / react-app-rewire-typescript / index.js View on Github external
// Change the hardcoded `index.js` to just `index`, so that it will resolve as
  // whichever file is available. The use of `fs` is to handle things like
  // symlinks.
  config.entry = config.entry
    .slice(0, config.entry.length - 1)
    .concat([path.resolve(fs.realpathSync(process.cwd()), 'src/index')])

  // Add Typescript files to automatic file resolution for Webpack.
  config.resolve.extensions = (config.resolve.extensions || []).concat([
    '.web.ts',
    '.ts',
    '.tsx'
  ])

  // Set up a Typescript rule.
  const babelLoader = getBabelLoader(config.module.rules)
  const typescriptRules = {
    test: /\.tsx?$/,
    use: [
      { loader: babelLoader.loader, options: babelLoader.options },
      { loader: 'ts-loader', options: typescriptLoaderOptions }
    ]
  }

  // Add the Typescript rule before the file-loader rule.
  addBeforeRule(config.module.rules, fileLoaderMatcher, typescriptRules)

  return config
}
github xivanalysis / xivanalysis / config-overrides.js View on Github external
}
		})
		return loaders
	}
	getLoaders(
		config.module.rules,
		r => loaderNameMatches(r, 'css-loader') && r.options && r.options.modules,
	).forEach(l => {
		l.loader = 'typings-for-css-modules-loader'
		l.options.namedExport = true
		l.options.camelCase = 'only'
		l.options.banner = '// This file is automatically generated. Do not edit.'
	})

	// Set up TypeScript
	const loader = getBabelLoader(config.module.rules)
	assert.equal(loader.test.toString(), String.raw`/\.(js|mjs|jsx)$/`)
	loader.test = /\.(js|mjs|jsx|tsx?)$/
	assert.equal(typeof loader.use, 'undefined')
	assert.equal(typeof loader.loader, 'string')
	loader.use = [
		{
			loader: loader.loader,
			options: loader.options,
		},
		{
			loader: 'ts-loader',
			options: {
				// TODO: set up happyPackMode et al
				onlyCompileBundledFiles: true,
			},
		},
github cruise-automation / webviz / docs / config-overrides.js View on Github external
module.exports = (config, _env) => {
  const babelLoader = getBabelLoader(config.module.rules);
  config.module.rules.map((rule) => {
    if (typeof rule.test !== "undefined" || typeof rule.oneOf === "undefined") {
      return rule;
    }

    rule.oneOf.unshift({
      test: /\.mdx?$/,
      use: [
        {
          loader: babelLoader.loader,
          options: babelLoader.options,
        },
        "@mdx-js/loader",
      ],
    });
github harrysolovay / ideal-rewires / lib / index.es.js View on Github external
webpack: function webpack(config, env) {
      var babelLoader = getBabelLoader(config.module.rules);

      if (options.babelrc && existsInRoot('.babelrc')) {
        if (!babelLoader) throw new Error('Babel config error');
        babelLoader.options.babelrc = true;
      }

      if (options.eslintrc && existsInRoot('.eslintrc')) {
        var eslintLoaderMatcher = createLoaderMatcher('eslint-loader');
        var rule = findRule(config.module.rules, eslintLoaderMatcher);
        if (!rule) throw new Error('ESLint config error');
        delete rule.options.baseConfig;
        rule.options.useEslintrc = true;

        if (options.stylelintrc && existsInRoot('.stylelintrc')) {
          var stylelintRules = {
            loader: 'stylelint-custom-processor-loader',
github dashed / react-app-rewire-babel-loader / src / index.js View on Github external
export const exclude = (config: ConfigType, ...excludes: Array) => {
    const babel_loader: LoaderRule = getBabelLoader(config.module.rules);

    const exclude_config = getArray(babel_loader.exclude);

    excludes = excludes.reduce((accumulator, exclude) => {
        if (Array.isArray(exclude)) {
            return accumulator.concat(exclude);
        }

        accumulator.push(exclude);
        return accumulator;
    }, exclude_config);

    babel_loader.exclude = excludes;

    return config;
};
github dashed / react-app-rewire-babel-loader / src / index.js View on Github external
export const include = (config: ConfigType, ...includes: Array) => {
    const babel_loader: LoaderRule = getBabelLoader(config.module.rules);

    const include_config = getArray(babel_loader.include);

    includes = includes.reduce((accumulator, include) => {
        if (Array.isArray(include)) {
            return accumulator.concat(include);
        }

        accumulator.push(include);
        return accumulator;
    }, include_config);

    babel_loader.include = includes;

    return config;
};
github harrysolovay / ideal-rewires / src / index.js View on Github external
webpack: (config, env) => {

    const babelLoader = getBabelLoader(config.module.rules)

    if(options.babelrc && existsInRoot('.babelrc')) {
      
      if(!babelLoader)
        throw new Error('Babel config error')
      
      babelLoader.options.babelrc = true
    }

    if(options.eslintrc && existsInRoot('.eslintrc')) {

      const eslintLoaderMatcher = createLoaderMatcher('eslint-loader')

      const rule = findRule(
        config.module.rules,
        eslintLoaderMatcher,