Compiled ES5 Version?

[kirkins]

I'm trying to use this with create-react-app. There is a compile issue for this dependency.

The documentation says:

Some third-party packages don't compile their code to ES5 before publishing to npm. This often causes problems in the ecosystem because neither browsers (except for most modern versions) nor some tools currently support all ES6 features. We recommend to publish code on npm as ES5 at least for a few more years.

Open an issue on the dependency's issue tracker and ask that the package be published pre-compiled.
Note: Create React App can consume both CommonJS and ES modules. For Node.js compatibility, it is recommended that the main entry point is CommonJS. However, they can optionally provide an ES module entry point with the module field in package.json. Note that even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers.

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify

The error is:

> react-scripts build

Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file: 

 	./node_modules/fb/lib/fb.js:130 

Read more here: http://bit.ly/2tRViJ9

[dantman]

This is not a browser library, it's for server usage. It shouldn't be imported into the code packaged up to the client. For browser usage use Facebook's own client side JavaScript API, it has extra features that can only be implemented client side by Facebook.

[kirkins]

@dantman ok thank you

[kirkins]

@dantman it's weird that the module works perfectly fine on my front-end application.

I already have user tokens for Facebook so I'm using the FB object and it works fine for returning info for users and photos. The only issue I have on the front-end is building it with webpack.

[kirkins]

If anyone else wants an ES5 version here it https://www.npmjs.com/package/fb-es5

I've only tested the graph api part, handling auth with firebase.

[dantman]

The code is built with stage-0 + babel-preset-env with the target: {node: 4} setting.

If you really, really, want to webpack it (even though I still think a wrapper for Facebook's Client side JS would be much better). In theory it should work if you require fb/src instead of fb (which uses fb/lib add a babel-loader targeting the files in node_modules/fb, overriding the settings for that loader with a copy of our .babelrc where you change ["env", {"targets": {"node": 4}}] to ["env", {"targets": {"browsers": "> 1%, last 2 versions"}}] so your bundler compiles the code based on browser requirements instead of what node 4 supports.

[kirkins]

It was a dumb idea. The compiled version broke pretty quickly.

Simple ajax was a better solution.

[dantman]

Ok, that would be expected. The library isn't intended for browser usage so it uses a node-http based web request library not a XHR or fetch based web request library.

Keep in mind that the FB.api(..., callback) format of this library matches the api of Facebook's own client-side library.

You could write a getFB(env) function for your application. On the server populate that env with an access token relevant for the current request. Then you could write 2 versions of that file. A getFB.js for the server and a getFB.browser.js for the client (use the "browser" field in package.json). The server library would require('fb') and use FB. withAccessToken(env.access_token) to give you a FB from this library with the access token for the request (return it in a Promise). And the browser library would return a promise waiting for the Facebook client library to load, and then just return FB when loaded.

Then your client/server-agnostic code would always get a promise from getFB(env) that would resolve to a fb that you can call fb.api(..., callback) on.

If you want the extra features this library has like fb.api(...) => promise you can just make your browser code return a wrapper around FB instead of FB itself and add that stuff in.