No task runner configurations are found? - reactjs

Question

I have (freshly installed) Visual Studio Professional 2017 (V 15.9.4), a Visual Studio solution with with multiple projects, a single .sln file and package.jsons of the projects in the respective project folders exampleCoorp.API, exampleCoorp.UI, etc. The frontend project is written in React, the others in C#.
When I navigate to View > Other Windows > Task Runner Explorer (originally devolved by Mads Kristens, see marketplace.visualstudio.com). Since we also have a React part, I have the extension NPM Task Runner installed as well.
I am expected something like the following (screenshot from my team mates whose project-setup instruction I followed):
However, the actual result for me looks different:
The error I have to understand comes from the shown Visual Studio panel:
No task runner configurations are found.
But why? And more importantly, how can I fix it? Is there a workaround?
There is only a single google-hit [developercommunity.visualstudio.com] which claims that the (only?) cause could be a misplaced package.json file:
Both problems are caused by the fact that Visual Studio’s NPM integration does not support a package.json file that is in a subfolder instead of the project root. Microsoft’s own official Angular project template requires that the package.json be placed in the /ClientApp subfolder, which is not something that is going to change.
This is clearly not my issue here. Any help hint is appreciated!

Answer 1

The NPM Task Runner extension will only find tasks where the Visual Studio project folder contains a "package.json" file. If this file is in a sub-folder (or parent folder, even if you consider this the main "project" folder), you will not see those tasks in Task Runner Explorer.
The questioner uses the word "project" to mean two different things. He says that he has a "React project with multiple sub-projects". A "Visual Studio project" cannot have "sub-projects", so I am wondering where exactly the package.json file was. [He subsequently changed the wording, but I think this may have been the most likely reason for problem.]
If you create a package.json file in one of your VS project folders you will immediately see TR Explorer add that project to its drop-down list and you can select to see its tasks in TR Explorer. You will not need to restart VS or even do a re-build.
There are some projects created by the SPA templates, which put the client code in a sub-folder of the project folder. For example, "dotnet new angular" puts the client code in the sub-folder "ClientApp" along with its package.json file. In this case, if you want to have access to these tasks from TR Explorer, you need to do the following: Create a package.json file in the VS project folder that will proxy to the ones you want to use. For example:
{
"scripts": {
"serve": "cd ClientApp && npm run serve",
"build": "cd ClientApp && npm run build"
},
"-vs-binding": {
"BeforeBuild": [
"build"
]
}
}

Answer 2

The Task Runner Explorer eventually works as it should after I performed the following steps (in no specific order):
I marked two of my sub-projects as startup project, one of which has a package.json in the the subfolder (which is essentially the root folder of that sub-project).
I (re-)installed the NPM Task Runner and restarted Visual Studio afterwards.
My colleagues suggested also to reboot of the machine, but I am not sure that this was necessary.