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.

32 comments:

Anonymous said...

I find it funny that the exact same error happened to me during our development stage.

And even more funny is that it was error 138 as well, haha.

I had trouble figuring it out too, what a pain!

-Boub

gabri3D said...

hi! i've the same problem but... i don't know what to do to change my preferences and show the complete error's list, I can't find it

thanks!

Doug Schmidt said...

We had a similar issue (one hundred "Error: Invalid Embed" messages) on our build recently.

Our problem turned out to be unrelated to any CSS or Embed statements.

We were attempting to import a non-existing class in an AS file. When I removed the obsolete import statement, everything compiled.

So the "Invalid Embed" error was a complete red herring!

Daryl the Data Plumber said...

Had the same problem as you Doug, thanks for the tip!

Bill White said...

Dude you are a life saver!! Thanks for the tip. You just saved me hours of frustration! :)

Anonymous said...

Thank you a lot for sharing your knowledge... I just had the exact same problem and after searching for 1 hour, I found your blog and was finally able to solve this issue!

Anonymous said...

Thanks to you, the hair on my head will be scratched bald on a different day.

Roberto said...

Muchas gracias, excellent tip.
Saludos

Anonymous said...

Just thought I'd add that I've run into this error in the past specifically when compiling with the command line compiler or with flex ant tasks. I was experiencing an issue where FB's built in compiler would compile without errors, but the command line/ant compilers would return with the "Invalid Embed" errors. It turned out that for some reason the command/ant compilers were having difficulty resoloving abosolute paths such as '/assets/images/myImage.png'. I was able to resolve the errors by changing the absolute path references to relative path references such as '../../../assets/images/myImage.png' in files that were reporting errors. I think I tracked down the solution elsewhere on the web, but just wanted to note it here also.

Anonymous said...

Thanks for this great tip ... Have lost quite some time looking for the reason why all of a sudden my FB was flooded with this error. Thanks !

Piet
Belgium

Anonymous said...

"I had to change my preferences to show all 138 errors"

Good tip - would you be so kind as to point out where this preference is set?

Vic Rubba said...

In the Problems Pane, top right corner is a downward pointing triangle. Click on this to get a menu from which you can select Preferences.

Anonymous said...

man this was a really annoying error, glad I found your post. I kept seeing this pop up at the weirdest times and couldn't figure out if it was the .swf library or if it was the Flex app.

Thanks a lot, just saved me many future headaches.

Jonathan Rowny said...

I had this problem while moving some stuff around. Some places I had hardcoded asset path where brought to light :)

Thanks for the post!

Unknown said...

Thanks a ton mate. I was about to lose my hairs thinking about the problem until I got ur post.

Anonymous said...

Great, saved a ton of time. Thanks!

Ronald McCigrit said...

thanks!

ciacob said...

Thanks a lot man, saved my day (and weekend :) )

Debanjan Routh said...

At times error like these can really piss one off..Had the error representation been more specific and illustrative,it would have saved lots of effort and development time..Even warning messages shown in Flex Builder 3 are sometimes misleading..they don't at all mean wat they say..
newayz..thnx for the tip..saved me a lot of effort..

Moniker said...

Thanks for the tip! What worked for me: comment out the contents of the CSS files that are showing errors that don't make sense. That exposed other places, as Vic said, that had valid errors. With those fixed, I uncommented the original css files and everything worked fine.

Mike Graf said...

Thanks for the post.

Alok said...

Thanks a lot for the tip! After reading your post, what i did was just refresh the assets folder and all the errors disappeared. Saved me some time. Thanks.

Alok said...

Thanks for the tip! After reading your post, all I did was just refresh the assets folder and all the errors disappeared. Saved me some time. Thanks.

Taytay said...

I must have looked everywhere for the preference to limit how many errors are displayed! Thanks for the tip!

Anonymous said...

Hey thanks a lot guys... This saved me tons of work!

Aayush said...

Same problem
But in our case the problem was with the .png files. Make sure the .png files are in binary and not text format.

Aeldron said...

Also, when we place new image assets in the project by using Mac's Finder or PC's Windows Explorer, we must remember to refresh the Flex project by right clicking and selecting 'Refresh', otherwise Flex won't find the assets and will throw errors when compiling.

I always forget to do that...

Broomhill said...

Thanks, this was exactly the problem I was facing.

Anonymous said...

Thanks !

秘密克 said...

Hey, thanks for sharing this. This problem almost got me crazy the other day.

Unknown said...

Thanks Vic!!!

gillesvds said...

2 years after, Flash Builder 4, Flex 4.5.1, same trouble, same slution. Thanks a lot.
Gilles from France