Investigating vite 2.8 + vite-ssr issues.

[salqueng]

#141

I'm looking for a fix of the above issue, and I found something interesting.

In vite,

• vite 2.8.x uses @rollup/plugin-alias 3.1.9, and vite 2.7.x uses @rollup/plugin-alias 3.1.8
  • @rollup/plugin-alias was changed
    • rollup/plugins@f180808#diff-f45fc17205be21dade7c2b51bfceca178954954d5e0e2441f3d317966a56b79dL34
    • In 3.1.8, it just uses given alias entries.
    • But in 3.1.9, it uses map, so entries are copied.
• In the build procedure, vite calls resolvePlugins to make rollup plugins, then calls configResolve of each plugins.
  • resolvePlugins initialize @rollup/plugin-alias with config.resolve.alias

In vite-ssr plugin,

• configResolve modifies config.resolve.alias

Therefore, with vite 2.7.x, alias modification of vite-ssr works, but with vite 2.8.x, alias modification will not be applied because config.resolve.alias is copied and alias plugin cannot access to modified alias value.

I don't know how to fix it - confingResolved is the best place to get whether current environment is ssr or not, but modifying alias in configResolved is not working.

Moving alias.push to config() works for build, but other errors raised when dev server is on.

https://github.com/frandiox/vite-ssr/blob/master/src/dev/server.ts#L27
This replaces replacement from "client" to "server", but this also modifies config.resolve.alias

[salqueng]

Update:
I created the fix as a vite plugin.
It uses @rollup/plugin-alias so you need to add it to devDependencies of package.json.

To fix the problem, alias plugin should be recreated when config.resolve.alias is updated after resolveConfig on vite build procedure.

It is possible to make a PR, but it requires "@rollup/plugin-alias" to be included to this repository.

/* eslint-disable @typescript-eslint/no-var-requires */
module.exports = () => [
  {
    name: "fix-vite-ssr",
    configResolved(config) {
      // Recreate Alias Plugin
      const alias = require("@rollup/plugin-alias");
      const aliasPluginIdx = config.plugins.findIndex(
        ({ name }) => name === "alias"
      );

      if (aliasPluginIdx > -1) {
        config.plugins[aliasPluginIdx] = alias({
          entries: config.resolve.alias,
        });
      }
    },
  },
  {
    enforce: "pre",
    name: "fix-vite-ssr-pre",
    configureServer(server) {
      if (process.env.__DEV_MODE_SSR) {
        const alias = require("@rollup/plugin-alias");
        return () => {
          server.middlewares.use((req, res, next) => {
            if (req.method !== "GET" || req.originalUrl === "/favicon.ico") {
              return next();
            }

            const aliasEntries = server.config.resolve.alias;
            let replaced = false;
            for (const alias of aliasEntries) {
              if (alias._viteSSR === true) {
                alias.replacement = alias.replacement.replace(
                  "client",
                  "server"
                );
                replaced = true;
              }
            }

            if (!replaced) {
              next();
            }

            const aliasPluginIdx = server.config.plugins.findIndex(
              ({ name }) => name === "alias"
            );
            if (aliasPluginIdx > -1) {
              server.config.plugins[aliasPluginIdx] = alias({
                entries: aliasEntries,
              });
            }

            next();
          });
        };
      }
    },
  },
];

[frandiox]

Thanks for the research and workaround, @salqueng ! I'll try to check this soon to see if we can add it to the core.

For a long time I've been thinking we should use virtual modules instead of modifying aliases because I was afraid Vite would make this specific breaking change 😓 -- In any case, perhaps aliases are still valid, just like you did here, if we can incorporate it easily to the core. I'll get back to you when I have some time to double check things 👍