Not compiling in VS2017

[esausilva]

Installed product versions

• Visual Studio: VS 2017 Community
• This extension: 1.11.328

Description

WebCompiler not working in VS2017. I do not see the WebCompiler menu option when I Right-Click a Less file and when I make changes to the Less file, those changes do not reflect in the CSS file.

Expected behavior

Generate (compile) a new CSS file after changes have been made to LESS file.

[esausilva]

Just noticed the compiling works, but only when I build/re-build the project. In VS2015 I didn't have to build/re-build the project in order to compile the LESS file. The compiling was instant, as soon as I saved the LESS file.

If that can be fixed in VS2017 would be great!!

[bogdankyba]

Same for me, it's a pity it doesn't work in realtime 👎

[Verscienta]

Same here.

[billpeace]

Same here.

[namelessound]

To those who do not see compiler menu. I had same issue on VS2017 Community edition and my problem was that I had open solution as folder not as web site. When I have opened as web site ,I can see compiler menu but have different issue - it compiles empty css file.

[ichpuchtli]

.jsx not compiling on save on Visual Studio 2017.

[billpeace]

https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebExtensionPack2017 Need install Web Essentials 2017

[esausilva]

@billpeace Web Essentials just installs a bunch of plug-ins, WebCompiler is one of them, and I really do not need/want all of those plug-ins

[ndtien84]

Yes, Same here. It's not auto compile javascript file on Save. But it work when I save .less file

If that can be fixed in VS2017 would be great. Thanks Mads

[brentkilboy]

Having the same issue in VS 2017 Pro, .net core mvc project. Save or Build does not auto compile javascript. Only if I manually right click and choose re-compile file. Tried deleting the Temp folder as mentioned in https://github.com/madskristensen/WebCompiler/issues/158 but that didn't help either.

I found if you do these steps it will compile on build, but not on save still: "In ASP.NET MVC and WebForms projects you can enable compilation as part of the build step. Simply right-click thecompilerconfig.json file to enable it."

[sinrise]

I am experiencing this issue in my SCSS files. I have a single file, main.scss, that includes my other SCSS partials, and those load other partials; a pretty typical setup. In previous versions, and using VS2015, if I save any one of those partials, it will regenerate the main.css file and pulls in all imported files (as expected) but in 2017, with the latest version of this plugin, saving any file except main.scss does not regenerate the main.css file. Status message at the bottom of the VS2017 window says "compiled successfully" yet nothing was compiled.

[idansh]

Same here, compiles an empty fcss file from less or SCSSS

[hasangursoy]

Same here with latest VS 2017

[MathieuMarchant]

+1 for Visual Studio Enterprise 2017 15.2 (26430.14)

Recompile after file change -> doesn't work Trying to recompile with the short cut from within the file -> doesn't work Explicitly right clicking on the file and selecting recompile -> works

Now I'm overcoming this issue by using the babel watcher. Hope this issues gets resolved soon, cause it defeats the purpose of installing it.

[gbfromhb]

I had 15.3 Preview 5, and it was compiling on save. I update to 15.3 Preview 6 and it stopped compiling.

[leemcmullen]

I'm running VS2017 Community 15.4.4.

Same issue, not auto re-compiling when saving. Selecting the file in the solution explorer and Shift-Alt-Q (or right click, Re-compile) is working.

Web Compiler is a fantastic extension and adds functionality which should be part of the standard product in my opinion. I've been using it in VS2015 to manage LESS, SCSS and JSX source files without an issue for a long time, it would be great if we could just get the auto-save working again in VS2017.

[esausilva]

@leemcmullen Oh I will have to try Shift+Alt+Q, thanks 👍

[ianwitherow]

In case this helps anyone, it started working again for me after I removed the compiled files (.css, .min.css, .map, etc) and recompiled.

Now it recompiles automatically when I save the .less file.

[esausilva]

@ianwitherow Thanks, will try this

[leemcmullen]

@ianwitherow This didn't work for me unfortunately, what version of VS are you using? Also, did you just remove the compiled files or did you also remove and re-add the entry in compilerconfig.json for each one too?

[ianwitherow]

@leemcmullen I'm on VS2017 Professional, just upgraded from 2013. At some point I tried removing the files nested underneath the .less file, manually recompiled (right click .less > Web Compiler > Re-compile File), and noticed that it automatically recompiled on save from that point on. I didn't end up doing anything in compilerconfig.json.

