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

[Bnaya]

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.

[barbados-clemens]

@Bnaya I'm working on a change for the component testing changes that involve leveraging the same utils that @nrwl/web:webpack (the builder that react apps use) which should solve this issue for you.

But can you put up an example repo so I can see verify my changes will solve this for you?

[Bnaya]

Thank you! I hope to get to test it soon

[RhysOnlyBetter]

@barbados-clemens have the changes you mentioned above been released yet? I'm having the same problem with svg's breaking webpack compilation when running cypress component-tests in an nx react workspace. I've created an example repo here. When you run nx component-test sample you'll get the following error:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
| <!-- Created with Inkscape (http://www.inkscape.org/) -->```

[barbados-clemens]

@RhysOnlyBetter that link is a 404 for me. is the repo public? and it's released as of v14.6.0, should have been a migration to update the nx preset for component testing.

[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]

@RhysOnlyBetter looks like I forgot to resolve custom webpack configs from the build target, that's where the svg support comes from for the react projects, "webpackConfig": "@nrwl/react/plugins/webpack".

there is also an issue with the provided project svg with namespaces being used. Once I changed to camelCase instead of namespaces and remove the xml tag + comment it worked (with my fix)

here is the error, you can get it via running nx build sample

ERROR in ./src/assets/eyeballs.svg
Module build failed (from ../../node_modules/@svgr/webpack/dist/index.js):
SyntaxError: unknown file: Namespace tags are not supported by default. React's JSX doesn't support namespace tags.

I'll get this fix PR later today. Thanks for the repo!

[RhysOnlyBetter]

@barbados-clemens Thank you, very much appreciated!

[barbados-clemens]

PR for loading custom webpacks