Issue loading bundle.js

[phoragroup]

I am using the dojo-webpack plugin for the first time so there are probably things that I am missing. I am using Webpack 5.98 and I am able to successfully build the bundles. I am using Dojo 1.17.3. However, when I load the bundle.js when it is first loading the first bundle 208.bundle.js and I am throwing an error where e is blank. Any suggestions?

(t, e, n) => {
var r;
void 0 === (r = function() {
return function(t, e, n, r) {
var i, o, a;
if (t.load(e, n, (function(t) {
o = t,
a = !0,
i && i(t)
}
), {
isBuild: !0
}),
a)
return o;
if (!r)
throw new Error(e + " unavailable");
return (o = new Promise((function(t) {
i = t
}
))).DOJO_WEBPACK_DEFINE_PROMISE = !0,
o
}
}
.apply(null, [])) || (t.exports = r)
}
]]);

This is the plugin section of my webpack.config.js

plugins: [
new DojoWebpackPlugin({
loaderConfig: require("./js/loaderConfig"),
environment: {dojoRoot: "release"}, // used at run time for non-packed resources (e.g. blank.gif)
buildEnvironment: {dojoRoot: "node_modules"}, // used at build time
noConsole: true
}),

	// Copy non-packed resources needed by the app to the release directory
	new CopyWebpackPlugin({
		patterns: [
			{
				context: "node_modules",
				from: "dojo/resources/blank.gif",
				to: "dojo/resources"
			}
		]
	}),

	// For plugins registered after the dojo-webpack-plugin, data.request has been normalized and
	// resolved to an absMid and loader-config maps and aliases have been applied
	new webpack.NormalModuleReplacementPlugin(
		/^css!/, function(data) {
			data.request = data.request.replace(/^css!/, "!style-loader!css-loader!less-loader!")
		}
	),
	new webpack.NormalModuleReplacementPlugin(
		// dojo/domReady (only works if the DOM is ready when invoked)
		/^dojo\/domReady!/, (data) => {
		  const match = /^dojo\/domReady!(.*)$/.exec(data.request);
		  data.request = "dojo/loaderProxy?loader=dojo/domReady!" + match[1];
		}
	)
],

[Yusef-Ahmed]

Something is going wrong with the Dojo module loading mechanism, especially around dynamic loading and promises

• Make sure your loaderConfig is well-formed and matches expectations for Dojo, common mistakes include missing packages or improper paths.
• Sometimes, a misconfiguration with static asset serving causes those bundles to fail to load at runtime.
• While dojo-webpack-plugin works fine with Webpack 5, there are some quirks, especially around chunk loading and dynamic modules, try setting experiments: { topLevelAwait: true } in your Webpack config (some Dojo async patterns may benefit).

[phoragroup]

Thanks for replying.

• Wouldn't a malform loaderConfig prevent the process of compiling?
• Currently, I do not have any static asset except for the dojo/resources/bank.gif that was in the sample that I copied over.
• I am not using any of the Dojo Dijits except for the core base Dijit functions.
• I will try the topLevelAwait.

[phoragroup]

I got it working. Actually my problem was related to how I was doing the initial bootstrap. I was still using my non webpack code and forgot to switch from dojo/domReady to dojo/ready and did not include
"dojo/has!webpack?dojo-webpack-plugin/amd/dojoES6Promise"

I was loading using require and not define in the bootstrap code. I am not sure if that made a difference. Thanks.