Popcorn: not available in browser

[ortonomy]

Describe the bug

Despite instructions here: https://popmotion.io/popcorn/, the popcorn lib is undefined on window

File download Download or link to the latest version of Popcorn. All functions will be available on the popcorn global variable (e.g. popcorn.velocityPerSecond).

How to reproduce

Steps to reproduce the behavior:

1. Go to codepen, jsfiddle, whatever
2. Add popcorn as dependency: https://unpkg.com/@popmotion/[email protected]/dist/popcorn.min.js
3. console.log(popcorn)
4. Empty object

Expected behaviour

1. popcorn lib available on global window object

Link to CodePen example (or similar)

https://jsfiddle.net/ortonomy/qtnm8kjo/100/

Device information

In which environment are you reproducing the bug?

• Device: macbook pro 13 2017
• OS: macOs catalina
• Browser chrome
• Version: > 80

[stokesman]

As a workaround, the library can be imported from either JSPM or Pika. Works in jsfiddle. import popcorn from 'https://jspm.dev/@popmotion/popcorn'; or import * as popcorn from 'https://cdn.pika.dev/@popmotion/popcorn/^0.4.4';

The root cause of this is fixed, the package just needs rebuilt and published.

[ortonomy]

@stokesman --- even in the browser?

[stokesman]

@ortonomy, if you're referring to the import, yes that works in most browsers. Requires the attribute type=module on the script tag (which jsfiddle adds automatically).

[ortonomy]

This still doesn't work, for example on codepen. has the module been fixed and / or republish to NPM? I don't understand why a primarily browser based module wouldn't be importable as minified in the browser

After import, it's just an empty object

[stokesman]

There have been no new versions of the package published. But regarding the workaround I'd previously suggested, this just worked for me on codepen:

import popcorn from 'https://jspm.dev/@popmotion/popcorn';
Object.keys(popcorn).forEach( key => console.log(key) );

It might also be worth mentioning that if you're only going to use a few functions from Popcorn, many of them can stand alone and you could just copy what you need from the source (though likely the published source is what you'd want since the actual source is typescript).

Those are just the ideas I can offer, I can't republish the package.

[stokesman]

@InventingWithMonster, it seems Popcorn will no longer be a separate package, but how about one last publish just to leave it with a working UMD build? I think the issue all along was the old rollup config didn't include the replace plugin to get rid of the process.env checks. The current source will produce a working build.

[ortonomy]

@stokesman -- thanks for all your help. Oddly I was seeing an empty object in console for the popcorn import. Perhaps it was because the object was so large or something else. I'll try again.

t might also be worth mentioning that if you're only going to use a few functions from Popcorn, many of them can stand alone and you could just copy what you need from the source (though likely the published source is what you'd want since the actual source is typescript).

I think this is a better idea. I may even just publish my own NPM with a few of the functions so I can use it from anywhere and keep it maintained.