bramstein/fontfaceobserver

Issue in declaring the Class in es6 project.

MVSTEJA opened this issue · 11 comments

MVSTEJA commented

I am using the font face observer in my react es6 project this way --

import FontFaceObserver from 'fontfaceobserver';
const openSansObserver = new FontFaceObserver('Open Sans');

Or even this , as is mentioned in the docs -
var FontFaceObserver = require('fontfaceobserver');
const openSansObserver = new FontFaceObserver('Open Sans');

and its throwing error such as this.
_fontfaceobserver2.default is not a constructor. / FontFaceObserver is not a constructor

Not using modules?
You can also download a copy and manually include it in your project. You can then use the global Font­Face­Observer constructor to load your fonts. This somehow works for me as shown below, but above two should either be broken now or there is something in the way you guys export your module. If i am wrong please ignore this. Else kindly change the the export.

Working Version -

require('fontfaceobserver');
const openSansObserver = new FontFaceObserver('Open Sans');//eslint-disable-line no-undef

bramstein commented

Hmm, this looks specific to your project or transpiler. If you have a reproducible test case I can have a look.

rkmax commented

I'm having the same issue, I'm using https://github.com/react-boilerplate/react-boilerplate as it

bramstein commented

I checked out react-boilerplate and I can't reproduce this. It works out of the box (the boilerplate already includes Font Face Observer).

MVSTEJA commented

Can you check my repo @bramstein. https://github.com/MVSTEJA/React-Redux-BoilerPlate-Es6. Against this path :- React-Redux-BoilerPlate-Es6/src/main.js .

bramstein commented

@MVSTEJA Can you try upgrading to the 2.x branch of Font Face Observer? The only major API change is that the check method has been renamed to load (line 20 in src/main.js). I think the 2.x branch also fixes the problem you're seeing.

renestalder commented

Do you plan to publish a full es6 version with proper imports at some point?

  • 👍6
bramstein commented

@renestalder Yea, that might be a good idea. I was waiting for browser support to catch up (re: modules), and then I'll have a look at it.

vincentwoo commented

I would really love if FFO was written as an ES6 module, with dist outputs still suitable for direct browser inclusion. Right now, using FFO in ES6 involves still doing a require. Going the ES6 route also makes it easier to import the promise/promiseless versions more simply.

It's uncomfortable to have consumers of FFO rely on the output of google's closure compiler, instead of allowing their own build tools to perform tree shaking. FFO, as a relatively small library, likely does not benefit much from closure's advanced compilation settings. Users consuming the minified library file (the only option) will not be able to plumb source maps all the way through FFO, and will also likely suffer a double minification penalty.

  • 👍4
  • 😕1
scsskid commented

yes please +1
great script anyways, thanks for the effort!

z1haze commented

confirming this issue. does not work with es6 imports.

  • 👍1
  • 👀1
rafagsiqueira commented

Having issues with imports as well.