As part of upgrading Sitecore JSS in our project, it was necessary to maintain the existing pattern where we have a custom path for JSS components. Having a custom path for the JSS components allows us to use the default react components path as intended (for react components). In earlier versions of JSS (21.0.9 at least), the path was set in the scripts/componentFactory.ts as componentRootPath, but in newer versions, much of this code has been moved into JSS itself. However, with a little bit of work, we are able to inject the value as before. Here’s how it’s done in JSS 21.5.3.

In scripts/generate-component-builder/index.ts, we need to add the componentRootPath property to the ComponentBuilderPluginConfig interface:

scripts/generate-component-builder/index.ts

// ...
export interface ComponentBuilderPluginConfig {
  watch?: boolean;
  packages: PackageDefinition[];
  components: ComponentFile[];
  componentRootPath?: string; // <----- add this line
}
// ...

JSS already knows about this property, but doesn’t expose it here by default.

The other file that we need to update is component-builder.ts, where we can set the property value before JSS gets to work bootstrapping.

scripts\generate-component-builder\plugins\component-builder.ts

// ...
class ComponentBuilderPlugin implements ComponentBuilderPluginType {
  order = 9999;

  exec(config: ComponentBuilderPluginConfig) {
    config.componentRootPath = 'src/jss-components'; // <----- add this line
    generateComponentBuilder(config);

    return config;
  }
}
// ...

Now, when we run yarn bootstrap or yarn build (or npm or any of the others), the JSS components will be registered from the correct custom path.

I also need to thank Frank van Zutphen for his post on customising the file pattern for the components folder which helped me to understand what was going on.

I hope this has been helpful. Thanks for reading. :-)