Not working with nested plugin app

[houssemFat]

Hi , thank you for all the effort behind elysia and elysia-static.

Description

I'm trying to use a SSR plugin and i need theelysia-static plugin only on production. So i will check if i'm in prod or dev mode and i will use a custom plugin that will include elysia-static in the Elysia app (nested app for plugin). When we use the plugin in the main Elysia instance (the instance that acts as server) , the plugin works fine , but when we use it with a nested Elysia app (a plugin Elysia app), the plugin don't work as expected (I get 404).

Below my folder structure.

Usage with the main Elysia instance : OK

Works fine when using the plugin with main Elysia instance. The http://localhost:2000/assets/index-BRPLnx8F.js url returns the file.

main.js

let elysia = new Elysia(); 

...
elysia = elysia
            .use(staticPlugin({
                prefix: "/",
                assets: path.join(process.cwd(), 'src', 'client', 'dist', 'client')
            }))
            .use(SSRPlugin);
    
elysia.listen(2000)

Usage with Nested plugin : NOK

the http://localhost:2000/assets/index-BRPLnx8F.js returns NOT_FOUND

SSRPlugin.js

export const SSRPlugin = async () => {
    const app = new Elysia({
        name: 'vite',
        seed: {}
    })
    app
        // not working with nested
        .use(staticPlugin({
            prefix: "/",
            // assets: 'src/client/dist/client'
            assets: path.join(process.cwd(), 'src', 'client', 'dist', 'client')
        }))
     ..... 
    return app
}

main.js

let elysia = new Elysia(); 
... 
elysia = elysia
            .use(SSRPlugin);
elysia.listen(2000)

Info

  "dependencies": {
    "@bogeychan/elysia-logger": "^0.0.15",
    "@elysiajs/html": "^0.8.0",
    "@elysiajs/static": "^0.8.0",
    "@elysiajs/server-timing": "^0.8.0",
    "elysia-compression": "^0.0.7",
    "elysia": "^0.8.8",
    .....
  }

[adicco]

I can confirm the same thing. Wrapping the static plugin in a separate Elysia app, like this:

export const serveStaticFiles = new Elysia({ name: '~/lib/serveStatic' }).use(
  staticPlugin(
    NODE_ENV === 'development'
      ? {
          headers: {
            'Cache-Control':
              'no-store, no-cache, must-revalidate, proxy-revalidate',
            Expires: '0',
            'Surrogate-Control': 'no-store',
            Pragma: 'no-cache',
          },
        }
      : {},
  ),
);

raises the following TypeScript error:

lib/serveStatic.ts:6:3 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type 'Promise<Elysia<"", { request: {}; store: {}; derive: {}; resolve: {}; }, { type: {}; error: {}; }, {}, {
}, {}, false>>' is not assignable to parameter of type 'Promise<{ default: Elysia<any, any, any, any, any, any, any>; }>'.
      Property 'default' is missing in type 'Elysia<"", { request: {}; store: {}; derive: {}; resolve: {}; }, { type: {}; erro
r: {}; }, {}, {}, {}, false>' but required in type '{ default: Elysia<any, any, any, any, any, any, any>; }'.

  6   staticPlugin(
      ~~~~~~~~~~~~~
  7     NODE_ENV === 'development'
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
... 
 17       : {},
    ~~~~~~~~~~~
 18   ),
    ~~~

[aberigle]

Hi, @houssemFat did you find any workaround?

EDIT:
just found out that using .mount instead of .use works.

app.mount(SSRPlugin.fetch)

[bogeychan]

Thanks for reporting these findings!

You've to await the plugin as a workaround.

import { Elysia } from "elysia";
import { staticPlugin } from "@elysiajs/static";

export const SSRPlugin = async () => {
  return new Elysia({ name: "vite" }).use(await staticPlugin({}));
};

@adicco I can't reproduce this type error, can you try the latest versions?