Friday, April 11, 2008

Invalid Embed directive in stylesheet

On a few occasions now, for no really apparent reason, suddenly our Problem Pane will be spammed with tons of messages all sort of looking like this:

Invalid Embed directive in stylesheet - can't resolve source 'Embed(source = "/assets/common.swf", symbol = "AccordionHeader_disabledOverSkin")'.

In the past, sometimes it would only happen on a mac, other times windows machines. I've tried deleting my bin folder, cleaning the project, recompiling the swf's, moving the swf's around, changing the syntax in the css ever so slightly. I've googled this on many occasions and found no clear answer. Today I decided that I needed to know what caused this and if in fact I figured it out, to share it with you.

What ended up being the root cause of our problem is that in several places in the application we were referencing image assets directly in our assets folder, i.e. /assets/delete.png, which is often the case when our designers aren't keeping up with asset creation and developers just throw some image up as a placeholder for the time being. Now it just so happened that ONE of these references was incorrect and its Embed pointed to a file that did not exist. I discovered this when I commented out our style css references in the application, and saw the error only then. It was this broken reference that caused the above error. I fixed the reference to point to the right file, did a Project clean, and all the Invalid Embed Directive errors went away.

I should note that we had over 100 references to symbols in our css, and by default Flexbuilder only shows the first 100 errors. Unluckily the "unable to resolve 'assets/deleted.png' for transcoding in ...." was error number 138 and did not show up in the list. I had to change my preferences to show all 138 errors.

So the lesson learned is that when you get spammed with this error, it could well be that only one Embed tag somewhere in your app is actually broken, and that your css and swf is probably just fine.