Uncaught TypeError: fs.readFileSync is not a function

I’m trying to use react-canvas with Meteor and get the above error in console.

The error points to the script in react-canvas file that says var fs = require('fs');.

This react-canvas issue describes a similar problem when using webpack. However, I’m not using webpack.

I tried installing browserify and it didn’t help.

Here is my package.json:

  "dependencies": {
    "brfs": "^1.4.3",
    "browserify": "^13.0.1",
    "canvas": "^1.3.16",
    "fbjs": "^0.8.3",
    "meteor-node-stubs": "^0.2.3",
    "react": "^0.14.8",
    "react-addons-pure-render-mixin": "^0.14.8",
    "react-canvas": "^1.1.0",
    "react-dom": "^0.14.8"
  },
  "devDependencies": {
    "brfs": "^1.4.3",
    "transform-loader": "^0.2.3"
  }

Any help/clues will be really appreciated as I’ve spent a couple hours on this already, to no avail.

I’ve never used browserify so not entirely sure how you’ve set it up but you need to add the brfs transform to its configuration. It’s not enough to just install it. See https://github.com/substack/brfs#or-with-the-api for the brfs documentation on it. There’s a Meteor-specific browserify package that might be helpful called cosmos-browserify. Seems you’d set up a json config for that with something like:

{
    "transforms": {
        "brfs": {} <-- Options go here if there are any...
    }
}

See https://github.com/elidoran/cosmos-browserify#appbrowserifyoptionsjson

It may be possible to use the plain npm browserify package now that Meteor supports npm properly but someone else will have to chime in if they have info on that.

fs is Node’s disk package. Is it a permissions issue?

He’s using brfs (a browser equivalent of node’s fs). It’s a transform plugin for browserify that allows it to transform fs.X calls to brfs.X.

Thank you for your replies and sorry for a late response (was busy with other projects).

So, I have tried to implement your suggestion, but I can’t seem to get fs transform to brfs. I exported brfs to the browser and was able to call it in the console, but not fs. Am I missing some options that go into the config file’s transform?

Looks like might have the same issue with another package using the fs underneath… we were hoping to remove our dependence on cosmos:browserify as it seems that Meteor 1.3 was hopefully going to take care of browser side npm usage…

did you manage to resolve?