fix: bannerPlugin webpack injection bug fixed using bundler define

An error was identified when it is injected by BannerPlugin into
webpack, which replaces the paths of routes [id] from __CONFIG___
through the placeholders option.
How this was changed to do the injection through the bundlers define.

Author: jcbsfilho

lib/build/bundlers/base.bunlders.js lib/build/bundlers/base.bundlers.js

@@ -17,6 +17,7 @@ class BaseBundlers {
    * @property {*} localCustom - Local custom data
    * @property {*} preset - The preset configuration
    * @property {string} contentToInject - Content to inject
+   * @property {{[key: string]: string}} defineVars - Define vars on build
    */
 
   /**

lib/build/bundlers/esbuild/esbuild.bundlers.js

@@ -4,7 +4,7 @@ import lodash from 'lodash';
 import { Messages } from '#constants';
 import { debug } from '#utils';
 
-import BaseBundlers from '../base.bunlders.js';
+import BaseBundlers from '../base.bundlers.js';
 import AzionEsbuildConfig from './esbuild.config.js';
 import ESBuildNodeModulePlugin from './plugins/node-polyfills/index.js';
 import ESBuildAzionModulePlugin from './plugins/azion-polyfills/index.js';
@@ -70,6 +70,15 @@ class Esbuild extends BaseBundlers {
         updatedConfig.banner = { js: workerInitContent };
       }
     }
+
+    // define vars
+    if (this.builderConfig.defineVars) {
+      updatedConfig.define = {
+        ...updatedConfig.define,
+        ...this.builderConfig.defineVars,
+      };
+    }
+
     return updatedConfig;
   }
 }

lib/build/bundlers/webpack/webpack.bundlers.js

@@ -7,7 +7,7 @@ import { feedback, debug } from '#utils';
 import { Messages } from '#constants';
 
 import AzionWebpackConfig from './webpack.config.js';
-import BaseBundlers from '../base.bunlders.js';
+import BaseBundlers from '../base.bundlers.js';
 import NodePolyfillPlugin from './plugins/node-polyfills/index.js';
 import AzionPolyfillPlugin from './plugins/azion-polyfills/index.js';
 
@@ -75,6 +75,15 @@ class Webpack extends BaseBundlers {
       }
     }
 
+    // define vars
+    if (this.builderConfig.defineVars) {
+      updatedConfig.plugins.push(
+        new webpack.DefinePlugin({
+          ...this.builderConfig.defineVars,
+        }),
+      );
+    }
+
     // use polyfill with useNodePolyfills and preset mode compute
     const useNodePolyfills =
       (this.builderConfig?.useNodePolyfills ||

lib/build/dispatcher/dispatcher.js

@@ -23,6 +23,19 @@ import {
 
 const isWindows = process.platform === 'win32';
 
+/**
+ * Represents a configuration object.
+ * @typedef {object} BuilderConfig
+ * @property {string} entry - The entry point for the configuration
+ * @property {boolean} useNodePolyfills - Indicates if Node polyfills are being used
+ * @property {boolean} useOwnWorker - Indicates if a custom worker is being used
+ * @property {object} custom - Custom configuration.
+ * @property {*} localCustom - Local custom data
+ * @property {*} preset - The preset configuration
+ * @property {string} contentToInject - Content to inject
+ * @property {{[key: string]: string}} defineVars - Define vars on build
+ */
+
 /**
  * Class representing a Dispatcher for build operations.
  * @example
@@ -261,14 +274,8 @@ class Dispatcher {
    * @param {object} currentConfig.preset - The current preset.
    * @param {object} currentConfig.localCustom - The current localCustom.
    * @param {object} currentConfig.memoryFS - The current memoryFS.
-   * @param {object} config - The configuration object.
-   * @typedef {object} BuildConfig
-   * @property {boolean} useNodePolyfills - Indicates whether to use Node polyfills.
-   * @property {boolean} useOwnWorker - Indicates whether to use a custom worker.
-   * @property {*} localCustom - Custom configuration specific to the local environment.
-   * @property {*} preset - Preset configuration for the build.
-   * @property {string} entry - Path to the temporary entry file for the build.
-   * @returns {BuildConfig} - Returns the configured build object.
+   * @param {BuilderConfig} config - The configuration object.
+   * @returns {BuilderConfig} - Returns the configured build object.
    */
   static configureBuild(currentConfig, config) {
     const { useNodePolyfills, useOwnWorker, preset, localCustom, memoryFS } =
@@ -309,7 +316,7 @@ class Dispatcher {
    * @param {string} context.builId - The build id.
    * @param {string} context.handler - The handler preset file.
    * @param {string} context.prebuild - The prebuild preset file.
-   * @param {BuildConfig} buildConfig - The build configuration object.
+   * @param {BuilderConfig} buildConfig - The build configuration object.
    * @returns {Promise<object>} - A promise that resolves to an object containing the prebuild context.
    */
   static async runPrebuild(context, buildConfig) {
@@ -335,6 +342,7 @@ class Dispatcher {
     const filesToInject = prebuildResult?.filesToInject || null;
     const workerGlobalVars = prebuildResult?.workerGlobalVars || null;
     const builderPlugins = prebuildResult?.builderPlugins || null;
+    const defineVars = prebuildResult?.defineVars || null;
 
     /**
      * Object containing code to be injected in a handler.
@@ -393,6 +401,7 @@ class Dispatcher {
 
     prebuildContext.builderPlugins = builderPlugins;
     prebuildContext.codeToInjectInHandler = codeToInjectInHandler;
+    prebuildContext.defineVars = defineVars;
 
     return Promise.resolve(prebuildContext);
   }
@@ -401,7 +410,7 @@ class Dispatcher {
    * Executes the build process based on the provided build configuration.
    * @param {string} originalEntry - The original entry e.g ./index.js.
    * @param {string} builderCurrent - The builder current e.g esbuild.
-   * @param {BuildConfig} buildConfig - The build configuration object.
+   * @param {BuilderConfig} buildConfig - The build configuration object.
    * @returns {Promise<void>} - A promise that resolves when the build process is completed.
    */
   static async executeBuild(originalEntry, builderCurrent, buildConfig) {
@@ -466,7 +475,8 @@ class Dispatcher {
         { handler, prebuild },
         buildConfig,
       );
-      const { codeToInjectInHandler, builderPlugins } = prebuildContext;
+      const { codeToInjectInHandler, builderPlugins, defineVars } =
+        prebuildContext;
 
       // inject code in handler (build is necessary to pull the modules,
       // this is not a simples code append)
@@ -490,6 +500,11 @@ class Dispatcher {
 
       Dispatcher.setVulcanLibAbsolutePath(buildConfig.entry);
 
+      // prebuildContext.defineVars
+      if (defineVars) {
+        buildConfig.defineVars = defineVars;
+      }
+
       await Dispatcher.executeBuild(this.entry, this.builder, buildConfig);
 
       if (postbuild) {

lib/presets/custom/next/compute/default/prebuild/index.js

@@ -123,9 +123,12 @@ async function run(prebuildContext) {
       // inject on banner the globalThis._ENTRIES
       // this is necessary in the order of use, which needs to be defined at the top of the worker
       _ENTRIES: JSON.stringify({}),
-      __CONFIG__: JSON.stringify(processedVercelOutput.vercelConfig),
       AsyncLocalStorage: JSON.stringify({}),
     },
+    // defineVars (bundlers - define)
+    defineVars: {
+      __CONFIG__: JSON.stringify(processedVercelOutput.vercelConfig),
+    },
     builderPlugins: [],
   };
 }