progressbar.js icon indicating copy to clipboard operation
progressbar.js copied to clipboard

shifty.interpolate is not a function

Open sieteunoseis opened this issue 4 years ago • 11 comments

Getting error "shifty.interpolate is not a function" on the new version 1.1.0

sieteunoseis avatar Nov 01 '19 18:11 sieteunoseis

Same here :(

SamKingDev avatar Nov 04 '19 10:11 SamKingDev

Could you provide a bit more details? I can't seem to replicate the issue in local tests or JSFiddle.

kimmobrunfeldt avatar Nov 05 '19 00:11 kimmobrunfeldt

I'm running it in Electron 7.0 on Nodejs v10.16.0. Let me see if it does the same error in a sandbox environment.

sieteunoseis avatar Nov 05 '19 17:11 sieteunoseis

Hi, i switched from electron 2.0.2 to 4.1.2 and now i have this problem too.

eliachiarucci avatar Nov 11 '19 23:11 eliachiarucci

Hello!

Tried to investigate a little, as an exercise routine for react/electron/JS etc stuff, to remove the error "Object(...) is not a function" that was blocking the app in electron.

It seems that importing tween from shifty doesn't work as expected. It seems that react (version 15.6.2) is not able to resolve any named exports - it can only resolve the default export, i.e. import {tween} from 'shifty' statement can't actually find a tween export.

Maybe Node is resolving shifty to dist/shifty.node.js rather then dist/shifty.js (as far as I understood the only difference between dist/shifty.js and dist/shifty.node.js should be that the former references window and the latter references global).

Quick and dirty hack:

in file node_modules\progressbar.js\src\path.js

Line 5 var Tweenable = shifty.shifty.Tweenable; Line 151 return shifty.shifty.interpolate(this._opts.from, this._opts.to, this.value(), easing); Line 156 return shifty.shifty.interpolate(this._opts.from, this._opts.to, progress, easing);


Side problem...to remove from the console

“Uncaught (in promise) undefined” error

I added an empty failure call in line 121 of

node_modules\progressbar.js\src\path.js

Path.prototype.animate = function animate(progress, opts, cb) {
// stuff here
   }).then(function(state) {
// stuff here
    }, function() {});  //empty call added

Apparently, no functional problem in the app behavior, working as expected.

To solve this warning Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. I installed create-react-class and modified the relevant calls in

node_modules\react-progressbar.js\dist\react-progressbar.js on top of the file, prepend var createReactClass = require('create-react-class'); then in the relevant parts:

       // var Shape = React.createClass({
    var Shape = createReactClass({ 
	
	//    var Line = React.createClass({
    var Line = createReactClass({
  
	// var Circle = React.createClass({
    var Circle = createReactClass({

	// var SemiCircle = React.createClass({
    var SemiCircle = createReactClass({

Hope this helps...

(Just joined GitHub, first comment...be patient!)

alexer2k avatar Nov 26 '19 08:11 alexer2k

I am able to fix it by importing ProgressBar like below:

import ProgressBar from 'progressbar.js/dist/progressbar'

divyeshmakwana96 avatar Mar 03 '20 01:03 divyeshmakwana96

So I've found the most straightforward fix for this appears to be:

In the file: node_modules\progressbar.js\src\path.js

Update line 3 from: const shifty = require('shifty'); to const shifty = require('shifty').shifty;

Still to find out what is truly going on though as even the example from shifty (https://github.com/jeremyckahn/shifty/blob/master/README.md) needs the same fix as I get the same error with the following in my own code (that can be fixed the same way) const shifty = require('shifty'); shifty.tween({ from: { x: 0 }, to: { x: 10 } });

RoyMudie avatar Mar 12 '20 14:03 RoyMudie

Thanks for the heads up about this, and thanks for finding a good solution @RoyMudie. I have fixed Shifty's documentation!

jeremyckahn avatar May 12 '20 01:05 jeremyckahn

I tried the fix but the build failed: https://travis-ci.org/github/kimmobrunfeldt/progressbar.js/builds/685994475. Reverting back to the old require method worked. If someone is able to provide more information about the issue, I can take another look.

kimmobrunfeldt avatar May 12 '20 07:05 kimmobrunfeldt

Actually I realized from the comment by @divyeshmakwana96 that the package.json points to src/main.js instead of the built distributable file. I changed it to use dist/progressbar.js now and it should fix this. Can you test with latest main?

kimmobrunfeldt avatar May 12 '20 07:05 kimmobrunfeldt

Just as a note, this should be improved in Shifty 2.9.1: All modules are now published as ES6 modules. https://github.com/jeremyckahn/shifty/commit/3180c28345a2c10e44aca37a21a18b63c10814ab

jeremyckahn avatar Jun 23 '20 02:06 jeremyckahn