Javascriptservices: WebPack SPA Services: "cannot find module" when ProjectPath is a different directory

Created on 10 Jan 2017 · 3Comments · Source: aspnet/JavaScriptServices

My react code is stored in the "Web.Platform/Web.Client" directory and my Asp.Net Core application code is stored in "Web.Platform/Web".

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
 {
     HotModuleReplacement = true,
     ReactHotModuleReplacement = true,
     ConfigFile = @"webpack.config.js",
     ProjectPath = @"..\Web.Client\"
});

When I run my project, I get the following error:

System.AggregateException was unhandled by user code
  HResult=-2146233088
  Message=One or more errors occurred. (Call to Node module failed with error: Error: Cannot find module '..\Web.Client\webpack.config.js'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.resolve (internal/module.js:27:19)
    at Object.requireNewCopy (C:\Web.Platform\Web.Client\node_modules\aspnet-webpack\RequireNewCopy.js:6:34)
    at createWebpackDevServer (C:\Web.Platform\Web.Client\node_modules\aspnet-webpack\WebpackDevMiddleware.js:133:47)
    at createWebpackDevServer (C:\Users\harsimranb\AppData\Local\Temp\tmp5544.tmp:74:50)
    at C:\Users\harsimranb\AppData\Local\Temp\tmp5601.tmp:113:19
    at IncomingMessage.<anonymous> (C:\Users\harsimranb\AppData\Local\Temp\tmp5601.tmp:132:38)
    at emitNone (events.js:86:13)
    at IncomingMessage.emit (events.js:185:7)
    at endReadableNT (_stream_readable.js:974:12))
  Source=System.Private.CoreLib
  StackTrace:
       at System.Threading.Tasks.Task.ThrowIfExceptional(Boolean includeTaskCanceledExceptions)
       at System.Threading.Tasks.Task`1.GetResultCore(Boolean waitCompletionNotification)
       at Microsoft.AspNetCore.Builder.WebpackDevMiddleware.UseWebpackDevMiddleware(IApplicationBuilder appBuilder, WebpackDevMiddlewareOptions options)
       at Web.Startup.Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory, IHttpContextAccessor accessor) in C:\Web.Platform\Web\Startup.cs:line 115

Source

harsimranb

👍2

Most helpful comment

I just realized that the ProjectPath is an absolute path, not a relative path. It's obvious because of the temp files, totally missed it. =/ I updated my code to:

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
 {
     HotModuleReplacement = true,
     ReactHotModuleReplacement = true,
     ConfigFile = @"webpack.config.js",
     ProjectPath = Path.Combine(Directory.GetParent(Directory.GetCurrentDirectory()).FullName, "Web.Client")
});

I am no longer getting that error. Can someone confirm that I have this correct now? Also, would be nice to rename ProjectPath to AbsoluteProjectPath, or perhaps update the summary to acknowledge that.

harsimranb on 10 Jan 2017

👍7 🎉2

All 3 comments

I just realized that the ProjectPath is an absolute path, not a relative path. It's obvious because of the temp files, totally missed it. =/ I updated my code to:

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
 {
     HotModuleReplacement = true,
     ReactHotModuleReplacement = true,
     ConfigFile = @"webpack.config.js",
     ProjectPath = Path.Combine(Directory.GetParent(Directory.GetCurrentDirectory()).FullName, "Web.Client")
});

harsimranb on 10 Jan 2017

👍7 🎉2

@harsimranb I did not realise that ProjectPath was absolute until I read this issue. This allowed me to keep the client app in a separate location from the hosting AspNet application. Thank you.

liddellj on 11 Apr 2017

👍1

I know this is old, but I think there's a bug there. Specifying a folder (e.g. "ClientApp") results in node looking for the folder incorrectly, but still relative to the project folder (from ProcMon):

Note the reference to node_modules.