Welcome to dojo-webpack-plugin Discussions!

[chuckdumont]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community.

[g2nconnell]

I have a question regarding dojo/i18n. The default 'en-us' locale works fine. Adding and using another locale is failing in findModule. The reason is that although req.absMids has the entry key 'nls/cloudCenterStringResource' and value of "./assets/js/nls/cloudCenterStringResource.js", which is correct, but for some reason the japanese translation key is 'assets/js/nls/ja-jp/cloudCenterStringResource', which is wrong. It should be 'nls/ja-jp/cloudCenterStringResource'.

My question is what in the webpack config file controls what the absMids key would be?

Using the debugger, I changed the value of the key from 'assets/js/nls/ja-jp/cloudCenterStringResource' to 'nls/ja-jp/cloudCenterStringResource' and the app worked correctly for the japanese locale.

[chuckdumont]

If your root bundle is assets/js/nls/cloudCenterStringResource, then the locale specific bundle for ja-jp should be in assets/js/nls/ja-jp/cloudCenterStringResource.

Also, your root bundle should indicate which locales you have bundles for. For example:

define({
  root: {
   greeting: "Hello, world!"
  },
  "ja-jp": true,
});

See https://dojotoolkit.org/reference-guide/1.9/dojo/i18n.html

[g2nconnell]

Thank you for the quick response. Yes, the root bundle is assets/js/nls/cloudCenterStringResource. The locale specific bundle is in assets/js/nls/ja-jp/cloudCenterStringResource (.js). The root bundle (.js file) has exactly the the format you specified. The locale-specific bundle just has:
define({
greeting: "????"
});
In my dojo config file I have:
dojoConfig.supportedLocales = ['en-us', 'ja-jp'];
For the webpack config file I have this:
new DojoWebpackPlugin({
loaderConfig: require("./public/dojoLoaderConfig"),
async: true,
locales: ['en', 'ja-jp'],
noConsole: true // remove for debugging
}),
My understanding is if I omit locales altogether it should pick all of them up.

With all of this, the entries in the "req.absMids" map are wrong ONLY for the locale-specific entry. If I correct that in the debugger by changing assets/js/nls/ja-jp/cloudCenterStringResource to nls/ja-jp/cloudCenterStringResource, it all works and I see Japanese text (when I set my locale to japanese).
What is causing the wrong absMid entry (for findModule()) and how to correct?

Thanks.

[g2nconnell]

Clarification: When I say:
If I correct that in the debugger by changing assets/js/nls/ja-jp/cloudCenterStringResource to nls/ja-jp/cloudCenterStringResource,
I'm not moving files, I mean I'm changing the string value of the key in req.absMids.

[chuckdumont]

I'm not sure what the issue is. I use i18n locales without any issues. Perhaps you could provide a test case that reproduces the problem.

[g2nconnell]

Some more information:

The method registerAbsMids gets generated for me as follows (abbreviated):
registerAbsMids({
...
// "dojo/i18n!nls/cloudCenterStringResource":"./node_modules/dojo-webpack-plugin/loaders/dojo/i18n/index.js!./assets/js/nls/cloudCenterStringResource.js",
// "assets/js/nls/ja-jp/cloudCenterStringResource":"./assets/js/nls/ja-jp/cloudCenterStringResource.js",
/******/ "nls/cloudCenterStringResource":"./assets/js/nls/cloudCenterStringResource.js",
...
});

Notice that there's a "dojo/i18n!nls" entry and a "nls/cloudCenterStringResource" entry for the base bundle but only "assets/js/nls/ja-jp/" for the locale-specific bundle.

Any thought on what generates these values?

[chuckdumont]

The code that generates the absMids for the i18n modules can be found here: https://github.com/OpenNTF/dojo-webpack-plugin/blob/master/loaders/dojo/i18n/index.js.

If you want to dive on this, I'd start there. Otherwise, if you provide a test case, I can take a look.

[g2nconnell]

