Wednesday, June 7, 2017

How To Solve "Missing Name After . Operator" When Using YUI Compressor.Net And EcmaScript.Net


I have been working with a few projects I created that utilize YUI Compressor.Net. I am using this library instead of the native Asp.Net bundling and minification elements because I have found that the .Net libraries mangle css and js in certain cases. I decided to use YUI Compressor.Net after doing some testing with it and discovering that it took care of several of the issues I was having.

The only issue with this .Net port of the very popular YUI Compressor project is that the project itself is old. It worked right out of the box, but it is old. When you look at the project information on Nuget, the project was last updated by the original developer in September of 2014 (the "current" version is 2.7.0). The great thing is, as is the case with a lot of projects created out of need, this project has recent contributions from people who use it currently and update it for their needs and, altruistically, share their changes with the rest of us.

You can take a look at the project on Nuget here -
You can take a look at the project code on Github here -
  • https://github.com/YUICompressor-NET/YUICompressor.NET
You can take a look at the EcmaScript project, which is also a port over to .Net, here -

HOW DID I GET THE ERROR

I was using this project when I decided to change the version of JQuery from 1.x to JQuery 2.2.4. After doing this and rebuilding, I started to get an error when the system tried to create my bundles. The error can be seen below.

WHAT WAS THE ERROR


missing name after . operator

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: EcmaScript.NET.EcmaScriptRuntimeException: missing name after . operator

The image above has been altered to just show the error and part of the stack trace.

HOW TO SOLVE THE ISSUE


Since there is almost nothing new under the sun and this project is old, I figured that someone else might have had this issue. A quick search uncovered the EcmaScript.Net GitHub project and an issue filed by a developer who had the exact same problem. It turns out that this error is happening because of how the EcmaScript project is handling reserved keywords in scripts. This issue became a problem when I switched to a newer version of JQuery that used some keywords EcmaScript didn't like. You can read about the error by clicking here.

The truth is that the developer who found this issue already created a fix for it and did a commit in GitHub of the fix. However, after pulling down the code, you will find that the original developer has not merged the changes into the codebase. Here is what you need to do to solve this error and get on with your bundling/minifying life.

  1. Download the EcmaScript.Net project from Github here - https://github.com/PureKrome/EcmaScript.NET
  2. Open the project in Visual Studio and find the following two files - EcmaScript.NET/Parser.cs and EcmaScript.NET/TokenStream.cs
  3. Copy the code from the GitHub commit for TokenStream.cs into the TokenStream.cs file located in your local EcmaScript.Net project. Please note that I have made the letters TokenStream.cs into an actual link to the exact file. Just click on that and it will open in another window and then you can copy the code out of that file and paste it into your local project.
  4. Copy the code from the GitHub commit for Parser.cs into the Parser.cs file located in your local EcmaScript.Net project. Please note that I have made the letters Parser.cs into an actual link to the exact file. Just click on that and it will open in another window and then you can copy the code out of that file and paste it into your local project.
  5. After you have changed those two files, you are going to save and build your EcmaScript.Net project locally using a release build (or a debug build if that is your preference). 
  6. Look at the Output window after the build to see where the dll for the EcmaScript.Net project is located. 
  7. Copy the location of the dll from the Output window to your clipboard. It will be the location listed at the bottom of the Output window ending in EcmaScript.dll.
  8. Go to the Visual Studio project you are using with YuiCompressor.Net. Open the References folder and find & delete the EcmaScript.Net.dll.
  9. Right click on the Reference folder and select Add Reference. Click Browse and the paste the location you copied in step 7 into the textbox and then click Add and then OK. This will add the dll to your current project. You can go back to the references list and look to see that the dll is now listed there again.
  10. Now clean and rebuild your project.
  11. Run your project in Release mode so the bundler will work and VOILA - see the bundled magic in all of its glory! 
You should now be able to get your bundles correctly without any other issues.

Just in case you don't feel like doing all of that, I have included the EcmaScript.Net dll I created for my project in this blog post. Feel free to take it and replace the broken one you have in your project.

Get the EcmaScript.Net dll I created by clicking on this sentence! That link will allow you to download the dll from my Google Drive account. Have fun!

Smooches!
Kila Morton