T
TanStack•8mo ago
rare-sapphire

Tanstack router + React: Nx monorepo with module federation using Rspack

Heyo, I have been trying to get TanStack router to run on a React module federated host app inside an NX monorepo that uses Rspack. Unfortunately I can't seem to get the Rspack config with Tanstack to run right since it never generates the routeTree.gen.ts file and of course errors. I have had luck using the Tanstack CLI to generate the routes properly but I would prefer for it to be automated through the bundler instead of having to run another tool alongside the dev env. Here is the current rspack.config.ts file: 
import { composePlugins, withNx, withReact } from '@nx/rspack';
import { withModuleFederation } from '@nx/module-federation/rspack';
import { ModuleFederationConfig } from '@nx/module-federation';
import { TanStackRouterRspack } from '@tanstack/router-plugin/rspack';

import baseConfig from './module-federation.config';

const config: ModuleFederationConfig = {
  ...baseConfig,
};

// Nx plugins for rspack to build config object from Nx options and context.
/**
 * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support for Module Federation
 * The DTS Plugin can be enabled by setting dts: true
 * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
 */
export default composePlugins(
  withNx(),
  withReact(),
  withModuleFederation(config, { dts: false }),
  (config, context) => {
    if (!config.plugins) {
      config.plugins = [];
    }

    config.plugins.push(
      TanStackRouterRspack({
        routesDirectory: './src/routes/',
        generatedRouteTree: './src/routes/routeTree.gen.ts',
        routeFileIgnorePrefix: '-',
        quoteStyle: 'single',
      })
    );
    return config;
  }
);
import { composePlugins, withNx, withReact } from '@nx/rspack';
import { withModuleFederation } from '@nx/module-federation/rspack';
import { ModuleFederationConfig } from '@nx/module-federation';
import { TanStackRouterRspack } from '@tanstack/router-plugin/rspack';

import baseConfig from './module-federation.config';

const config: ModuleFederationConfig = {
  ...baseConfig,
};

// Nx plugins for rspack to build config object from Nx options and context.
/**
 * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support for Module Federation
 * The DTS Plugin can be enabled by setting dts: true
 * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
 */
export default composePlugins(
  withNx(),
  withReact(),
  withModuleFederation(config, { dts: false }),
  (config, context) => {
    if (!config.plugins) {
      config.plugins = [];
    }

    config.plugins.push(
      TanStackRouterRspack({
        routesDirectory: './src/routes/',
        generatedRouteTree: './src/routes/routeTree.gen.ts',
        routeFileIgnorePrefix: '-',
        quoteStyle: 'single',
      })
    );
    return config;
  }
);
Any help is very much appreciated!
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?