Just curious - is yours not working for any of your files? Even newly created ones?

[SteinTheRuler]

Same issue here on Visual Studio 2017 Community. Sass files compile on save, but not .js files. I have to right click and select re-compile file or use ctrl + shift + q

would be great to have this fixed!

[amastaneh]

+1

[leemcmullen]

@ianwitherow No, it's not working for any files, existing or newly created ones unfortunately.

[leemcmullen]

Quick update. I'm now using VS2017 15.5.4.

LESS files are now auto-compiling on save which is great. JSX files still not though.

Also noticed some strange behaviour when trying to manually compile (Shift-Alt-Q) from within a JSX file. When the file is first opened and a change is made, then attempt to manually compile, the status bar flashes very briefly saying "Compiling" quickly followed by "Compiled successfully". However when checking the output files, nothing has actually been compiled. If I then right-click the file in solution explorer-->Web Compiler-->Re-compile file, it does compile properly. Then after that, going back to the editor, making changes and compiling again via the keyboard shortcut starts working properly!

[vylesk]

LESS compilation has been working fine for me, however, today I had 1 file suddenly stop for me. In the end, it was a syntax error in my LESS. I was seeing no Intellisense warnings in the editor or build/compile errors in either the Errors window or Output. The exact problem line was "box-shadow: 0px 0px 5px: @color-secondary-teal;" (with 2 colons). I fixed the syntax and compiling started again.

[sunnybhoy]

I was having problems with SCSS files until I re-installed via Tools .. Extensions/Updates (v1.11.326). Now auto updates CSS on save as usual.

[tahirjadoon]

I have gone through this thread and still not compiling. Plz take a look at the following: https://stackoverflow.com/questions/50869932/less-compiler-issue-probably

[adamplabarge]

For me with VS2017, .scss files compile on save, but .es6, .jsx files do not. Have tried everything listed in this and other threads to fix. No luck. Would be great to get this resolved.

[mackcoding]

Also having this issue. Any idea on fix?

[esausilva]

I have tried all of these "solutions", but none has worked so far. I'm giving up on this and using Parcel.js to compile my SASS files.

I will create a tutorial for those that are not familiar with JS tooling. I'll do one with Parcel, one with Gulp and one with Webpack 🔥🤘

[esausilva]

I finished the guide using Webpack, You can read it here

Let me know your thoughts in the post comments section.

[studiodonderslag]

I uninstalled my NuGet version of Web Compiler and reinstalled via Tools > Extenstions & Updates > Online > VS Marketplace > Tools > Build and it worked immediately after a restart.

[ezymb]

Works for me so long as the files are included in the project - otherwise they are ignored by the plugin.

[Struemmeck]

Webcompiler Context menu does not appear for typescript files (.ts and .tsx). I have installed it via Tools > Extenstions & Updates > Online > VS Marketplace > Tools > Build. It was working some weeks ago without any problems. I can not see any relation to the project or project type as in a newly created project the same problem exists. A solution for this problem would be much appreciated.

Currently installed Versions:

• Visual Studio Professional 2017 Version 15.9.3
• Webcompiler Version 1.12.394

[zandiarash]

after updating to VS 2017 Version 15.9.5 compile with save doesn't work for me. I can right click on scss files and compile but nested css not compiled.

Alternatively I'm using compilesass You can download from here

[Patryk-Szylin]

@esausilva a fix for me was to update VS2017 to latest version, after that I began to see compilerconfig.json in my Task Runner Explorer and "on-save" compilation started working again.

And also I'm using Tool Extension "Web Compiler" as opposed to Nuget Package

[jarodhanko]

