BrowserLink does not work for ASP.NET Core on Visual Studio 2017 RTM

Question

I get the following error in the browser when I enable BrowserLink for my ASP.Net Core 1.1 application and I think because of that the BrowserLink does not work.

Browser Link: Exception thrown when trying to invoke Browser Link extension callback "microsoft.visualstudio.web.browserlink.sourcemappingextensionfactory.getCssMappingData":
System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation. ---> System.NullReferenceException: Object reference not set to an instance of an object.
   at Microsoft.VisualStudio.Web.Extensions.Common.Helpers.VsWebUrlUtil.EnsureAbsoluteUrl(IVsHierarchy hierarchy, Uri& path)
   at Microsoft.VisualStudio.Web.Extensions.Common.Helpers.VsWebUrlUtil.GetSimpleVsWebUrlFromUrl(IVsHierarchy hierarchy, Uri url, ILocationContainer& container)
   at Microsoft.VisualStudio.Web.Extensions.Common.Helpers.VsWebUrlUtil.GetVsWebUrlFromUrl(IVsHierarchy hierarchy, Uri url)
   at Microsoft.VisualStudio.Web.Extensions.Common.Helpers.LazyLocationContainer.LazyLocationContainerFromUrl.CreateActualLocationContainer()
   at Microsoft.VisualStudio.Web.Extensions.Common.Helpers.LazyLocationContainer.GetPhysicalPath(Uri& physicalPath)
   at Microsoft.VisualStudio.Web.Extensions.Common.Helpers.DocumentLocation.Microsoft.VisualStudio.Web.Extensions.Common.Helpers.IDocumentLocation.GetPhysicalPath(Uri& physicalPath)
   at Microsoft.VisualStudio.Web.BrowserLink.SourceMappingExtension.getCssMappingData(String cssUrl, String[] selectors)
   --- End of inner exception stack trace ---
   at System.RuntimeMethodHandle.InvokeMethod(Object target, Object[] arguments, Signature sig, Boolean constructor)
   at System.Reflection.RuntimeMethodInfo.UnsafeInvokeInternal(Object obj, Object[] parameters, Object[] arguments)
   at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture)
   at Microsoft.VisualStudio.Web.BrowserLink.ClientMessaging.DispatchMessage(BrowserLinkConnection connection, MessageArgs obj)

Browser Link: Exception thrown when trying to invoke Browser Link extension callback "microsoft.visualstudio.web.browserlink.autosyncextensionfactory.trackCssDocuments":
System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation. ---> System.NullReferenceException: Object reference not set to an instance of an object.
   at Microsoft.VisualStudio.Web.Extensions.Common.Helpers.VsWebUrlUtil.EnsureAbsoluteUrl(IVsHierarchy hierarchy, Uri& path)
   at Microsoft.VisualStudio.Web.Extensions.Common.Helpers.VsWebUrlUtil.GetSimpleVsWebUrlFromUrl(IVsHierarchy hierarchy, Uri url, ILocationContainer& container)
   at Microsoft.VisualStudio.Web.Extensions.Common.Helpers.VsWebUrlUtil.GetVsWebUrlFromUrl(IVsHierarchy hierarchy, Uri url)
   at Microsoft.VisualStudio.Web.Extensions.Common.Helpers.LazyLocationContainer.LazyLocationContainerFromUrl.CreateActualLocationContainer()
   at Microsoft.VisualStudio.Web.Extensions.Common.Helpers.LazyLocationContainer.GetPhysicalPath(Uri& physicalPath)
   at Microsoft.VisualStudio.Web.Extensions.Common.Helpers.DocumentLocation.Microsoft.VisualStudio.Web.Extensions.Common.Helpers.IDocumentLocation.GetPhysicalPath(Uri& physicalPath)
   at Microsoft.VisualStudio.Web.Extensions.Common.Helpers.DocumentLocation.Microsoft.VisualStudio.Web.Extensions.Common.Helpers.IDocumentLocation.get_PhysicalFileExists()
   at Microsoft.VisualStudio.Web.BrowserLink.AutoSyncExtension.trackCssDocuments(String[] trackHrefs, String[] untrackHrefs)
   --- End of inner exception stack trace ---
   at System.RuntimeMethodHandle.InvokeMethod(Object target, Object[] arguments, Signature sig, Boolean constructor)
   at System.Reflection.RuntimeMethodInfo.UnsafeInvokeInternal(Object obj, Object[] parameters, Object[] arguments)
   at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture)
   at Microsoft.VisualStudio.Web.BrowserLink.ClientMessaging.DispatchMessage(BrowserLinkConnection connection, MessageArgs obj)

Browser Link: Failed to invoke return value callback:
TypeError: Cannot read property 'files' of null

I have configured my App as follow:

.csproj config:

<ItemGroup>
    <PackageReference Include="AutoMapper" Version="5.2.0" />
    <PackageReference Include="AutoMapper.Extensions.Microsoft.DependencyInjection" Version="1.2.0" />
    <PackageReference Include="BundlerMinifier.Core" Version="2.4.337" />
    <PackageReference Include="IdentityModel" Version="2.5.1" />
    <PackageReference Include="Microsoft.AspNetCore.Authentication.Cookies" Version="1.1.1" />
    <PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="1.1.1" />
    <PackageReference Include="Microsoft.AspNetCore.Diagnostics" Version="1.1.1" />
    <PackageReference Include="Microsoft.AspNetCore" Version="1.1.1" />
    <PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.2" />
    <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.1" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="1.1.1" PrivateAssets="All" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="1.1.1" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer.Design" Version="1.1.1" PrivateAssets="All" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="1.1.0" PrivateAssets="All" />
    <PackageReference Include="Microsoft.Extensions.Configuration.EnvironmentVariables" Version="1.1.1" />
    <PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="1.1.1" />
    <PackageReference Include="Microsoft.Extensions.Logging" Version="1.1.1" />
    <PackageReference Include="Microsoft.Extensions.Logging.Console" Version="1.1.1" />
    <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="1.1.1" />
    <PackageReference Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="1.1.1" />
    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="1.1.0" PrivateAssets="All" />
    <PackageReference Include="Microsoft.VisualStudio.Web.BrowserLink" Version="1.1.0" />
    <PackageReference Include="Serilog.Extensions.Logging.File" Version="1.0.0" />
</ItemGroup>

<ItemGroup>
    <DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="1.0.0" />
    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="1.0.0" />
</ItemGroup>

<Target Name="PrepublishScript" BeforeTargets="PrepareForPublish">
    <Exec Command="bower install" />
    <Exec Command="dotnet bundle" />
</Target>

And in the Startup.cs file in Configure method I have called app.UseBrowserLink();.

UPDATE

It seems the error is related to the *.css files. If I remove all my CSS links I only get the following error:

Browser Link: Failed to invoke return value callback:
TypeError: Cannot read property 'files' of null

Answer 1

I fixed this issue by removing the default browserlink package

Microsoft.VisualStudio.Web.BrowserLink

and installing

Microsoft.VisualStudio.Web.BrowserLink.Loader

This package was mentioned in this guide from Microsoft docs. Not sure what the difference is but it seems to of solved my issues.

Answer 2

I landed on this thread first when searching for a fix for browser link in .NET Core with VS2017.

All I was missing was

app.UseBrowserLink();

in the Startup.cs Configure method.

See Browser Link with ASP.NET Core v1.0 in Visual Studio 2015 Update 3

(This is probably better suited as a comment but I don't have enough rep.)