Thank you. I put break points in the file you specified and debugged my webpack build. Here's what I see happening:
index.js line 67: this._module.absMid has a value of "dojo/i18n!nls/cloudCenterStringResource".
line 72: resMatch has a value of [
"C:/Users/Glen/github/cloudcenter/cloudcenter-client-webapp-js/assets/js/nls/cloudCenterStringResource.js",
"C:/Users/Glen/github/cloudcenter/cloudcenter-client-webapp-js/assets/js",
"cloudCenterStringResource.js",
"",
]
line 84: locale is undefined.
line 87: absMid is 'nls/cloudCenterStringResource' and absMidMatch is null.
line 88: requestedLocales is undefined so '*' is used
line 89: const availableLocales = getAvailableLocales(requestedLocale, bundle); Where availableLocales comes back as ['ja-jp'] and requestedLocale is undefined and bundle is { "ja-jp": true, root: {...}}

line 91: localRes is "C:/Users/Glen/github/cloudcenter/cloudcenter-client-webapp-js/assets/js/nls/ja-jp/cloudCenterStringResource.js"
line 93: absMidMatch is null so the 'else' branch is taken which runs:
localeAbsMid = path.relative(this._compiler.context, localeRes).replace(/[\]/g, '/');
After this localAbsMid is "assets/js/nls/ja-jp/cloudCenterStringResource.js"

line 102: localAbsMid is "assets/js/nls/ja-jp/cloudCenterStringResource" and is pushed onto deps.
line 108: deps is [
"assets/js/nls/ja-jp/cloudCenterStringResource",
"C:/Users/Glen/github/cloudcenter/cloudcenter-client-webapp-js/assets/js/nls/cloudCenterStringResource.js?absMid=nls/cloudCenterStringResource",
]

line 114: buf is [
"define(["dojo/i18n", "C:/Users/Glen/github/cloudcenter/cloudcenter-client-webapp-js/node_modules/dojo-webpack-plugin/loaders/dojo/runner.js"",
","assets/js/nls/ja-jp/cloudCenterStringResource"",
","C:/Users/Glen/github/cloudcenter/cloudcenter-client-webapp-js/assets/js/nls/cloudCenterStringResource.js?absMid=nls/cloudCenterStringResource"",
"], function(loader, runner) {",
" return runner(loader, "nls/cloudCenterStringResource", webpack_require.dj.c(), true);",
"});",
]

If, in the debugger, I change the value of localeAbsMid (line 98) from "assets/js/nls/ja-jp/cloudCenterStringResource.js" to "nls/ja-jp/cloudCenterStringResource.js" and continue, everything works and I see Japanese text in the UI.

If I then examine the resulting ccwa-bundle.js created by the webpack dev build, I see this:
// registerAbsMids({
...
// "dojo/i18n!nls/cloudCenterStringResource":"./node_modules/dojo-webpack-plugin/loaders/dojo/i18n/index.js!./assets/js/nls/cloudCenterStringResource.js",
// "nls/ja-jp/cloudCenterStringResource":"./assets/js/nls/ja-jp/cloudCenterStringResource.js",
// "nls/cloudCenterStringResource":"./assets/js/nls/cloudCenterStringResource.js",
...
/******/ });

Which looks correct.

[g2nconnell]

My question here is: When the default bundle specifies a locale (e.g. "ja-jp": true), the code to handle that:
availableLocales.forEach(loc => {
const localeRes = ${resMatch[1]}/nls/${loc}/${resMatch[2]};
var localeAbsMid;
if (absMidMatch) {
localeAbsMid = ${absMidMatch[1]}/nls/${loc}/${absMidMatch[2]};
} else {
localeAbsMid = path.relative(this._compiler.context, localeRes).replace(/[\]/g, '/');
}
if (localeAbsMid.endsWith('.js')) {
localeAbsMid = localeAbsMid.substring(0, localeAbsMid.length-3);
}
bundledLocales.push(loc);
deps.push(localeAbsMid);
});
does not seem to ever result in a value for localeAbsMid that would just start with "nls/....", which is what works. How would you every get 'nls/ja-jp/cloudCenterStringResource' as a localeAbsMid ?

Thanks

[g2nconnell]

I forgot to mention that we are using: "dojo-webpack-plugin": "^3.0.2"

Here are the local changes I made to C:\Users\Glen\github\cloudcenter\cloudcenter-client-webapp-js\node_modules*dojo-webpack-plugin\loaders\dojo\i18n\index.js*
in order to get locale-specific bundles to load properly.

