@nrwl/react/plugins/component-testing is lacking stuff from react/plugins/webpack

Current Behavior

@nrwl/react/plugins/component-testing is lacking webpack config parts that exists in @nrwl/react/plugins/webpack Which leads to that code that builds and runs using regular react webpack setup does not build with it out of the box.

Mostly the svgr loader is missing, hot reload, and maybe more.

Also there is something fishy with the imports, see the workaround to understand what’s fishy about them.

Expected Behavior

Code that works with@nrwl/react/plugins/webpack should just work with the @nrwl/react/plugins/component-testing preset!

My workaround cypress.config.ts:

import { nxComponentTestingPreset } from '@nrwl/react/plugins/component-testing';
import * as getWebpackConfigTypeIsBroken from '@nrwl/react/plugins/webpack';
import { defineConfig } from 'cypress';

import type { Configuration } from 'webpack';

const component = nxComponentTestingPreset(__dirname);

fixPartialWebpackConfig(component.devServer.webpackConfig);

export default defineConfig({
  component,
});

/**
 The webpack config in @nrwl/react/plugins/component-testing is incomplete
 Until it will be fixed, we manually add augment it using @nrwl/react/plugins/webpack
 But unfortunately there is a miss-match in the es transpile module configurations and importing it in the normal way is broken,
 so we have a workaround also for that
*/
function fixPartialWebpackConfig(webpackConfig: Configuration) {
  // The exports here are wacked https://github.com/nrwl/nx/blob/12f0f19/packages/react/plugins/webpack.ts
  // mix of ES export + module.exports
  const getWebpackConfig: typeof getWebpackConfigTypeIsBroken.getWebpackConfig =
    // @ts-expect-error see above comments
    getWebpackConfigTypeIsBroken.default;

  const svgToString = /\.svg$/.toString();

  const doWeHaveSvgLoader = webpackConfig.module?.rules?.some((rule) => {
    if (typeof rule === 'string') {
      return false;
    } else {
      return rule.test?.toString() === svgToString;
    }
  });

  /* Kill switch, maybe this is not longer needed */
  if (doWeHaveSvgLoader) {
    throw new Error('---fixPartialWebpackConfig is may no longer needed---');
  }

  // this function actually mutates the config in-place
  getWebpackConfig(webpackConfig);
}

Worth noting that my workaround does not make fast refresh to work and maybe more issues.

[RhysOnlyBetter]

@barbados-clemens Apologies, I’ve made the repo public now. I’m using 14.7.4 there, so I believe the issue is still persisting.

[barbados-clemens]

PR for loading custom webpacks