React-sketchapp: Error in npm install

[winjingjie96]

I am Reporting a bug or issue
npm install basic-setup is not working for me. I have downgraded my node version to 10.20.1 and have a sketch version of 64.
I have skpm 6.14.4 and was able to create plugin with the default skpm package.
I have also installed the latest webpack

Expected behavior:
To install sketch-react using basic-setup

Observed behavior:
[1/2] 🖨 Copied src/manifest.json in 2ms
error Error while building ./my-command.js
./node_modules/react-sketchapp/lib/module/components/index.js 6:9
Module parse failed: Unexpected token (6:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export { Image } from './Image';
| export { RedBox } from './RedBox';

export * as Svg from './Svg';
| export { View } from './View';
| export { Text } from './Text';
@ ./node_modules/react-sketchapp/lib/module/index.common.js 5:0-29 5:0-29
@ ./node_modules/react-sketchapp/lib/module/index.sketch.js
@ ./src/my-command.js
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: skpm-build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/winjingjie/.npm/_logs/2020-05-05T15_29_52_608Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: npm run build && skpm-link
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/winjingjie/.npm/_logs/2020-05-05T15_29_52_640Z-debug.log

How to reproduce:
git clone https://github.com/airbnb/react-sketchapp.git cd react-sketchapp/examples/basic-setup && npm install

Sketch version:
64

Please attach screenshots, a zip file of your project, and/or a link to your github project

[mathieudutour]

hum we might need to update babel

[winjingjie96]

Thank you for the prompt reply! Will it be possible to install an older version of react-sketchapp?

[macintoshhelper]

Hi, I ran into the same issue, and after some investigating, it appears to be caused by https://github.com/airbnb/react-sketchapp/blob/345831d4d4a5f7d25eb70ef807bb7ba063f2fe4d/tsconfig.module.json#L6

The issue seems to be with TypeScript and Webpack not being able to resolve export * from './Svg'; in the new ES modules build.

As a manual node_modules patch, this appears to solve it temporarily until a proper fix is out:

lib/module/components/index.js

// ...
import Svg, {
  Circle,
  ClipPath,
  Defs,
  Ellipse,
  G,
  Image,
  Line,
  LinearGradient,
  Path,
  Pattern,
  Polygon,
  Polyline,
  RadialGradient,
  Rect,
  Stop,
  Symbol as SvgSymbol,
  Text,
  TextPath,
  TSpan,
  Use,
} from './Svg';

Svg.Circle = Circle;
Svg.ClipPath = ClipPath;
Svg.Defs = Defs;
Svg.Ellipse = Ellipse;
Svg.G = G;
Svg.Image = Image;
Svg.Line = Line;
Svg.LinearGradient = LinearGradient;
Svg.Path = Path;
Svg.Pattern = Pattern;
Svg.Polygon = Polygon;
Svg.Polyline = Polyline;
Svg.RadialGradient = RadialGradient;
Svg.Rect = Rect;
Svg.Stop = Stop;
Svg.Symbol = SvgSymbol;
Svg.Text = Text;
Svg.TextPath = TextPath;
Svg.TSpan = TSpan;
Svg.Use = Use;

export { Svg }
// ...

[winjingjie96]

thank you sir you are a genius!!! It worked perfectly!

[winjingjie96]

Sorry if this is a noob question, but in scripts : render,I can't seem to find the file
node ../../../skpm/packages/builder/lib/build.js
may I know which js file this is referencing from? I have changed the directory of my node global modules to
/home/winjingjie/.node_modules_global/bin/npm

The error message I am facing

internal/modules/cjs/loader.js:638
throw err;
^

Error: Cannot find module '/Users/winjingjie/Bill/skpm/packages/builder/lib/build.js' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15) at Function.Module._load (internal/modules/cjs/loader.js:562:25) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12) at startup (internal/bootstrap/node.js:283:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] render:node ../../../skpm/packages/builder/lib/build.js --watch --run npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] render script.

