React-sketchapp: Cannot render an Image component

[jlongster]

| -------------------------------------------------------------------------------------------------
| Reporting a bug or issue
| -------------------------------------------------------------------------------------------------

Expected behavior:

Rendering an Image component should work. Going to post the reproducible test case here to make it clear:

function Document() {
  return (
    <View style={{ width: 500, height: 500, backgroundColor: 'blue' }}>
      <Image
        source={{
          uri: 'http://localhost:8080/svg/image.png',
          width: 500,
          height: 500
        }}
      />
    </View>
  );
}

When I add the Image tag, it breaks. I originally thought it was because I was trying to render an SVG, but I tried it with a PNG too and still the same error.

Observed behavior:

This error happens:

The URL definitely is valid.

How to reproduce:

Run the above code and change the URI to a somewhere that works for you (it's localhost right now).

Sketch version:

43.2

[mathieudutour]

Is it working with a https uri? (https://github.com/airbnb/react-sketchapp/issues/12)

[jlongster]

@mathieudutour Oh, yes it does. That is very bizarre! I don't even care about remote images, just trying to render something local. Is there any way to do a local file path?

[mathieudutour]

There was some work started here: https://github.com/skpm/skpm/pull/37, https://github.com/skpm/skpm/pull/37#issuecomment-297703103 but I didn't have time to finish it yet

[mikeaustin]

I also get an error while trying to use Image, even just trying out the profile-cards example:

TypeError: MSImageData.alloc().initWithImage_convertColorSpace is not a function. (In 'MSImageData.alloc().initWithImage_convertColorSpace(image, false)', 'MSImageData.alloc().initWithImage_convertColorSpace' is undefined)

Sketch 47 (45396)
macOS 10.12.6 (16G29)

"dependencies": {
"react": "^15.4.2",
"react-sketchapp": "^0.12.0",
"react-test-renderer": "^15.4.2"
},

[mathieudutour]

This is already fixed: https://github.com/airbnb/react-sketchapp/blob/1ebe6936e066539a0cf10d5029b54274978683a6/src/jsonUtils/hacksForJSONImpl.js#L165-L168. Make sure you are using the latest version of react-sketchapp

[mikeaustin]

https://www.npmjs.com/package/react-sketchapp
"0.12.1 is the latest of 26 releases"

So you recommend grabbing the latest from GitHub instead of using npm? When do you think there will be another npm release? BTW, this is a great tool and we hope to use it and promote it.

examples/profile-cards/package.json:

"dependencies": {
"react": "^15.4.2",
"react-sketchapp": "^0.12.0",
"react-test-renderer": "^15.4.2"
}

[jongold]

Can you try doing npm install react-sketchapp@next? I need to publish a
real version soon 🙏

On Oct 12, 2017 9:09 AM, "Mike Austin" [e-mail] wrote:

https://www.npmjs.com/package/react-sketchapp
"0.12.1 is the latest of 26 releases"

So you recommend grabbing the latest from GitHub instead of using npm?
When do you think there will be another npm release? BTW, this is a great
tool and we hope to use it and promote it.

examples/profile-cards/package.json:

"dependencies": {
"react": "^15.4.2",
"react-sketchapp": "^0.12.0",
"react-test-renderer": "^15.4.2"
}

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/react-sketchapp/issues/101#issuecomment-336186081,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAkHGwilrIziqURq39sx-CZPWmw5YSXcks5srjnBgaJpZM4Nd8la
.

[mikeaustin]

I'm a bit confused since 'npm install react-sketchapp@next' outputs node_modules in the current folder. If I cd into react-sketchapp and try again, it can't be a dependency of itself.

The version I grabbed from github, 1.0.0-beta.5 works, as long as I update the dependencies in the examples.

UPDATE: Ok, I think I get it. I ran npm install react-sketchapp@next within the profile-cards folder. With the git file named react-sketchapp with all the examples and the npm module named the same, it's a bit confusing.

It seems to be working, other than a few warnings:

Warning: Failed prop type: Invalid prop style supplied to View.
Warning: Failed prop type: Invalid prop style of type number supplied to Image, expected object.
Warning: Failed prop type: Invalid prop style of type number supplied to Text, expected object.

[mikeaustin]

@jongold I noticed that the newer version of skpm doesn't have build, etc. But there's a new binary called skpm-build. I had luck running context.document.showMessage("It's alive 🙌"); but not render(, context);

https://github.com/skpm/skpm/tree/master/template

Should I just use the older skpm, or should skpm-build work for rendering Artboard? Thanks for your time.. we're hoping this will create one source of truth for our component library!

[mathieudutour]

I split out the build step from the rest of skpm so you don't have to download all the other dependencies.

npm run build should still work the same way tho.

I'll make a PR to the example to update skpm to v1.0 when i have time

[mikeaustin]

Good news! I've got it working great, and even rendering some of our cross-platform components that use webpack module aliases.

package.json:

{
  "name": "company-sketch",
  "version": "0.1.0",
  "description": "",
  "engines": {
    "sketch": ">=3.0"
  },
  "skpm": {
    "name": "company-sketch",
    "manifest": "src/manifest.json",
    "main": "company-sketch.sketchplugin"
  },
  "scripts": {
    "build": "skpm-build",
    "render": "skpm-build --watch --run",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "skpm-builder": "^0.1.1"
  },
  "dependencies": {
    "chroma-js": "^1.2.2",
    "react": "^16.0.0",
    "react-sketchapp": "^1.0.0-beta.5",
    "react-test-renderer": "^16.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1"
  },
  "babel": {
    "presets": [
      "env",
      "react"
    ],
    "plugins": [
      "transform-class-properties"
    ]
  }
}

webpack.skpm.config.js:

const path = require("path");

console.log('insureon-sketch/webpack.config.js');

/**
 * Function that mutates original webpack config.
 * Supports asynchronous changes when promise is returned.
 *
 * @param {object} config - original webpack config.
 * @param {boolean} isPluginCommand - wether the config is for a plugin command or a resource
 **/
module.exports = function (config, isPluginCommand) {
  config.resolve = {
    alias: {
      "react-native": path.resolve(__dirname, "./node_modules/react-sketchapp"),
      "react-xnative": path.resolve(__dirname, "../react-znative/src/components/"),
      "react-company": path.resolve(__dirname, "../react-company/src/components/"),
      "react-xnative-styles": path.resolve(__dirname, "./src/styles/"),
      "global-styles$": path.resolve(__dirname, "./src/styles/GlobalStyles")
    }
  };
}

my-command.js:

import React from 'react';
import Sketch, { Text, View, Artboard } from 'react-sketchapp';
import { Spacer, Divider } from 'react-xnative';

[...]

export default context => {
  context.document.showMessage("It's alive 🙌");
  Sketch.render(<App colors={colorList} />, context.document.currentPage());
}

It works fine, but there are some errors in Console. The file does exist.

Failed to load script at URL file:///Users/username/Projects/company-cx/company-sketch/company-sketch.sketchplugin/Contents/Sketch/my-command.js, error: Error Domain=NSCocoaErrorDomain Code=260 "The file “my-command.js” couldn’t be opened because there is no such file." UserInfo={NSFilePath=/Users/username/Projects/company-cx/company-sketch/company-sketch.sketchplugin/Contents/Sketch/my-command.js, NSUnderlyingError=0x608000e413b0 {Error Domain=NSPOSIXErrorDomain Code=2 "No such file or directory"}} «Plugin Developer»