html-sketchapp X layers couldn't be imported and were skipped.

Hey, thanks for the tool, this is a really cool idea!

I'm running into a couple issues when using the plugin to import generated files. I get an "X layers couldn't be imported and were skipped." error in some cases. It generally still imports some of my layout and styles correctly but often fails to import things like background colors.

There are related issues on the sketch2story project but it seems like these maybe need to resolve here. (I'm getting these errors without using that project but thought I'd share in case they were related):

https://github.com/chrisvxd/story2sketch/issues/59
https://github.com/chrisvxd/story2sketch/issues/60

I was able to track down two root issues that were causing issues for me:

If I don't set a font family and use the browser defaults the import will fail. Setting the font-family to a locally installed font fixed this error
If I have background shapes html-sketchapp gives them a border of thickness null. Changing the thickness to 0 in my JSON solved that issue.

I'm not sure of the best fix for the font family issue... Maybe fetch the font the browser is actually using instead of the font defined in CSS?

The background shape issue seems easier to fix. Should we set the thickness to 0 instead of null? Or can we omit the border completely?

Let me know if I can help out. Thanks!

html-sketchapp version: 4.4.0

minimal example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Hello World</h1>

    <script src="etchasketch.js"></script>
  </body>
</html>

screenshot from the browser:

screenshot from Sketch:

Apr 16 '20 20:04 Paul-Hebert

I get the same X layers couldn't be imported and were skipped. error, but in my case it's all the layers and nothing is rendered. I tried both html-sketchapp-example and html-sketchapp-style-guide. Could it be due to a trial version of sketch that I'm running? Version 65.1

May 13 '20 15:05 hstarikov-coursera

I've observing the same behavior with the content found here: https://codepen.io/kdzwinel/project/full/AwzQqy

Running Sketch 66.1 on macOS 10.15.6 Beta.

Jun 11 '20 18:06 swashcap

I too cannot see anything rendered or added to Sketch. I tried to use the same file as I had two months ago when everything worked. I even backtracked to the Sketch release at that time, 64.0, but I got the same error.

So, I'm not sure what changed, but the sketch2sketch plugin, this project, and even the example projects don't produce a working file.

https://gist.github.com/alexfinnarn/c60f61f6e3808a115f9299ba4ecbd31d

That is the contents of the file that used to work for me...back to debugging.

Jun 12 '20 18:06 alexfinnarn

+1

Doesn't work for me. Followed everything to a tee.

Also running Sketch 66.1, but on macOS 10.15.4

Jun 19 '20 14:06 musavvirahmed

+1. sketch 66.1

Jun 25 '20 22:06 rt3norio

+1 - nothing renders :(

Sketch 67.1

Jul 07 '20 09:07 garethmtm

+1 this tool is broken. Sketch Version 68.2 (102594) with plugin release 4.4

Sep 16 '20 13:09 woutersamaey

Hey! this is caused by sketchapp-json-plugin. FIx is already there but package itself is not published. We'll be forking this package to fix this issue. Sorry you had to wait so long.

Before it happens you can fix it locally:

Clone repo https://github.com/darknoon/sketchapp-json-plugin
Go to repo and install deps npm i
Build: npm run build
Link library to your html-sketchapp local repository: a) Go to sketchapp-json-plugin repository folder b) Link it to global folder: npm link (you may need sudo) c) Go to you html-sketchapp repository folder. d) Link sketchapp-json-plugin: npm link sketchapp-json-plugin e) If everything went well you should see linked lib in your html-sketchapp. Run npm ls -g --depth=0 --link=true, you should see something like:

/usr/local/lib
└── [email protected] -> /Users/xxx/Sources/sketchapp-json-plugin

Build html-sketchapp repo: npm run build. You should have new skech plugin. Import it to sketch and now it should work.

Sep 21 '20 11:09 coderitual

@coderitual Any update on when the package will be published, pls?

Sep 25 '20 12:09 woutersamaey

Hey @woutersamaey . Sorry I was a bit busy this week but let me prioritize this to have it published early next week.

Sep 25 '20 13:09 coderitual

hey @woutersamaey I am not entirely sure if this was the same issue, but if you happen to use recently published version (4.4.1) please let me know.

cc @Paul-Hebert @garethmtm @rt3norio @musavvirahmed @alexfinnarn @swashcap @hstarikov-coursera

Sep 30 '20 08:09 coderitual

but if you happen to use recently published version (4.4.1) please let me know.

I manually updated html-sketchapp to ^4.4.1 in both html-sketchapp-example and html-sketchapp-style-guide. However, still not able to import any layers.

Using Sketch 69.1.

Anyone having better luck than me w/the 4.4.1 release?

Oct 29 '20 14:10 itsderek23

hey @itsderek23, thank you for letting me know. Were you able to build html-sketchapp plugin itself and add it to sketch?

html-sketchapp contains 2 projects inside: asketch2sketch (sketch plugin) and html2asketch (core library which is generating almost correct files) 4.4.1 was mostly about sketch plugin itself.

Oct 29 '20 15:10 coderitual

Build html-sketchapp repo: npm run build. You should have new skech plugin. Import it to sketch and now it should work.

RTFM :).

After installing the newly generating asketch2sketch plugin (v4.4.1), both of the previously mentioned projects now import layers w/o this warning.

Thanks @coderitual!

Oct 29 '20 16:10 itsderek23

I do have unfortunately the same issue. Rebuilt html-sketchapp in version 4.5.0 with the steps from @coderitual, but it didn't bring any success. I'm running Sketch 64 (also tested in newest 94.1).

Jan 07 '23 12:01 overflood

html-sketchapp html-sketchapp copied to clipboard

X layers couldn't be imported and were skipped.

html-sketchapp
html-sketchapp copied to clipboard