Webpack dev middleware failed because of an error while loading 'aspnet-webpack' when env is Development (Docker)

[jjwilliams42]

I nearly have the ASP.NET Core 2 + React app bootstrapped into Docker, but for my CD pipeline, I need to be able to set the ASPNETCORE_ENVIRONMENT variable at docker run time.

This issue may be related:

#227

The image builds in normal (production) use, I can browse the react app, hit the endpoints to get the weather sample data. Using the following command:

docker run -p 8080:80 webapp

But as soon as I use
docker run -p 8080:80 -e "ASPNETCORE_ENVIRONMENT=Development" webapp

It fails with

warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed.
info: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[0]
      User profile is available. Using '/root/.aspnet/DataProtection-Keys' as key repository; keys will not be encrypted at rest.
info: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[58]
      Creating key {8088dc69-e67c-4f7f-96e2-39c75656e5e1} with creation date 2017-10-07 21:42:01Z, activation date 2017-10-07 21:42:01Z, and expiration date 2018-01-05 21:42:01Z.
warn: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[35]
      No XML encryptor configured. Key {8088dc69-e67c-4f7f-96e2-39c75656e5e1} may be persisted to storage in unencrypted form.
info: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[39]
      Writing data to file '/root/.aspnet/DataProtection-Keys/key-8088dc69-e67c-4f7f-96e2-39c75656e5e1.xml'.

Unhandled Exception: System.AggregateException: One or more errors occurred. (Webpack dev middleware failed because of an error while loading 'aspnet-webpack'. Error was: Error: Cannot find module 'aspnet-webpack'
    at Function.Module._resolveFilename (module.js:527:15)
    at Function.Module._load (module.js:476:23)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/tmp/rug25yw5.1rs:83:19)
    at __webpack_require__ (/tmp/rug25yw5.1rs:20:30)
    at createWebpackDevServer (/tmp/rug25yw5.1rs:62:26)
    at /tmp/vsq2llxc.qzw:114:19
    at IncomingMessage.<anonymous> (/tmp/vsq2llxc.qzw:133:38)
    at emitNone (events.js:105:13)
Current directory is: /app
) ---> Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException: Webpack dev middleware failed because of an error while loading 'aspnet-webpack'. Error was: Error: Cannot find module 'aspnet-webpack'
    at Function.Module._resolveFilename (module.js:527:15)
    at Function.Module._load (module.js:476:23)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/tmp/rug25yw5.1rs:83:19)
    at __webpack_require__ (/tmp/rug25yw5.1rs:20:30)
    at createWebpackDevServer (/tmp/rug25yw5.1rs:62:26)
    at /tmp/vsq2llxc.qzw:114:19
    at IncomingMessage.<anonymous> (/tmp/vsq2llxc.qzw:133:38)
    at emitNone (events.js:105:13)
Current directory is: /app

   at Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance.<InvokeExportAsync>d__7`1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()
   at Microsoft.AspNetCore.NodeServices.HostingModels.OutOfProcessNodeInstance.<InvokeExportAsync>d__13`1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()
   at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.<InvokeExportWithPossibleRetryAsync>d__10`1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.<InvokeExportWithPossibleRetryAsync>d__10`1.MoveNext()
   --- End of inner exception stack trace ---
   at System.Threading.Tasks.Task`1.GetResultCore(Boolean waitCompletionNotification)
   at Microsoft.AspNetCore.Builder.WebpackDevMiddleware.UseWebpackDevMiddleware(IApplicationBuilder appBuilder, WebpackDevMiddlewareOptions options)
   at MYPROJECT.Startup.Configure(IApplicationBuilder app, IHostingEnvironment env) in /app/MYPROJECT.Web/Startup.cs:line 51
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at Microsoft.AspNetCore.Hosting.ConventionBasedStartup.Configure(IApplicationBuilder app)
   at Microsoft.AspNetCore.Hosting.Internal.AutoRequestServicesStartupFilter.<>c__DisplayClass0_0.<Configure>b__0(IApplicationBuilder builder)
   at Microsoft.AspNetCore.Hosting.Internal.WebHost.BuildApplication()
   at Microsoft.AspNetCore.Hosting.WebHostBuilder.Build()
   at MYPROJECT.Program.Main(String[] args) in /app/MYPROJECT.Web/Program.cs:line 17

I understand that there are probably reasons why the React template is not supported for docker (yet), but I feel like I'm sooo close. Any guidance would be appreciated.

Side Note: I've set appsettings.json and appsettings.Development.json to always be included in output just to see if that would work.

Dockerfile

#Build Image
FROM microsoft/aspnetcore-build:1.0-2.0 AS build-env
COPY src /app
WORKDIR /app
RUN ["dotnet", "restore", "MYPROJECT.sln"]
RUN set -ex; \
	if ! command -v gpg > /dev/null; then \
		apt-get update; \
		apt-get install -y --no-install-recommends \
			gnupg2 \
			dirmngr \
		; \
		rm -rf /var/lib/apt/lists/*; \
	fi && curl -sL https://deb.nodesource.com/setup_8.x | bash - && apt-get update && apt-get install -y build-essential nodejs

# copy everything else and build
COPY . ./
RUN dotnet publish -c Release -o out MYPROJECT.sln

#Runtime Image
FROM microsoft/aspnetcore:2.0.0
RUN set -ex; \
	if ! command -v gpg > /dev/null; then \
		apt-get update; \
		apt-get install -y --no-install-recommends \
			gnupg2 \
			dirmngr \
		; \
		rm -rf /var/lib/apt/lists/*; \
	fi && curl -sL https://deb.nodesource.com/setup_8.x | bash - && apt-get update && apt-get install -y build-essential nodejs
WORKDIR /app
COPY --from=build-env /app/MYPROJECT.Web/out ./
ENTRYPOINT ["dotnet", "MYPROJECT.Web.dll"]

[jjwilliams42]

Nevermind, this was a result of staring at the problem too long.

The issue is that in Development, the app.UseWebpackDevMiddleware is used, which may or may not be supported. Setting other various environments still work (Beta, Staging, etc...).

In development, simply using IIS Express / Kestrel works fine. For production / beta / staging environments, setting the env on the docker run command works as expected.

[k11k2]

@jackjwilliams Are you running fine in Development env?

[shubhrajitb]

I am getting below error please help me on this.

•   InnerException	{Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException: 
  

Webpack dev middleware failed because of an error while loading 'aspnet-webpack'.
Error was: Error: ENOENT: no such file or directory, lstat 'C:\ContainerMappedDirectories'
at Object.realpathSync (fs.js:1430:7)
at toRealPath (internal/modules/cjs/loader.js:202:13)
at tryFile (internal/modules/cjs/loader.js:198:22)
at tryPackage (internal/modules/cjs/loader.js:179:10)
at Function.Module._findPath (internal/modules/cjs/loader.js:284:18)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:578:25)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (C:\Users\ContainerAdministrator\AppData\Local\Temp\rzvqlxpj.bl4:83:19)
Current directory is: C:\app

at Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance.d__71.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Runtime.CompilerServices.TaskAwaiter1.GetResult()
at Microsoft.AspNetCore.NodeServices.HostingModels.OutOfProcessNodeInstance.d__131.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Runtime.CompilerServices.TaskAwaiter1.GetResult()
at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.d__101.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.<InvokeExportWithPossibleRetryAsync>d__101.MoveNext()} System.Exception {Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException}