X layers couldn't be imported and were skipped. #196

Paul-Hebert · 2020-04-16T20:58:22Z

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):

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:

The text was updated successfully, but these errors were encountered:

hstarikov-coursera · 2020-05-13T15:38:34Z

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

swashcap · 2020-06-11T18:25:08Z

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.

alexfinnarn · 2020-06-12T18:40:18Z

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.

musavvirahmed · 2020-06-19T14:16:29Z

+1

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

Also running Sketch 66.1, but on macOS 10.15.4

rt3norio · 2020-06-25T22:52:52Z

+1.
sketch 66.1

garethmtm · 2020-07-07T09:04:57Z

+1 - nothing renders :(

Sketch 67.1

woutersamaey · 2020-09-16T13:32:18Z

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

coderitual · 2020-09-21T11:19:11Z

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.

woutersamaey · 2020-09-25T12:57:37Z

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

coderitual · 2020-09-25T13:02:26Z

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

coderitual · 2020-09-30T08:42:47Z

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

itsderek23 · 2020-10-29T14:40:41Z

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?

coderitual · 2020-10-29T15:39:23Z

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.

itsderek23 · 2020-10-29T16:25:33Z

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!

Need the latest version to address html-sketchapp/html-sketchapp#196.

overflood · 2023-01-07T12:33:06Z

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).

This was referenced Sep 21, 2020

asketch2sketch plugin doesn't work with Sketch v64 #191

Closed

Editing svg layer crash sketch app. #188

Closed

No commits for a while #198

Closed

coderitual linked a pull request Sep 30, 2020 that will close this issue

4.4.1 #207

Merged

coderitual added the bug label Sep 30, 2020

itsderek23 added a commit to itsderek23/html-sketchapp-example that referenced this issue Oct 29, 2020

Update html-sketchapp to the latest

486a881

Need the latest version to address html-sketchapp/html-sketchapp#196.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

X layers couldn't be imported and were skipped. #196

X layers couldn't be imported and were skipped. #196

Paul-Hebert commented Apr 16, 2020

hstarikov-coursera commented May 13, 2020

swashcap commented Jun 11, 2020

alexfinnarn commented Jun 12, 2020

musavvirahmed commented Jun 19, 2020

rt3norio commented Jun 25, 2020

garethmtm commented Jul 7, 2020

woutersamaey commented Sep 16, 2020 •

edited

coderitual commented Sep 21, 2020 •

edited

woutersamaey commented Sep 25, 2020

coderitual commented Sep 25, 2020

coderitual commented Sep 30, 2020 •

edited

itsderek23 commented Oct 29, 2020

coderitual commented Oct 29, 2020

itsderek23 commented Oct 29, 2020

overflood commented Jan 7, 2023

X layers couldn't be imported and were skipped. #196

X layers couldn't be imported and were skipped. #196

Comments

Paul-Hebert commented Apr 16, 2020

hstarikov-coursera commented May 13, 2020

swashcap commented Jun 11, 2020

alexfinnarn commented Jun 12, 2020

musavvirahmed commented Jun 19, 2020

rt3norio commented Jun 25, 2020

garethmtm commented Jul 7, 2020

woutersamaey commented Sep 16, 2020 • edited

coderitual commented Sep 21, 2020 • edited

woutersamaey commented Sep 25, 2020

coderitual commented Sep 25, 2020

coderitual commented Sep 30, 2020 • edited

itsderek23 commented Oct 29, 2020

coderitual commented Oct 29, 2020

itsderek23 commented Oct 29, 2020

overflood commented Jan 7, 2023

woutersamaey commented Sep 16, 2020 •

edited

coderitual commented Sep 21, 2020 •

edited

coderitual commented Sep 30, 2020 •

edited