Enviornment.ts toggling and correct usage of WebpackDevMiddlewareOptions EnvironmentVariables #378

New Issue

fergalmoran · 2025-08-09T17:16:03Z

fergalmoran commented

2025-08-09 17:16:03 +00:00

Originally created by @jrmcdona on 10/6/2017

I have added a parameter to my webpack commands so that I can swap out the Remote API endpoints. I am flipping between mocked data files and staging endpoints, and I wanted people on the team to be able to do that locally while developing.
webpack --env.target=staging --progress --color
webpack --env.target=mocked --progress --color

In webpack I do the hostreplacement (this all seems to be worknig just fine):

 const environmentFiles = {
        dev: "./ClientApp/src/environments/environment.dev.ts",
        devMocked: "./ClientApp/src/environments/environment.devMocked.ts",
        staging: "./ClientApp/src/environments/environment.staging.ts",
        prod: "./ClientApp/src/environments/environment.prod.ts"
      };
    console.log(env.target)
    const envFile = environmentFiles[env.target];

new AotPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/src/app.module.browser#AppModule'),
                exclude: ['./**/*.server.ts'],
                "hostReplacementPaths": {
                    "./ClientApp/src/environments/environment": `${envFile}`
                  },
                // Set flag to false to allow AOT
	            "skipCodeGeneration": true
            })

My issue is when I run VS Code [Development] Launch Web I get a NodeServices error of target is undefined. So It does not like my env.target from the code sample above.

I added the EnvironmentVariables but this does not work. I am using this wrong? I can comment out the whole UseWebpackDevMiddleware code block and let the code use the manual webpack build I created from the command line, but then I lose HMR. Which I absolutely don't want to lose.

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
                {
                    HotModuleReplacement = true,
                    EnvironmentVariables = new Dictionary<string, string>()
                    {
                    { "target", "staging" }
                    }
                });

I still get the error, full error is below.

Exception has occurred: CLR/System.AggregateException
An exception of type 'System.AggregateException' occurred in System.Private.CoreLib.dll but was not handled in user code: 'One or more errors occurred.'
 Inner exceptions found, see $exception in variables window for more details.
 Innermost exception 	 Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException : Cannot read property 'target' of undefined
TypeError: Cannot read property 'target' of undefined
    at module.exports (c:\Users\v-jormc\Source\Repos\Xbox.Ambassadors\Microsoft.Ambassadors\Microsoft.Ambassadors.Web.Client\webpack.config.js:19:22)
    at createWebpackDevServer (c:\Users\v-jormc\Source\Repos\Xbox.Ambassadors\Microsoft.Ambassadors\Microsoft.Ambassadors.Web.Client\node_modules\aspnet-webpack\WebpackDevMiddleware.js:194:31)
    at createWebpackDevServer (C:\Users\v-jormc\AppData\Local\Temp\104gtbeg.vbc:74:50)
    at C:\Users\v-jormc\AppData\Local\Temp\2we2pffu.pst:114:19
    at IncomingMessage.<anonymous> (C:\Users\v-jormc\AppData\Local\Temp\2we2pffu.pst:133:38)
    at emitNone (events.js:105:13)
    at IncomingMessage.emit (events.js:207:7)
    at endReadableNT (_stream_readable.js:1045:12)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)

Update: Is EnviornmentVariables meant to do what is being talked about in this thread in regards to the EnvParameter? Or are we still needing something else to achieve what I am trying to do?
https://github.com/aspnet/JavaScriptServices/issues/816

*Originally created by @jrmcdona on 10/6/2017* I have added a parameter to my webpack commands so that I can swap out the Remote API endpoints. I am flipping between mocked data files and staging endpoints, and I wanted people on the team to be able to do that locally while developing. webpack **--env.target=staging** --progress --color webpack **--env.target=mocked** --progress --color In webpack I do the hostreplacement (this all seems to be worknig just fine): ``` const environmentFiles = { dev: "./ClientApp/src/environments/environment.dev.ts", devMocked: "./ClientApp/src/environments/environment.devMocked.ts", staging: "./ClientApp/src/environments/environment.staging.ts", prod: "./ClientApp/src/environments/environment.prod.ts" }; console.log(env.target) const envFile = environmentFiles[env.target]; new AotPlugin({ tsConfigPath: './tsconfig.json', entryModule: path.join(__dirname, 'ClientApp/src/app.module.browser#AppModule'), exclude: ['./**/*.server.ts'], "hostReplacementPaths": { "./ClientApp/src/environments/environment": `${envFile}` }, // Set flag to false to allow AOT "skipCodeGeneration": true }) ``` My issue is when I run VS Code [Development] Launch Web I get a NodeServices error of target is undefined. So It does not like my env.target from the code sample above. I added the EnvironmentVariables but this does not work. I am using this wrong? I can comment out the whole UseWebpackDevMiddleware code block and let the code use the manual webpack build I created from the command line, but then I lose HMR. Which I absolutely don't want to lose. ``` app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true, EnvironmentVariables = new Dictionary<string, string>() { { "target", "staging" } } }); ``` I still get the error, full error is below. ``` Exception has occurred: CLR/System.AggregateException An exception of type 'System.AggregateException' occurred in System.Private.CoreLib.dll but was not handled in user code: 'One or more errors occurred.' Inner exceptions found, see $exception in variables window for more details. Innermost exception Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException : Cannot read property 'target' of undefined TypeError: Cannot read property 'target' of undefined at module.exports (c:\Users\v-jormc\Source\Repos\Xbox.Ambassadors\Microsoft.Ambassadors\Microsoft.Ambassadors.Web.Client\webpack.config.js:19:22) at createWebpackDevServer (c:\Users\v-jormc\Source\Repos\Xbox.Ambassadors\Microsoft.Ambassadors\Microsoft.Ambassadors.Web.Client\node_modules\aspnet-webpack\WebpackDevMiddleware.js:194:31) at createWebpackDevServer (C:\Users\v-jormc\AppData\Local\Temp\104gtbeg.vbc:74:50) at C:\Users\v-jormc\AppData\Local\Temp\2we2pffu.pst:114:19 at IncomingMessage.<anonymous> (C:\Users\v-jormc\AppData\Local\Temp\2we2pffu.pst:133:38) at emitNone (events.js:105:13) at IncomingMessage.emit (events.js:207:7) at endReadableNT (_stream_readable.js:1045:12) at _combinedTickCallback (internal/process/next_tick.js:138:11) at process._tickCallback (internal/process/next_tick.js:180:9) ``` Update: Is EnviornmentVariables meant to do what is being talked about in this thread in regards to the EnvParameter? Or are we still needing something else to achieve what I am trying to do? https://github.com/aspnet/JavaScriptServices/issues/816

fergalmoran closed this issue

2025-08-09 17:16:03 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#378