Instafeed.js: ES6 compatibility

[kaleidografik]

Hi folks, is Instafeed compatible for use in an ES6 environment? Hoping to import and include this rather than including it as a stand alone script on the page?

[stevenschobert]

Yes! Instafeed.js should be compatible with ES6/CommonJS imports.

What issues are you seeing?

[kaleidografik]

Am trying to import via ES6 using import Instafeed from 'instafeed'; but no luck, nothing importing?

[stevenschobert]

Gotcha! Let us check on this and get back to you — thanks for the report!

[stevenschobert]

Hey @kaleidografik, quick follow up question: are you using ES6 natively in the browser, or are you using ES6 via a transpiler/build tool like babel + webpack?

[kaleidografik]

Hey @stevenschobert - we're using Codekit, which uses the bundling format IIFE? Does this help? I don't believe this is transpiling anything via Babel.

[kaleidografik]

Hey @stevenschobert - did you manage to investigate this further? Thanks.

[stevenschobert]

Hey @kaleidografik, yes I did get some time to look into it, but I'm afraid I don't have a fix for it yet.

I had originally thought that the UMD (Universal Module Definition; the technique we use to export the library) supported ES modules, but I was mistaken on that. We do support CommonJS, AMD, and standard browser globals.

I have some ideas on how to address this, but we'll have to prioritize it with the other features we still haven't implemented.

---

In the short term, I believe Codekit uses Rollup.js for it's module bundling, and I found a support page on their site here: https://codekitapp.com/help/rollup/

I'm not sure if Codekit allows you to use Rollup plugins, but there is Rollup plugin for importing CommonJS modules that would work: https://github.com/rollup/plugins/tree/master/packages/commonjs

[stale[bot]]

This issue has been automatically marked as stale because it hasn't had new comments in the last 3 months. It will be closed if no further activity occurs. If you still need assistance with this issue, or believe it shouldn't be closed, please respond with a new comment to let us know.
Thank you all for your contributions.

[stevenschobert]

Not stale — still needs addressing.

[stevenschobert]

Hey everyone! Just wanted to let y'all know that ES module support will be available in the next release 🎉

[wallythewebdev]

Quick question with note to this, but I have found that instafeed.js works fine when it is referenced in my index.html file i.e.
<script src="instafeed.js
But if I let webpack bundle the file and reference the bundled file i.e.
<script src="instafeed.bundle.js">
It then does not work, throwing an error that instafeed is not defined.

I'm wondering if this is related to the above? and if the above fix would include this issue?

Thanks,
Wally

[stevenschobert]

Hey folks! Just wanted to let everyone know that v2.0.0-rc3 is now available, and includes ES module support. (Sorry it took me so long!)

The dist/ folder now contains the following:

dist/
├── instafeed.es.js
├── instafeed.es.min.js
├── instafeed.es.min.map
├── instafeed.js
├── instafeed.min.js
└── instafeed.min.map

ES module support is available in the *.es.* version of the files. I've also added the module and exports entries to package.json, so that tools like Rollup.js should be able to automatically pick the ES version of Instafeed.js

Please give it a shot and let me know if you run into any issues!

[kaleidografik]

Thanks @stevenschobert - works a treat!