@Patryk-Szylin Does compile on save work for you on jsx files? It works on scss files for me, but not jsx. I pretty much gave up and just added a key with autohotkey to open up solution explorer, find the active file and then trigger alt + shift + q to compile, but it is not nearly as nice as compile on save (I tried binding this macro to ctrl + s with a toggle button, but then I constantly was compiling files I didn't want to on accident).

[leemcmullen]

I have an update. I decided to try and work out what the problem was. I've never done any extension dev before so this is new territory for me but I think I've worked out what the problem is.

The compile-on-save feature works by listening for a text editor being opened, if it's a certain type of file being edited then an event handler is added to effectively run when the file is saved to disk. It's in this event handler that the re-compile takes place.

This all happens in WebCompilerVsix/FileListeners/SourceFileCreationListener.cs.

Now, whether this code is applied to the current editor being opened seems to be determined by [ContentType] attribtutes decorating the class. As you can see there's an attribute for both jsx and javascript, among some other types (e.g. LESS, SCSS, CoffeeScript etc). This is where the problem is. As I said, the process to attach the custom save handler (which runs the compile) is attached during the process of the text editor being opened. However for js and jsx files, this never seems to run and therefore the custom save handler is not being added.

Now, for me at least, this all works fine whenever a LESS file is being edited. I don't use CoffeeScript but I created a new file to test it and it seems to work fine for those files too.

So therefore I tried a few different ContentType attribute values but nothing seems to work specifically for js and jsx files. I had a quick dig around but couldn't fine a definitive list of all ContentType values and whatever I did try, it didn't seem to have any effect.

The only way I could get it to work was by using the code as the attribute value i.e. [ContentType("code")]. This does successfully run for js and jsx files but also seems to run for any other type of code file too! It's easy to then just test for for whether the file name ends in js or jsx and add the save handler accordingly but that doesn't feel ideal and presumably the whole point of having the ContentType atttribute is to ensure it only runs against certain types of file.

I've got the sln setup and debugging fine so happy to try other approaches if anyone can suggest anything. It certainly feels like there's a simple ContentType value which should fix this!

In the meantime I'm going to manually install my version and see if there's any performance degradation in day to day use of the technique above.

[leemcmullen]

So further to my last comment, I've done a bit more digging.

I worked out that the ContentType being used when the js or jsx files are being edited is actually TypeScript i.e. [ContentType("TypeScript")].

I then found an article I read a while back talking about using the TypeScript language service for JavaScript.

So I then tried disabling the new language service and the original code started working again! This is located at Tools --> Options --> Text Editor --> JavaScript/TypeScript --> Language Service --> Enable the new JavaScript language service

Thinking it through, it kind of makes sense now. The original code was designed to be used prior to the new language service so jsx or javascript content types were accurate but when using the "new" language service, VS sees the content type as TypeScript and therefore doesn't catch the file being opened and subsequently doesn't add the save handler which performs the compile.

It seems to me that simply adding [ContentType("TypeScript")] to the list of content types should fix this. I'll add a PR.

In the meantime, disabling the new language service should mean the code starts compiling on save again. Naturally you'll lose the benefits of the updated editor experience/language service though, which isn't ideal either.

If the PR doesn't get merged or the marketplace isn't updated then I can make the VSIX available with the fix applied to anyone who wants it in the meantime.

[jarodhanko]

@leemcmullen It might work to redefine the ContentType for .jsx files, similar to the way a few other file extensions are defined https://github.com/madskristensen/WebCompiler/tree/master/src/WebCompilerVsix/ContentType and explained https://docs.microsoft.com/en-us/visualstudio/extensibility/walkthrough-linking-a-content-type-to-a-file-name-extension?view=vs-2017

I don't have the time at the moment to give this a shot, but I'll give it a shot when I do have time.

I am not sure why the jsx ContentType would have been defined in VS2015 but not VS2017, but maybe like you mentioned, the name was simply changed.

---

You added a comment as I was typing, but I'll leave the above comment in case it is useful. Thanks for looking into it.

Unfortunately your work around didn't work for me. I need the new language service anyways, but I disabled it to see if it would compile, and even after a restart it refused to work. I didn't look into it too much though.

[leemcmullen]

@jarodhanko Hey Jarod. Yes, before I worked out it was using TypeScript as the ContentType, I'd tried defining a specific ContentType similar to e.g. SassContentTypeDefinition.cs for JSX but that didn't have any effect.

Strange the language service disabling didn't work for you, worked straight after a restart for me. Like you said though, it's academic if you rely on the newer language service anyway.

I've added a PR for the fix.

[calculuswhiz]

One year later... still not merged in...

:(

[mbarmettler]

still an issue - also on VS 2019. Seems like the nightly builds are also failing since a long time. Very sad - since its the only VS Extension which works that neat and confinient - i used it in several projects since now....

[ezymb]

My single data-point - Not having an issue with it. However, to get it working, I had to un-install it, then re-install the latest version.