Lazy loaded module is not properly imported in Function bundle

chapelle-ardente · September 13, 2024, 5:29pm

Hello all,

I’m trying to make SSR work using vue 2, vite, and Netlify functions.

I’m able to make it work outside of Netlify functions, but I’m not able to make it work inside a Netlify function.
The problem comes from a lazy loaded route not properly bundled inside the Netlify function

I’ve made a minimal reproduction on this repository :

Steps to reproduce :

git clone git@github.com:sydney-d/vue2-vite-ssr.git
cd vue2-vite-ssr/front
npm install

You can then run either the following (that works):
npm run build && npm run preview:server
If you open : http://localhost:3002/regular it works
If you open : http://localhost:3002/lazy it works

Or run the following (that doesn’t work) :
netlify dev
If you open : http://localhost:8888/regular it works
If you open : http://localhost:8888/lazy it fails

The suspect

It fails because of how this module import is bundled by netlify :

github.com

sydney-d/vue2-vite-ssr/blob/f26f549738afbcc5f3d1e05f417c9689d07e55c4/front/router.js#L11


      
          // router.js
          import Vue from 'vue'
          import Router from 'vue-router'
          import Regular from './Regular.vue'
          
          Vue.use(Router)
          
          const routes = [
              { path: '/', component: Regular },
              { path: '/regular', component: Regular },
              { path: '/lazy', component: () => import('/Lazy.vue') },
          ]
          
          export function createRouter() {
              return new Router({
                  mode: 'history',
                  routes,
              })
          }

It is being bundled and imported this way :

{ path: "/lazy", component: () => Promise.resolve().then(() => (init_Lazy_727d3bac(), Lazy_727d3bac_exports)) }

Whereas in the working scenarion it is being bundled and imported this way :

{ path: "/lazy", component: () => import("./assets/Lazy-727d3bac.js") }

You can also directly reproduce the bug on Netlify :

Works : https://main--lustrous-kringle-485ab9.netlify.app/regular
Fails : https://main--lustrous-kringle-485ab9.netlify.app/lazy

What I tried

I tried playing with node_bundler = "esbuild" and node_bundler = "zisi"
I also tried renaming my function to index.mjs or index.cjs
And I also try without and without type: 'module" in my package.json.

Strangely none of these seemed to have any effect at all, the bundled file always seemed the same.

I tried my best to facilitate your investigation, I hope you’ll be able to help me.

Thanks

hrishikesh · September 14, 2024, 2:55pm

I don’t think esbuild natively supports bundling Vue files. Based on my understanding, it’s Vite that correctly configures esbuilt to handle Vue files and bunlde them as needed.

You’d have to find a similar way to bundle Vue files like Vite does and then use that to bundle the Function. Netlify doesn’t support it out-of-the-box.

Or… use Nuxt.

chapelle-ardente · September 16, 2024, 7:01pm

Hello,

Thank you for your answer, indeed esbuild doesn’t support .vue files, that’s why i’m importing a file that’s already been processed by vite in my function, see here :

github.com

sydney-d/vue2-vite-ssr/blob/f26f549738afbcc5f3d1e05f417c9689d07e55c4/front/functions/render/index.js#L2


      
          import manifest from '../../dist/client/ssr-manifest.json'
          import {render} from '../../dist/ssr/entry-server.js'
          
          export default async (req, context) => {
              console.log(`==========`)
              const url = new URL(req.url)
              console.log(`URL: `, req.url)
              const serverReq = {
                  origin: req.url,
                  url: url.pathname,
                  reqHeaders: { ...req.headers },
                  reqQuery: { ...url.searchParams },

But then netlify seems to be bundling it again, resulting in the lazy imports failing.

Is there a way to prevent netlify from bundling my already bundled files ?
I have tried setting zisi in my config but I think I did it wrong since the bundle was the same, could you check if you are able to use it ?

I know
All of this is meant to be used on a huge existing codebase so migrating to nuxt is not an option…

Thanks

hrishikesh · September 21, 2024, 5:56pm

If all you want is for Netlify to not bundle your output, you could take a look at Frameworks API | Netlify Docs. Specifically:

When a function is created, either directly by a user or by a framework using the Frameworks API, Netlify automatically handles the bundling process by default. This means collecting all the function’s dependencies, including local files and third-party modules, into a deployable package.

Optionally, you can choose to take control over this process. This may be useful if your framework already includes its own bundling pipeline. To opt out of the default bundling mechanism, you must set two configuration properties (nodeBundler and includedFiles) in the function’s config object.

chapelle-ardente · September 21, 2024, 8:52pm

Thanks !

I didn’t know about node_bundler = "none"

why isn’t it mentioned here : File-based configuration | Netlify Docs ?

hrishikesh · September 22, 2024, 5:02am

That’s not a configuration most users would need. It’s something used mainly by frameworks and thus, it’s in Frameworks API.