Fix including yarn workspaces packages in create-react-app with craco

craco.config.js

module.exports = {
  webpack: {
    configure: (webpackConfig) => ({
      ...webpackConfig,
      module: {
        ...webpackConfig.module,
        rules: webpackConfig.module.rules.map((rule) => {
          if (!rule.oneOf) return rule;
          return {
            ...rule,
            oneOf: rule.oneOf.map((ruleObject) => {
              if (
                !new RegExp(ruleObject.test).test('.ts') ||
                !ruleObject.include
              )
                return ruleObject;
              return { ...ruleObject, include: undefined };
            }),
          };
        }),
      },
    }),
  },
};

Hi! Could you write a little documentation about how to implement this?
I Came from here
https://stackoverflow.com/questions/65893787/create-react-app-with-typescript-and-npm-link-enums-causing-module-parse-failed

Hey @JulianDM95-TP ,

it was done by simply reverse-engineering the structure of one of the existing but more "hacky" patches, which simply used delete ... to remove a static index from the rules array.

Let's see:

 configure: (webpackConfig) => ({
      ...webpackConfig,
      module: {

This block takes the entire webpack config, and just repeats everything but the module property, which we will work on.

 rules: webpackConfig.module.rules.map((rule) => {
          if (!rule.oneOf) return rule;
          return {
            ...rule,

Rules that do not contain the oneOf property will be skipped and returned as-is from the .map() function. Those who contain the propery will be cloned and we apply custom settings.

oneOf: rule.oneOf.map((ruleObject) => {
              if (
                !new RegExp(ruleObject.test).test('.ts') ||
                !ruleObject.include
              )
                return ruleObject;
              return { ...ruleObject, include: undefined };
            }),

We match against every element of the oneOf array, and see if we use the test property as a compiled regex, we execute a test to assert it matching .ts files, and having the include property.
If one of those conditions isn't met, we just return it as-is, if not, we found the rule object we were looking for, and return it with all its properties, except include, which we simple unset.
All of this is just done to preserve any existing rules and settings without any modification. This code just searches for this very specific pattern of a rule and just modifies that.

Hope this explanation helps 💯

Thank you. This really help me.