next-translate-plugin with @module-federation/nextjs-mf, useTranslation not working!
What version of this package are you using?
when i used next-translate-plugin with @module-federation/nextjs-mf, useTranslation not working! help
What operating system, Node.js, and npm version?
node v18.16.1
What happened?
when module.exports = nextTranslate(); works fine!
when
module.exports = nextTranslate(webpack: (config, options) => {
const location = options.isServer ? 'ssr' : 'chunks'
config.plugins.push(
new NextFederationPlugin({
name: 'main',
filename: 'static/chunks/main.js',
exposes: {
},
remotes: {
remoteHeader: `remoteHeader@http://localhost:9000/_next/static/${location}/remoteHeaderEntry.js`,
},
shared: {},
extraOptions: {
automaticAsyncBoundary: true
}
})
)
return config
})
import useTranslation from 'next-translate/useTranslation' t('mc_common_footer_about')
render: mc_common_footer_about What did you expect to happen? translation words~~ Are you willing to submit a pull request to fix this bug?
when i debugger, I found I18nProvider not exec, and lang=''
Thanks to report it. What version of next-translate and next-translate-plugin are you using? BTW; Do you know if this used to work before and has stopped working in the new versions? Thanks
thanks your comment, i found that next-translate-plugin's template code didn't insert bundle. when work with federation
import ${INTERNAL_CONFIG_KEY} from '@next-translate-root/i18n' import __appWithI18n from 'next-translate/appWithI18n' ${pagePkg.getCode()} export default __appWithI18n(${pageVariableName}, { ...${INTERNAL_CONFIG_KEY}, isLoader: true, skipInitialProps: ${skipInitialProps}, ${addLoadLocalesFrom(existLocalesFolder)} });
"next-translate": "^2.5.0", "next-translate-plugin": "^2.4.4",
here is the data of NEXT_DATA: looks like ok! {"props":{"pageProps":{"__lang":"uk-UA","__namespaces":{"common":{"mc_common_footer_about_us":"Про нас","mc_common_footer_about":"Про біржу MEXC",............."mc_common_sidebar_customer_hotline_working_hours":"Working Hours: {{workingHours}}"}}},"__N_SSG":true},"page":"/","query":{},"buildId":"development","isFallback":false,"gsp":true,"locale":"uk-UA","locales":["en-US","ru-RU","tr-TR","vi-VN","id-ID","ja-JP","ko-KR","pt-PT","es-ES","it-IT","zh-TW","zh-CN","fa-IR","de-DE","fil-PH","fr-FR","th-TH","ar-AE","uk-UA"],"defaultLocale":"en-US","scriptLoader":[]}
BUT page shows the key words: mc_common_footer_about
i debug the code,i get the resolutions:
first, @module-federation/nextjs-mf will insert a template code to _app.page.js
"use client";
(globalThis || self).placeholderModuleEnsure = () => {
throw new Error('should not exec');
import('react');
import('react-dom');
......
when next-translate-plugin webpack loader build the code,
loader will find string of use client,then it will not insert templateCode:
import ${INTERNAL_CONFIG_KEY} from '@next-translate-root/i18n'
import __appWithI18n from 'next-translate/appWithI18n'
${pagePkg.getCode()}
export default __appWithI18n(${pageVariableName}, {
...${INTERNAL_CONFIG_KEY},
isLoader: true,
skipInitialProps: ${skipInitialProps},
${addLoadLocalesFrom(existLocalesFolder)}
});
Any workaround for this?