React-sketchapp: TypeError: {} is not a function

[nilobarp]

_I am..._ Reporting a bug or issue

Expected behavior:
Should build

Observed behavior:
TypeError: {} is not a function. (In '{}("")', '{}' is an instance of Object)

How to reproduce:
Using package versions

"prop-types": "^15.5.8",
"react": "^15.4.2",
"react-dom": "15.4.2",
"react-sketchapp": "^1.0.0",
"react-test-renderer": "15.4.2",
"webpack-shell-plugin": "^0.5.0"

Build this

class Document extends React.Component {
  render() {
    <Artboard name="Test">
      <View>
         <Text>Sign up</Text>
      </View>
    </Artboard>
  }
}

const onRun = () => {
  render(<Document />, context.document.currentPage());
};

module.exports = onRun;

Sketch version:
48.2

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

[mathieudutour]

try with

class Document extends React.Component {
  render() {
    <Artboard name="Test">
      <View>
         <Text>Sign up</Text>
      </View>
    </Artboard>
  }
}

export default () => {
  render(<Document />, context.document.currentPage());
};

?

[joevbruno]

The above simple snippet didn't work for me. Still had the same issue. I'm not sure why, but completely removing node_modules and re-yarn installing resolved this issue for me (using it in a mono-repo). After that, both the above code snippet, and my original file worked again. I began receiving this error after upgrading to the both the latest version of the library and Sketch to 48.2 (specifically for SVG use).

[weaintplastic]

@mathieudutour I'm running into the same issues every now and then but couldn't track down the original cause. I'm using a monorepo with yarn workspaces enabled as well, just as @joevbruno . But re-yarn doesn't work everytime. Any clue what where I can start investigating?

[mathieudutour]

I'm not using yarn and I'm thinking it's an issue with yarn but I can't repro

[joevbruno]

@weaintplastic just to clarify, I'm not using yarn workspaces - I am using yarn and lerna.

[weaintplastic]

@joevbruno oh alright, sorry. I was assuming you use yarn workspaces.
@mathieudutour Thanks so much for the fast reply. I'll continue to investigate. I'll keep you guys posted if I should come to any result.

[mathieudutour]

yeah but it's probably yarn messing up the node_modules. When you do a skpm create, it will run npm install so if you run yarn on top of it, it will probably break things. Happy to accept a PR to skpm to support yarn

[weaintplastic]

actually I just use the @skpm/builder and didn't even use the skpm create back then (but was using the template).

[weaintplastic]

It might be some environment thing and webpack. When it breaks index.js declares nodeFs like this

var nodeFs = {}("");

when it is working the declaration is

var nodeFs = {};

[thisjeremiah]

I've also been getting this error. Unfortunately, I have not been able to simply remove and replace node_modules to get it working.

I'm using yarn workspaces (w/o lerna). If I only install packages for react-sketchapp/examples/basic-setup-typescript under a single workspace (e.g. packages/a), it works fine. But, if I install any packages under another workspace (e.g., packages/b), it will fail.

However, I have pinpointed the issue. When i install packages from a new workspace, some code changes in node_modules/yoga-layout/build/Release/nbind.js. var nodeFS = {} becomes var nodeFS = {}("").

So, it seems like the problem must be between yoga-layout and yarn workspaces.

[thisjeremiah]

Seems like the latest javascript build v1.8.0 fixed this issue: https://github.com/facebook/yoga/issues/642#event-1396878128. So, it should just be an issue of react-sketchapp updating yoga-layout to 1.8.0, ... which it seems has already been done, just not in an official release 😔

[nampdn]

Will this get fixed when the new release of react-sketchapp is out?

[mathieudutour]

Yes

On 14 Mar 2018, at 04:25, Phạm Dương Nhật Nam [e-mail] wrote:

Will this get fixed when new release of react-sketchapp is out?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.