I can run build, watch and postinstall w no problems. running render:once with the --run flag takes very long to load (but that's another issue)

[mathieudutour]

Oh I forgot to change it back after working on it. Should be skpm-build --watch --run https://github.com/airbnb/react-sketchapp/pull/509

[mathieudutour]

I also fixed the original issue: https://github.com/skpm/skpm/commit/ba95fdd834c7ffb7bf2c5e92f2b51c51f295ed5c

[macintoshhelper]

I also fixed the original issue: skpm/skpm@ba95fdd

Just tried a fresh install with skpm create my-app --template=airbnb/react-sketchapp and am still getting the same issue. @skpm/babel-preset is version pinned to 0.2.2 in @skpm/builder – so am getting "_id": "@skpm/[email protected]",. I had a quick go at an npm-shrinkwrap.json override, but no luck with that.

I can run build, watch and postinstall w no problems. running render:once with the --run flag takes very long to load (but that's another issue)

I've been pinning @skpm/builder to 0.5.16 with npm install --save --save-exact @skpm/[email protected] to resolve the render build time issue – appears to work fine in recent Sketch versions. You can track the issue at https://github.com/skpm/skpm/issues/266 .

If you're still having issues, pinning to 3.2.0 should unblock (as a temporary fix): npm install --save --save-exact [email protected].

I'll have a go at #363 when I have some time to help automate tests locally or in CI.

[winjingjie96]

Hi thank you so much for the help but it seems that I still can't seem to get it rendered on sketch
My package json file is as follows
{ "name": "basic-setup", "version": "1.0.0", "description": "", "skpm": { "main": "basic-setup.sketchplugin", "manifest": "src/manifest.json" }, "scripts": { "build": "skpm-build", "watch": "skpm-build --watch", "render": "skpm-build --watch --run", "render:once": "skpm-build --run", "postinstall": "npm run build && skpm-link" }, "author": "Jon Gold <[email protected]>", "license": "MIT", "devDependencies": { "@skpm/builder": "0.5.16" }, "dependencies": { "chroma-js": "^1.2.2", "prop-types": "^15.5.8", "react": "^16.3.2", "react-sketchapp": "3.2.0", "react-test-renderer": "^16.3.2" } }
The sketch document remains blank. I have tried restarting the plugin, sketch app and rebuilding the script.

Steps to reproduce errors:

open sketch and untitled document
npm install -g skpm
git clone https://github.com/airbnb/react-sketchapp.git
cd react-sketchapp/examples/basic-setup
npm install --save --save-exact @skpm/[email protected]
npm install --save --save-exact [email protected]
npm install
npm run build (no output on sketch, plugin built successfully)
npm run render (no output on sketch, error message as below)

> skpm-build --watch --run

🖨  Copied src/manifest.json in 2ms
ReferenceError: Can't find variable: global
stack: ./node_modules/has-symbols/index.js@/Users/xiaojie96/Downloads/react-sketchapp/examples/basic-setup/basic-setup.sketchplugin/Contents/Sketch/my-command.js:9530:24
__webpack_require__@/Users/xiaojie96/Downloads/react-sketchapp/examples/basic-setup/basic-setup.sketchplugin/Contents/Sketch/my-command.js:25:34
/Users/xiaojie96/Downloads/react-sketchapp/examples/basic-setup/basic-setup.sketchplugin/Contents/Sketch/my-command.js:8793:37
./node_modules/es-abstract/GetIntrinsic.js@/Users/xiaojie96/Downloads/react-sketchapp/examples/basic-setup/basic-setup.sketchplugin/Contents/Sketch/my-command.js:8974:34
__webpack_require__@/Users/xiaojie96/Downloads/react-sketchapp/examples/basic-setup/basic-setup.sketchplugin/Contents/Sketch/my-command.js:25:34
./node_modules/es-abstract/5/CheckObjectCoercible.js@/Users/xiaojie96/Downloads/react-sketchapp/examples/basic-setup/basic-setup.sketchplugin/Contents/Sketch/my-command.js:8678:39
__webpack_require__@/Users/xiaojie96/Downloads/react-sketchapp/examples/basic-setup/basic-setup.sketchplugin/Contents/Sketch/my-command.js:25:34
./node_modules/es-abstract/2019/RequireObjectCoercible.js@/Users/xiaojie96/Downloads/react-sketchapp/examples/basic-setup/basic-setup.sketchplugin/Contents/Sketch/my-command.js:8494:37
__webpack_require__@/Users/xiaojie96/Downloads/react-sketchapp/examples/basic-setup/basic-setup.sketchplugin/Contents/Sketch/my-command.js:25:34
./node_modules/object.entries/implementation.js@/Users/xiaojie96/Downloads/react-sketchapp/examples/basic-setup/basic-setup.sketchplugin/Contents/Sketch/my-command.js:11269:49
⚒  Built ./my-command.js in 2552ms

I have rolled back to sketch version 54.1

Edit: I think its my problem, i totally missed the terminal error after running render

[macintoshhelper]

Thanks for your helpful reproducible steps 🙂. You can fix it by deleting the webpack.skpm.config.js file. It's passing a custom config.node object which is breaking it, not sure why.