Cannot override `clientModule` location

[dac09]

Prerequisites

• [X] I have written a descriptive issue title
• [X] I have searched existing issues to ensure the bug has not already been reported

Fastify version

3.29.0

Plugin version

3.0.0-beta.21

Node.js version

v16.13.1

Operating system

macOS

Operating system version (i.e. 20.04, 11.3, 10)

12.3.1

Description

I would like to override the default path of clientModule - the first problem is that the documentation is a little difficult to understand - especially with no TypeScript. Perhaps it would be better to have an example showing where the config object is passed (i.e. its hard to tell whether we configure the vite plugin, or the fastify plugin).

import {createRoute, createErrorHandler} from './fastifyViteConfig.mjs'

await server.register(FastifyVite, {
  root,
  renderer: {
    clientModule: '/path/to/your/server/entry.js' // 👈  here? *(1)
    createRoute,
        createErrorHandler
        // ....
  },
  clientModule: '/path/to/your/server/entry.js' // 👈  or here? *(2)
});

And second, even when I supply clientModule, it seems to error out:

• If I supply a path, it errors out with:

when passing it inside the render object (1):

   throw new Error(`failed to load module for ssr: ${url}`);

and when passed outside (2):

    const modulePath = resolve(config.vite.root, config.clientModule.replace(/^\/+/, ''))
                                                                     ^

TypeError: Cannot read properties of null (reading 'replace')

It doesn't matter whether this path is correct or not

• If I supply an object There seems to be issues loading the createApp function

Steps to Reproduce

1. Rename client/index.js to client/clientModule.js in the React hydration example
2. Supply the clientModule in server.js

   await server.register(FastifyVite, {
   root,
   renderer,
   +  clientModule: 'client/clientModule.js',
   });

3. Run yarn dev

Expected Behavior

• The path to my client module should be used
• Documentation needs an update (happy to PR once I get a bit of direction)

[galvez]

Thanks for the report, looking into this!

[galvez]

Pushed v3.0.0-beta.22 to npm now, should be fixed.

Before we do the final v3.0.0 release, it should have gotten a TypeScript definition for the configuration and tests to make sure this type of problem doesn't happen again. Cheers.

[galvez]

One thing to know though: clientModule expects an absolute path based on the root invite.config.js.

So if root in vite.config.js is join(<dirname>, 'client'), and your client module is client/foobar.js:

{
  clientModule: '/foobar.js'
}

[galvez]

And also, you'll have to change the path in your server vite build call in package.json.

[galvez]

Additional bit of info, the following properties can be set either at the configuration top-level or in renderer. If they're set in renderer, they take precedence over anything you've set at the top-level.

• clientModule
• createErrorHandler
• createHtmlFunction
• createHtmlTemplateFunction
• createRenderFunction
• createRoute
• createRouteHandler
• prepareClient

[dac09]

One thing to know though: clientModule expects an absolute path based on the root invite.config.js.

Useful to know, and thanks for the quick fix @galvez. Can confirm it is now working.

I wonder if it would be possible to use an absolute path instead? What I'm trying to evaluate is whether I can move the clientModule to inside the framework i.e. generate the routes, and hideaway clientModule from the user all together.

I suppose I can always generate the file in a "ignored" folder `.redwood/generatedClientModule.js' and point to it from the vite root.

[galvez]

hideaway clientModule from the user all together.

See https://github.com/fastify/vite-plugin-blueprint — personally I've moved away from this approach because I want to keep fastify-vite and fastify-dx fully transparent, but I might still revisit this.

In any case, vite-plugin-blueprint is what you need.