-
-
Notifications
You must be signed in to change notification settings - Fork 207
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
./i18n.js Critical dependency: the request of a dependency is an expression #851
Comments
If you delete |
Same thing here, your solution helped me, thanks. |
If i delete loadLocaleFrom i cant load my locales because theyre not in the default folder. Structure:
|
We have the same problem and also fixed it with We also had to catch the error on the
|
I'm having the same issue after a redeploy (no code changes, just content publishing) on Vercel. Apparently they made Node v.16 the default since May 9th 2022 - but despite setting v.14 (as engine as well as in settings) it appears not to be the culprit as I initially thought. Unfortunately, the workarounds shown above don't work for me, since I also depend on loadLocaleFrom: (locale, ns) => {
return import(`@app/translations/${lang}/${ns}`).then(m => m.default);
} I tried to circumvent this using Does anyone have more details when and how this 'new' behaviour is triggered? Any way to opt-out if this? EDIT: the workaround does work, even with |
The problem with using |
Just looked at the code and saw that the default loader is passed as a string: https://github.com/vinissimus/next-translate/blob/49f580c6d292712a0720a104de3b487e7c11d4ae/src/plugin/utils.ts#L6-L7
module.exports = {
loadLocaleFrom: '(lang, ns) => import(`./locales/${lang}/${ns}.json`).catch(e => console.error(e)).then((m) => m.default)',
}
Update: no it does not - because it checks if the |
When disabling the loader the imports still work - see #741 (comment) for an example. |
Yep, I don't recommend From what I have seen it fails in the new version of Next.js when the file is from node (it has _app.js import { loadSomethingWithDynamicImport } from '../example'
export default function App(){
// ...
}
App.getInitialProps = async (context) => {
const res = await loadSomethingWithDynamicImport('bla')
} Is working fine when export function loadSomethingWithDynamicImport(param) {
return import(`something/${param}`).then(r => r.default)
} However it crash with the same error if function loadSomethingWithDynamicImport(param) {
return import(`something/${param}`).then(r => r.default)
}
module.exports = { loadSomethingWithDynamicImport } Does anyone have any idea how to solve it without having to use |
With the default |
Of course, it is not the right solution, but until we find the best way to fix it (all suggestions are welcome), you can do a workaround and not use the const workaround = require('next-translate/lib/cjs/plugin/utils.js')
// As a workaround you can change the string of the defaultLoader, this is working fine
workaround.defaultLoader = '(l, n) => import(`@next-translate-root/src/locales/${l}/${n}.json`).then(m => m.default)';
module.exports = {
...config,
// loadLocaleFrom: (lang, ns) =>
// import(`./src/locales/${lang}/${ns}.json`).then((m) => m.default),
} Any suggestions from anyone on how to fix it internally in the library? Thanks! |
The workaround doesn't work for me 😢 any suggestion ? willing to help |
I just use this option: ...
loadLocaleFrom: (lang, namespace) => require(`./lang/${lang}/${namespace}.json`),
... but I'm having issues with the latest version 1.5, so I had to downgrade to 1.4 |
@aralroca I get this error: |
Actually.... I just tested the workaround and it seems to work fine. This is the correct code:
|
Cool. The ideal is to solve it at the library level without this workaround. I am not very clear on how. It is like a bug (or normal behavior on purpose) of SWC, that crashes the dynamic import only when a file with module.exports has it. |
Same problem, I had to downgrade to 1.3.0.
|
Is this workaround not working for you? #851 (comment) . Better not to use require in order not to increase the bundle size. |
same issue here with next 12.2.5 |
I solved this problem by manually adding the .babelrc file, and using next/babel to process it will not report an error, you can try it @mattiaz9 @fabien @derkoe @andresz1 @marcusnunes |
It's because the bug is added by SWC, by adding the babel you stop using the new Next.js rust compiler. I recommend using the workaround until we find the best solution: #851 (comment) |
I just moved my locales from
|
Yep... The new rust compiler of Next.js (SWC) interprets the The same error is reproducible without function loadSomethingWithDynamicImport(param) {
return import(`something/${param}`).then(r => r.default)
}
module.exports = { loadSomethingWithDynamicImport }` To solve the problem from NextTranslate we would have to see how we can solve this of the |
Same here, I have to roll back to next@12.1.0 and problem resolved |
Upgraded to next@12.3.2, need to return promise loadLocaleFrom: (lang, ns) => {
// You can use a dynamic import, fetch, whatever. You should
// return a Promise with the JSON file.
// yaml already being transformed by webpack plugin
const m = require(`./locales/${lang}/${ns}.yml`)
return Promise.resolve(m)
} |
work for me using this 👌🏻 |
I'm using files in |
@felipeferrarini @urmauur @donthijackthegit This issue was introduced after the SWC rust compiler, this compiler doesn't support dynamic import in Node (files with module.export and require). As a workaround, I recomend this for now This workaround is avoiding the |
Hello everyone 😊 We are considering making an important change to our library's configuration, where the loadLocaleFrom: (locale, namespace) => `src/translations/${namespace}_${locale}.json`, With this change, we would be able to use our own Webpack plugin to calculate all available languages and namespaces and place them in separate chunks, thereby improving the performance of the application. This plugin is already implemented in our library and has other functionalities in addition to this. Nevertheless, we will retain the option of returning a promise, to allow users to make fetch or implement their own loading logic. However, before proceeding with this change, we would like to hear your opinion. How do you think this modification would affect your use of the library? Are there any specific use cases in which this modification could cause problems? Any other suggestions or comments on the matter? We appreciate your time and welcome any feedback you may provide. ❤️ |
Sounds reasonable. Have you considered going a step further and just offer an option to change the root path?
The library already expects this folder structure out of the box and seems a bit overkill to use |
@lukevella thanks for the comment, I like the idea of keeping things simple, and I had thought about it, although I don't like having two configurations for something similar. 🤔 I've seen many cases of people changing the structure of namespaces, either because they support many types of English (UK, US) but many translations are shared and it doesn't make sense to have them duplicated, or namespaces in other formats that are not json, etc... All of these cases should also benefit from having the namespace chunks separated, and that's why I propose the change above. This issue was introduced because the SWC does not support dynamic import here now and by replacing it with require, it puts all the namespaces in the same chunk, making each page load all the translations instead of just the ones necessary for the page. With this change, everything is solved; if you want to change the folder, the structure, load it from external resources with a fetch, etc. |
Sure, it would just be great if there wasn't a need to switch from
Either way seems like a step in the right direction as not needing to use dynamic imports in the config would be great for DX. |
I'll keep that in mind, it's a good idea, thank you @lukevella . Maybe we can extend its use to:
|
As a workaround, until the new functionality is implemented, if someone wishes to use the const namespaces = ['common', 'dynamic', 'home', 'more-examples', 'error'];
const locales = ['en', 'ca', 'es'];
module.exports = nextTranslate({
webpack: (config) => {
namespaces.forEach((namespace) => {
locales.forEach((locale) => {
config.optimization.splitChunks = {
...config.optimization.splitChunks,
cacheGroups: {
...(config.optimization.splitChunks.cacheGroups || {}),
[`${namespace}_${locale}`]: {
test: new RegExp(`src/locales/${locale}/${namespace}.*$`),
name: `${namespace}_${locale}`,
chunks: 'all',
enforce: true,
},
}
}
})
})
return config
},
}) Then is not a problem using {
// ... Rest of config
loadLocaleFrom: async (locale, namespace) =>
require(`./src/locales/${locale}/${namespace}.json`),
} |
@aralroca |
wow...! Thanks to detect it @geonwoomun! 😅 So we need to find a solution for this... Do you have some proposals? for now that we are planing to release 2.0.0 we can add a breaking change to fix |
@aralroca Let me show you part of my code... _app.tsx export default appWithI18n(App, {
...i18nConfig,
loadLocaleFrom: (lang, ns) => {
const langCode = lang ? supportLanguagesMap[lang] : fallbackLanguage;
return import(`../../public/locales/${location}/${langCode}/${ns}.json`);
},
}); i18n.js const i18nConfig = {
locales: ~~~,
defaultLocale: 'en',
pages: {
'*': ['common'],
},
loader: false, // this is required
interpolation: {
prefix: '{',
suffix: '}',
},
defaultNS: 'common',
}; By doing this, I confirmed that it works as well as when using babel, is divided into chunks, and does not load all at first. |
@geonwoomun the problem with dynamic imports in SWC is in files with |
I don't think it's a bug of swc. I'm not sure if I got your sentence, though. |
@aralroca |
@kdy1 A summary of this issue: In previous versions of Next.js prior to version 12, dynamic import in the configuration worked correctly. It allowed This was possible because the configuration was read within the Webpack plugin that we have, which is executed within the However, this stopped working correctly in versions equal to or greater than Next.js 12, and the following error occurred using dynamic import:
It worked with Babel because it was supported with this plugin, which suggests that it is not supported with SWC. Starting from version 12, -return import(`./locales/${langCode}/${ns}.json`)
+return require(`./locales/${langCode}/${ns}.json`) It loads the translations and the application works fine... but unlike before, it loads all the translations instead of just the one that the page needs. Since then, we have been looking for a way to solve this at the configuration level, to find an alternative to the dynamic Of course, the most practical solution would be for dynamic import to continue working. After researching, dynamic import only works with files with ECMAScript 6 Modules, but with files such as CommonJS it does not. Moving this configuration logic directly to the page (ECMAScript 6 modules) does work for dynamic |
Dynamic import is a standard and it's supported by swc |
AFAIK there's auto_cjs pass which changes module mode to commonjs based on the content. Can you file an issue? |
Nevermind, I'll use vercel/next.js#40231 |
@kdy1 thanks for this PR vercel/next.js#45836 ! Great news 🎉🥳 This issue is already fixed in Next.js 13.1.7-canary.11 without any change on Next-translate configuration, you can still use dynamic import inside 👍 😊 |
For anyone else upgrading to next-translate@2 but still stuck on Next.js 12 (e.g. because Preact is not yet supported by Next.js 13), you need to make some changes to the workaround mentioned in #851 (comment): - const workaround = require('next-translate/lib/cjs/plugin/utils.js')
+ const workaround = require('next-translate-plugin/lib/cjs/utils.js'); And the workaround should not be placed in I placed it directly in Glad to hear it's been fixed in Next.js, though! Thanks to everyone involved 😄 |
so ive finally managed to get my __namespace loading with the solutions from above, but the only reason I jumped through the hoops trying to get this working is because I need to manually set the language through getInitialProps, which I now cant do anymore because it uses the locale coming from |
Hello guys, I cant find a solution... I have nextJs 13 and next-translate-plugin. In local works perfect but when i upload to Vercel´s server, the translations does not works... Do you know what could be? I am stucked more than 2 days and i am lost already.... Thanks!!! |
Today after doing some package updates e.g. next@12.1.6 next-translate crashes while trying to load the locale.
Im importing my locales from a package inside my monorepo with:
./i18n.js
That worked for me for like 2 months now.
But now i get following error:
After a while of trial and error i got my code working with:
Is the error here with me or is there a package error?
The text was updated successfully, but these errors were encountered: