react-sketchapp: Sketch quits unexpectedly when importing image assets.

👋 Hello! Thanks for contributing. Please use the template that matches your intention

I am… Dario Lehmhus

| -------------------------------------------------------------------------------------------------

Reporting a bug or issue

Expected behavior: Import image asset into Component

Observed behavior: Sketch quits unexpectedly

How to reproduce: import logo from 'path/to/asset/logo.png';

Sketch version: 47.1

Dependencies:

"dependencies": {
    "nwb": "^0.15.6",
    "react": "^15.4.2",
    "react-primitives": "^0.3.4",
    "react-sketchapp": "^1.0.0-beta.5",
    "react-test-renderer": "^15.4.1"
  },
  "devDependencies": {
    "@skpm/builder": "^0.2.0"
  }

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 42 (12 by maintainers)

Most upvoted comments

@mathieudutour Ok, I’ve now isolated the problem, but can’t find a workaround.

The trigger for the crash is the line generated by the resourceLoader:

module.exports = "file://" + context.plugin.urlForResourceNamed("_webpack_resources/754269c360d531468abfcc3b7be4e6bb.png").path();

Specifically, the context.plugin.urlForResourceNamed() call appears to return an unstable object (possibly deallocated memory). I’ve been able to log it without crashing, but I can’t return it via module.exports nor can I copy any of it.

Also, the path() call is redundant, because the URL is already prefixed by file://, but this is not the trigger for the crash in itself, just an observation.

I can’t find any further documentation or source for the plugin object, other than its headers. That seems to suggest that the return value is an object ID, and therefore I think is at risk of being garbage collected without appropriate tracking (if my memory of Objective-C serves me correctly).

I can’t conceive of another way of getting the absolute path to the resource, without making something brittle, so this appears to be a fault in Sketch that needs resolving to make progress.

To determine the above I used sketchtool to manually run the plugin after build, and this still crashes Sketch, so I think that at least proves that the problem is not related to the way that webpack triggers the plugin run after bundling is complete.

Just to be clear, it is possible to run the plugin manually from the Sketch plugin menu after building, so the context for where the plugin function is broken is specific to when the plugin is run via the CLI.

I tried switching the skpm/builder to use the older (v43) command interface but this threw an exception, so probably is no longer supported in v48.2.

I’ve created a test repo here - https://github.com/dmeehan1968/sketch-require-crash

dmeehan1968 on Feb 23, 2018

@thierryc idk if it owuld help you but I am hosting the images from the repo itself to avoid other people having issues with assets but glad to see this workaround, didnt think of it (serving them local)

csantiago132 on May 9, 2018

same here… crashing on 48.2 any updates?

silviopaganini on Jan 26, 2018

no issue for me with

<Image source={require('./img.png')} style={{
      height: 220,
      width: 200,
      resizeMode: 'contain',
      marginBottom: 20,
      borderRadius: 10,
    }} />

sketch 48, react-sketchapp 1.0, @skpm/builder 0.2.10

What the crash logs?

mathieudutour on Dec 19, 2017

@LincMitch ill set one up and send it tomorrow

csantiago132 on Dec 19, 2017

@jhampton Thanks for the input, see my comment above, I isolated webpack and its not related to anything its doing, nor is it a --watch related issue.

dmeehan1968 on Feb 23, 2018

Sounds good @csantiago132 can you send a code example?

LincMitch on Dec 19, 2017