fontfaceobserver icon indicating copy to clipboard operation
fontfaceobserver copied to clipboard

Issue in declaring the Class in es6 project.

Open MVSTEJA opened this issue 7 years ago • 11 comments

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

MVSTEJA avatar May 26 '17 12:05 MVSTEJA

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

bramstein avatar May 31 '17 15:05 bramstein

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

rkmax avatar Jun 06 '17 21:06 rkmax

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

bramstein avatar Jun 07 '17 05:06 bramstein

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

MVSTEJA avatar Jun 07 '17 06:06 MVSTEJA

@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.

bramstein avatar Jun 07 '17 06:06 bramstein

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

renestalder avatar Jun 27 '17 10:06 renestalder

@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.

bramstein avatar Jul 12 '17 13:07 bramstein

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.

vincentwoo avatar Apr 07 '18 00:04 vincentwoo

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

scsskid avatar Aug 14 '19 10:08 scsskid

confirming this issue. does not work with es6 imports.

z1haze avatar May 19 '20 17:05 z1haze

Having issues with imports as well.

rafagsiqueira avatar Aug 24 '22 13:08 rafagsiqueira