React-sketchapp: Examples point to an outdated version of `react-sketchapp`

[m0ndra]

hello! this is my first time trying sketch react app and I have the following issue(s) with the basic setup example (https://github.com/airbnb/react-sketchapp/tree/master/examples/basic-setup)

I'm using:

• macOS High Sierra 10.13.2
• npm 8.9.3

Expected behavior:
Run basic-setup example successfully.

Observed behavior:

• everything works fine until "npm run render" command
• after "npm run render" nothing happens and I get the following errors:

Using Sketch 48.1, I get the behavior of the following issue:
https://github.com/airbnb/react-sketchapp/issues/213

The recommendation of the issue 213 is "downgrade to Sketch 47.1" - which I did.

Now, using version 47.1 I get the behavior of this issue:
https://github.com/airbnb/react-sketchapp/issues/217

var funcToString = Function.prototype.toString;

The recommendation of this issue is to upgrade to Sketch Version 48 ;-) which brings me back to issue #213

How to reproduce:
installed a clean version of react-sketch app and run basic-setup

Sketch version:
47.1 / 48.1

Any suggestions? :)

[saundersbd]

+1

[mathieudutour]

the examples don't point to the latest version of react-sketchapp. Replace "react-sketchapp": "^0.12.0" by `"react-sketchapp": "^1.0.0" in the package.json of the example and it should be find (on Sketch 48).

If one of you want to create a PR that changes that on the examples, that'd be great :D

[m0ndra]

thanks mathieu!

my json file already says "version": "1.0.0",
I used the react sketchapp version from this URL:
https://github.com/airbnb/react-sketchapp (which is the latest version, I guess?)

still not working for me in sketch 48.1, I still get the error message of issue #213

[mathieudutour]

you get this error MSAttributedString.alloc().initWithAttributedString is not a function?

then you are probably not using the version 1.0.0 since it doesn't appear anymore: https://github.com/airbnb/react-sketchapp/search?utf8=✓&q=MSAttributedString.alloc%28%29.initWithAttributedString&type=

could you please check that you do have the right version? npm i -S [email protected]

[csantiago132]

@mathieudutour I tried to update the dependencies but got an error running npm run test

I forked repo
git clone
npm install
npm run test

this was done before touching the code, error is on Redbox component, heres a screenshot

[mathieudutour]

what the diff in the snapshot?

[csantiago132]

@mathieudutour here's what the terminal printed

expect(value).toMatchSnapshot()

Received value does not match stored snapshot 1.

- Snapshot
+ Received

@@ -42,11 +42,11 @@
           "color": "white",
           "fontFamily": "Monaco",
           "marginTop": 20,
         }
       }>
-      invariant
+      invariant (/Users/path/to/folder
     </text>
     <text
       name="Text"
       resizingConstraint={undefined}
       style={
@@ -54,11 +54,11 @@
           "color": "white",
           "fontFamily": "Monaco",
           "marginTop": 20,
         }
       }>
-      Object.<anonymous>
+      Object.<anonymous> (/Users/path/to/folder
     </text>
     <text
       name="Text"
       resizingConstraint={undefined}
       style={
@@ -66,11 +66,11 @@
           "color": "white",
           "fontFamily": "Monaco",
           "marginTop": 20,
         }
       }>
-      Object.<anonymous>
+      Object.<anonymous> (/Users/path/to/folder
     </text>
     <text
       name="Text"
       resizingConstraint={undefined}
       style={
@@ -78,11 +78,11 @@
           "color": "white",
           "fontFamily": "Monaco",
           "marginTop": 20,
         }
       }>
-      attemptAsync
+      attemptAsync (/Users/path/to/folder
     </text>
     <text
       name="Text"
       resizingConstraint={undefined}
       style={
@@ -90,43 +90,47 @@
           "color": "white",
           "fontFamily": "Monaco",
           "marginTop": 20,
         }
       }>
-      QueueRunner.run
+      QueueRunner.run (/Users/path/to/folder
     </text>
     <text
       name="Text"
       resizingConstraint={undefined}
       style={
         Object {
           "color": "white",
           "fontFamily": "Monaco",
           "marginTop": 20,
         }
-      } />
+      }>
+      /Users/path/to/folder
+    </text>
     <text
       name="Text"
       resizingConstraint={undefined}
       style={
         Object {
           "color": "white",
           "fontFamily": "Monaco",
           "marginTop": 20,
         }
-      } />
+      }>
+      /Users/path/to/folder
+    </text>
     <text
       name="Text"
       resizingConstraint={undefined}
       style={
         Object {
           "color": "white",
           "fontFamily": "Monaco",
           "marginTop": 20,
         }
       }>
-      Object.fn
+      Object.fn (/Users/path/to/folder
     </text>
     <text
       name="Text"
       resizingConstraint={undefined}
       style={
@@ -134,11 +138,11 @@
           "color": "white",
           "fontFamily": "Monaco",
           "marginTop": 20,
         }
       }>
-      attemptAsync
+      attemptAsync (/Users/path/to/folder
     </text>
     <text
       name="Text"
       resizingConstraint={undefined}
       style={
@@ -146,9 +150,9 @@
           "color": "white",
           "fontFamily": "Monaco",
           "marginTop": 20,
         }
       }>
-      QueueRunner.run
+      QueueRunner.run (/Users/path/to/folder
     </text>
   </view>
 </view>

  at Object.<anonymous> (__tests__/components/RedBox.js:13:20)

[csantiago132]

@mathieudutour I saw that #227 already took care of this so its ok, just trying to help

[mathieudutour]

oh it's because now with the new Sketch, we now have nicer stack traces. That's why the snapshot is failing, it's because now there are stack traces

[m0ndra]

thanks mathieu! works for me now :)

[antoniobrandao]

@mathieudutour updating react-sketchapp to 1.0.0 in the examples does fix the issue in Sketch 48. Made the pull request as you suggested. https://github.com/airbnb/react-sketchapp/pull/229

[joshnabbott]

I know I'm late to the party but I'm having the exact same thing happen as the original issue mentioned above. I will add that I'm working with a sketchapp plugin created a year ago prior to react-sketchapp 1.0 and Sketch 48 so I deleted the old plugin, removed it from Sketch and ran npm run render again, but continue getting the same error

TypeError: MSAttributedString.alloc().initWithAttributedString is not a function. (In 'MSAttributedString.alloc().initWithAttributedString(attribStr)', 'MSAttributedString.alloc().initWithAttributedString' is undefined)

I double-checked and the version of react-sketchapp installed in node_modules is indeed 1.0.0 and the version of Sketch I'm running is 48.2.