I have a project that is using npm and webpack for our CSS and JavaScript bundling, which works just fine in VS 2017.
However, we are now using VS 2019 and after installing the extensions for both the NPM and Webpack Task Runners to be the same as the VS 2017 installation.
In VS 2019, I get the following error.
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
So, I opened VS 2017 with same project and it still operates fine, bundling CSS and JavaScript with no errors.
This was a known issue in the preview VS 2019 releases, my current versions in
Software versions:
- VS 2019 Version 16.2.3
- VS 2017 Version 15.9.15
- NPM Task Runner 1.4.90 (same for both)
- Webpack Task Runner 1.5.94 (same for both)
Does anyone know how to fix this, as currently I am having to open VS 2017 just to run the Task Runner?
UPDATE
Interesting side note. If I open up a command prompt and run
npm run build
from the project folder, it works, so is this just some fault within the task runner?
Latest version of Webpack requires you to install Webpack CLI on your own now.
I think somehow, VS 2017 has locked into a specific version of Webpack while VS 2019 has installed latest Webpack due to ^ version flag in your package.json.
To fix the issue, open up a terminal to the location of package.json and run:
npm install webpack-cli --save-dev
Then try again in VS 2019.
Hope this helps!
Related
So I would like to use my Macbook to build a new app but the tools I typically use for SASS, mainly the Web Compiler extension, are not supported on Mac. Is there a similar tool I can use on Mac in VS to compile Sass?
I'm using Visual Studio 2019 for Mac, Community Edition.
Looking at the Web Compiler extension it seems to use node-sass to compile the .sass files.
If you can get that working on the command line then you could do one of the following:
Run that command from the Terminal window.
Add a post or pre-build step to the project which runs that command.
Look at installing the BuildWebCompiler NuGet package which looks to be used by the Web Compiler extension to enable files to be generated on build.
Install the Task Runner Explorer extension and setup a package.json with a command that will run node-sass. Then the NPM task runner should be able to detect that and run it.
After I upgraded to Visual Studio 2017, I'm not able to see the latest version of the npm package in the package.json file, and unable to upgrade. For every package, I see Unavailable.
This is what I see in the package.json:
Well that behaviour is strange. I'm using VS Code 2017 and it works like it should. Maybe uninstall and install VS again? Is your NPM working fine?
When trying to npm install a node project in a Windows7 machine I am suffering from the inglorious error message:
MSBUILD : error MSB3428: Could not load the Visual C++ component "VCBuild.exe". To fix this, 1) install the .NET Framework 2.0 SDK, 2) install Microsoft Visual Studio 2005 or 3) add the location of the component to the system path if it is installed elsewhere.
Because I am under Cygwin I have already installed gcc ($ gcc -v and $ g++ -v respond in both Cygwin and cmd).
How can I tell npm to use gcc to compile instead of the vcbuild.exe that I don't have installed?
Note: I have already tried node-gyp and it did not work.
Note2: I know for sure the code runs without problems in linux.
Here is what sorted out my problem and the steps that I took to reach the long-awaited solution:
Installed Visual Studio Community but the VCBuild.exe was not there still.
Installed Microsoft Build Tools 2015 and tried to install the affected module as: npm install bcrypt --msvs_version=2015 but I got the following error:
error MSB8036: The Windows SDK version 8.1 was not found. Install the required version of Windows SDK or change the SDK version in the project property pages or by right-clicking the solution and selecting "Retarget solution".
My last shot was to install Visual Studio Express for Desktop and after npm install bcrypt --msvs_version=2015 I manage to npm install and npm start my app in Windows7!!
Lastly I uninstalled Visual Studio Community and Microsoft Build Tools 2015.
Note I had to remove the bcrypt module from the dependencies in package.json and install it as npm install bcrypt --msvs_version=2015 inside my app folder.
Context:
I am configuring my ASP.NET 4.x project to use bower to manage client side packages, using VS 2015 Update 2. (I am following this stackoverflow guide/answer
All cool. However after created bower.json, and seeing output I've noticed the following output line:
"C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\Bower.cmd" install --force-latest
This means that VS does not even use the npm installed bower (which is under the
/node_modules/bower) instead launching some globally installed (it was not me) bower.
Question:
What else npm can be used in Visual Studio 2015 ASP.NET project especially besides of installing bower?
In case of the answer is nothing, Question 2:
Can I just eliminate npm (package.json), and rely my bower.json in the Visual Studio project (and delete /node_modules)
The whole scenario also begs for the Question+:
Where should I configure Visual Studio to use the npm installed bower instead of the existing "global" installation in C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\Bower.cmd
npm can also be used to install packages for Gulp or Grunt tasks, which can then be run by the Task Runner Explorer in VS 2015.
You can configure Visual Studio to use a different version of Bower in Tools->Options->Projects and Solutions->External Web Tools. Move $(PATH) to the top of the list to use a globally installed version, or add a new project-relative path to the top of the list.
I am trying to use bower inside Visual Studio 2013.
First I installed bower (not bower.js) via nuget's Package Manager Console.
Then I thought I could simply type
PM> bower init
inside the PMC to generate the bower.json.
But then it gave me this error.
bower : The term 'bower' is not recognized...
PS. The path of the PM> is pointing to C:\MyWebProject\MyWebProject\.bin.
What am I missing here??
Open the command prompt
Navigate to web project folder
Run bower init
You should have bower.json created by answering all answers on the cmd prompt.
Srinivas accurately described the steps needed to get you started with a bower.json in your root folder, which is where you want to start. You now have two main tasks:
Define dependencies - use Package Intellisense.
Install dependencies - use Grunt Launcher. They will be installed to the bower_components folder.
Reference dependencies - simply add them to you project (as links).
For more information see Introducing Gulp, Grunt, Bower, and npm support for Visual Studio.
Note that Visual Studio 2015 (currently in preview) has built-in, first-class support for all of the above: Manage Client-Side Web Development in Visual Studio 2015, Using Grunt and Bower.