I tested building dev and prod artifacts and I ran both dev and prod artifacts and was able to see the correct language strings in the UI (japanese in this case): (see lines in BOLD)

var locale;
if (resMatch[3]) {
	locale = resMatch[2];
}
if (!locale) {
	// this is the default bundle.  Add any locale specific bundles that match the
	// requested locale.  Default bundles specify available locales
	let absMidMatch = regex.exec(absMid);
	(requestedLocales || ["*"]).forEach(requestedLocale => {
		const availableLocales = getAvailableLocales(requestedLocale, bundle);
		availableLocales.forEach(loc => {
			**// const localeRes = `${resMatch[1]}/nls/${loc}/${resMatch[2]}`;
			const nlsLocaleRes = `nls/${loc}/${resMatch[2]}`;**
			var localeAbsMid;
			if (absMidMatch) {
				localeAbsMid = `${absMidMatch[1]}/nls/${loc}/${absMidMatch[2]}`;
			} else {
				**// localeAbsMid = path.relative(this._compiler.context, localeRes).replace(/[\\]/g, '/');
				localeAbsMid = nlsLocaleRes;**
			}
			if (localeAbsMid.endsWith('.js')) {
				localeAbsMid = localeAbsMid.substring(0, localeAbsMid.length-3);
			}
			bundledLocales.push(loc);
			deps.push(localeAbsMid);
		});
	});

}

What do you think?

[g2nconnell]

Sorry, it looks like the bold feature doesn't work inside the code section. Look for the '**' demarcated strings (2 of them).

[g2nconnell]

I'd like to summarize the behavior I've observed. You can refer to the debugging session details above for a concrete example.
The code uses AMD define to bring in "dojo/i18n!nls/cloudCenterStringResource".
loaders/i18n/index.js processes this by breaking up the above string into "dojo/i18n" and "nls/cloudCenterStringResource".
It creates an absMid value in this case of "nls/cloudCenterStringResource", which is for this default bundle and works fine.

It then reads this default bundle and sees that there are locale-specific bundles ('ja-jp') in this case, because the default bundle is an object with properties "root" and "ja-jp": true.

It now creates an absMid for the locale-specific bundle but, it creates it as "./assets/js/nls/ja-jp/cloudCenterStringResource", which is the correct location of the resource bundle file but, it is not how the app requests it.

When the browser's locale is set to "ja-jp" and requests the page, the request comes in as "dojo/i18n!nls/ja-jp/cloudCenterStringResource". This gets broken up into "dojo/i18n" and "nls/ja-jp/cloudCenterStringResource".
It now searches for a matching absMid (in req.absMids) for "nls/ja-jp/cloudCenterStringResource" but does not find a match and throws a "Error: Module not found" error because the value in req.absMids is "./assets/js/nls/ja-jp/cloudCenterStringResource".

I proposed a change in the loaders/i18n/index.js code to produce "nls/ja-jp/cloudCenterStringResource", instead of "./assets/js/nls/ja-jp/cloudCenterStringResource".

If possible, please take a look.

You mention that dojo/i18n works for you. Is this true even of non-default locales? I figure either our code configuration has an issue or, the case of non-default locale doesn't work. It seems like it's standard behavior for dojo/i18n to request a non-default (or any) bundle as "dojo/i18n!nls/${loc}/${bundlename}" so, I don't see how generating an absMid value of anything other than starting with "nls/${loc}/" would work.

Thanks for your help.

[g2nconnell]

Thank you!! I've been having a hard time trying to strip down our app to have something to send to you so, this is a big relief.
Please let me know when I can get the new version.
Thank you again very much.

[g2nconnell]

I tested your fix with our application by copying the changed lines from
https://github.com/OpenNTF/dojo-webpack-plugin/pull/364/files
and I'm happy to confirm that it all works correctly now. Thank you.

When would you expect a new version of dojo-webpack-plugin that includes this fix to become available?
Thanks again.

[chuckdumont]

I have another fix I want to get in before making a new release. For now you can use 3.0.5-rc0

[chuckdumont]

@g2nconnell - v3.0.5 has been published

[g2nconnell]

Thank you!