React router v7 does not respect plugin configs properly

[AlemTuzlak]

I'm using React Router as a...

framework

Reproduction

https://stackblitz.com/~/github.com/AlemTuzlak/asset-inline-limit-repro

System Info

/

Used Package Manager

npm

Expected Behavior

In development, the spritesheet is generated as an svg and isn't inlined

Remix used to respect the config options and properly output the svg file in development, react-router v7 doesn't. When I run the build command the spritesheet is generated as a proper svg but with the dev command it inlines it as base64. I don't know what the change in behavior was but what is peculiar is that when I define it directly in the vite config via

build: { assetInlineLimit: 0 }

it works, but when the vite-plugin-icons-spritesheet does it it doesn't work.
Relevant code from the vite plugin that makes the change:

  async config(config) {
        if (!config.build || i > 0) {
          return;
        }
        const subFunc =
          typeof config.build.assetsInlineLimit === "function" ? config.build.assetsInlineLimit : undefined;
        const limit = typeof config.build.assetsInlineLimit === "number" ? config.build.assetsInlineLimit : undefined;

        const assetsInlineLimitFunction = (name: string, content: Buffer) => {
          const isSpriteSheet = allSpriteSheetNames.some((spriteSheetName) => {
            return name.endsWith(normalizePath(`${outputDir}/${spriteSheetName}`));
          });
          // Our spritesheet? Early return
          if (isSpriteSheet) {
            return false;
          }
          // User defined limit? Check if it's smaller than the limit
          if (limit) {
            const size = content.byteLength;
            return size <= limit;
          }
          // User defined function? Run it
          if (typeof subFunc === "function") {
            return subFunc(name, content);
          }

          return undefined;
        };
        config.build.assetsInlineLimit = assetsInlineLimitFunction;
      },

This used to be configResolved but that stopped working with react-router as well, also I've tried running it before the react-router plugins but still doesn't help.

Actual Behavior

The spritesheet in development is inlined

[markdalgleish]

Thanks for raising this issue.

This is an issue in vite-plugin-icons-spritesheet since it assumes that config.build exists and bails out if it's not there. This causes problems when using the React Router Vite plugin during development because we only provide the build config when running a production build. We could potentially change this, but we're moving towards using the Vite Environment API and in this paradigm the build config object is not guaranteed to be there, so I think it's more correct for vite-plugin-icons-spritesheet to support a missing build config.

I've opened a PR fixing it here: forge-42/vite-plugin-icons-spritesheet#33

[AlemTuzlak]

Thank you for the investigation Mark, out of curiosity, what has changed between the remix and react router plugin to lead to a change in the behaviour, the older versions of vite-plugin-icons-spritesheet used to use configResolved instead of config hook and it used to work in remix.