React-sketchapp: Doesn't work on El Capitan and lower

[barberry88]

I m beginner, i tried to install but when I open the basic-setup plugin file, nothing is shown, just blank. (I see plugin is successfully installed on Sketch on Plugin tab)
| -------------------------------------------------------------------------------------------------
| Reporting a bug or issue
| ------------------------------------------------------------------------------------------------
After npm install

-> [email protected] install /Users/bhur/react-sketchapp/examples/basic-setup/node_modules/fsevents

node install

[fsevents] Success: "/Users/bhur/react-sketchapp/examples/basic-setup/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

[email protected] postinstall /Users/bhur/react-sketchapp/examples/basic-setup/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
node lib/post_install.js

[email protected] postinstall /Users/bhur/react-sketchapp/examples/basic-setup
npm run build && skpm-link

[email protected] build /Users/bhur/react-sketchapp/examples/basic-setup
skpm-build

[1/2] 🖨 Copied src/manifest.json in 10ms
[2/2] ⚒ Built ./my-command.js in 963ms
success Plugin built
[1/1] 🔗 Symlinking the plugin basic-setup...
success Plugin basic-setup symlinked
basic-setup - 1.0.0

warning Starting with Sketch 45, you need to restart Sketch for your plugin to appear in the "plugins" menu

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No repository field.

After npm run render,

[email protected] render /Users/bhur/react-sketchapp/examples/basic-setup
skpm-build --watch --run

🖨 Copied src/manifest.json in 12ms
SyntaxError: Unexpected identifier 'j'. Expected either 'in' or 'of' in enumeration syntax..
Plugin “react-sketchapp: Basic Setup”, line 7314:
» for (let j = 0; j < object.count(); j += 1) {
⛏ Built ./my-command.js in 4627ms

Sketch version:
47

[jongold]

What operating system are you on?

[barberry88]

OS X El Capitan .Ver 10.11.6

[RylanH]

+1

[kirkbrauer]

I'm having the same issue, it works fine on my mac with Sierra, but with my other mac that runs El Capitan it throws the same error.

SyntaxError: Unexpected identifier 'j'. Expected either 'in' or 'of' in enumeration syntax..
Plugin “yaardvark-core: Render”, line 7287:
»   for (let j = 0; j < object.count(); j += 1) {

[saiqulhaq]

+1 HighSierra
SketchApp 48.1

[maartenschumacher]

I'm getting

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

Running High Sierra 10.13.1, Sketch 48.1

[maartenschumacher]

Wait nevermind, this is a different issue. @saiqulhaq see https://github.com/airbnb/react-sketchapp/issues/213#issuecomment-350017757, it doesn't work with Sketch 48

[saiqulhaq]

@maartenschumacher ok thanks, I will try

[mathieudutour]

it does work with Sketch48, see https://github.com/airbnb/react-sketchapp/issues/225

This is issue is about El Capitan and lower

[clouditinerary]

Hi - getting the same issue - also on El Cap - any ETA on this?

[dewexdewex]

I follow the instructions and get so far:

Copied src/manifest.json in 12ms
SyntaxError: Unexpected identifier 'j'. Expected either 'in' or 'of' in enumeration syntax..
Plugin “my-command”, line 8430:
» for (let j = 0; j < object.count(); j += 1) {
⛏ Built ./my-command.js in 2218ms

And then nothing.

node 9.3.0
npm 5.6.0
Sketch 48.1
OSX 10.11.6

I'm stumped.

[dwicao]

I'm also getting an error

➜  basic-setup git:(master) npm run render

> [email protected] render /Users/dwicao/Documents/sketch/react-sketchapp/examples/basic-setup
> skpm-build --watch --run

🖨  Copied src/manifest.json in 13ms
SyntaxError: Unexpected identifier 'original'.
Plugin “my-command”, line 26854:
»     let original = prototype[name];
🔩  Built ./my-command.js in 3011ms

node 8.9.1
npm 5.5.1
Sketch 48.2
OSX 10.11.6

Any workaround?

[benjamingeorge]

I'm getting this same error as well. Any updates ?
Sketch 49
OSX 10.11.6

[mathieudutour]

workaround: update your macOS

[LiveMethod]

Does that workaround post mean this is a wontfix?

[fionawhim]

I traced this to the [email protected] library, which uses let, which the version of WebKit that Sketch has on 10.11 doesn’t like.

A quick check seemed to show that yoga-layout 1.9 is correctly restricted to ES2015 ES5 and probably would prevent this from happening.

I’m also looking into whether it’s feasible to hack the webpack config to run Babel on the yoga-layout package.

_Edit:_ Mis-spoke and said "ES2015" when what I meant was "ES5".

[ljharb]

Couldn’t we make a PR to that package and lower its language support? “Restricted to ES2015” isn’t what I’d call “correct”; the ecosystem convention in JS is ES5 CJS.

[fionawhim]

Sorry, I meant ES5. Updated my comment above.

FWIW I got this running locally by adding the following webpack.skpm.config.js file to my plugin’s root:

module.exports = function (config, isPluginCommand) {
  config.module.rules[0].exclude = /node_modules\/(?!(yoga-layout\/sources))/
  return config;
}

Note: This only works if yoga-layout was installed just inside node_modules, which is what npm will probably do, if you haven’t messed around and installed competing versions of it.