Cannot find module in Inertia SSR context

[fgd007]

Thanks for the great package!

I'm trying to get it to work in a VILT stack with InertiaJS SSR feature, but I run into issues unfortunately.

One of the issues is that the package seems to work well on the client side, but when I run it on a node server it cannot find the language files. It seems to be looking for the files in the root of the app, and not in the /public folder.

Error: Cannot find module '../../js/resources_lang_en_json.js'
Require stack:
- /Users/Name/Websites/TheProjectDir/public/js/ssr.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
    at Function.Module._load (internal/modules/cjs/loader.js:686:27)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.__webpack_require__.f.require (/Users/Name/Websites/TheProjectDir/public/js/ssr.js:28299:28)
    at /Users/Name/Websites/TheProjectDir/public/js/ssr.js:28222:40
    at Array.reduce (<anonymous>)
    at Function.__webpack_require__.e (/Users/Name/Websites/TheProjectDir/public/js/ssr.js:28221:67)
    at webpackAsyncContext (/Users/Name/Websites/TheProjectDir/public/js/ssr.js:27901:29)
    at Object.resolve (/Users/Name/Websites/TheProjectDir/public/js/ssr.js:28365:90) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/Users/Name/Websites/TheProjectDir/public/js/ssr.js' ]
}

I use this in my app.js (which works):

.use(i18nVue, {
    resolve: (lang) => import(`../lang/${lang}.json`),
})

And I use the exact same syntax in my ssr.js file, which doesn't work and triggers the above mentioned error on the node server. The resources are compiled just fine and have the right name, in /public/js

Is there anyone here that tried out this package in combination with InertiaJS and its SSR feature?

[xiCO2k]

Hey @fgd007, thanks for the feedback, for SSR you will need to use require instead of import, and that should solve it.

Let me know if that fixes.

Thanks

[fgd007]

Hi Francisco, thanks for the quick reply!

I tried that but it throws a TypeError: options.resolve(...).then is not a function-error.

I tried this, and numerous variations on it, but to no avail. I'm clearly missing something, but not sure what.

.use(i18nVue, {
    resolve: (lang) => require(`../lang/${lang}.json`),
})

[xiCO2k]

try this: resolve: (lang) => new Promise((resolve) => resolve({ default: require(../lang/${lang}.json) }))

If that works will try to solve it on the package directly.

[fgd007]

Yes, this works @xiCO2k! Thanks!

And I just found out this exact solution mentioned in this issue, sorry for missing this before.

For those who are wondering how to set the locale in the SSR mode (you don't have access to document which this package is relying on) let me share what I did:

setup({app, props, plugin}) {
  ...  
  .use(i18nVue, {
    **lang: props.initialPage.props.locale,**
    resolve: (lang) => new Promise((resolve) => resolve({default: require(`../lang/${lang}.json`)})),
  })
}

And in the HandleInertiaRequests class, I share the app()->getLocale() as locale. This seems to work for now 🙏

[xiCO2k]

no worries at all, if you want to contribute to the README.md with the ssr implementation, would be awesome.

Thanks

[xiCO2k]

Hey @fgd007 just publish a new release that will handle the require well, checkout the example on the README.md.