Progress Error: this.element.progress is not a function

[Maxhodges]

unable to get Progress working

import React from 'react'
import {Progress} from 'stardust'

const ProgressTest = () => (
    <Progress percent={66} className='success'>
        The progress was successful
    </Progress>
);

export default ProgressTest;

yields

Error: this.element.progress is not a function
Progress.refresh
http://localhost:9002/static/preview.bundle.js:4034:2
Progress.componentDidMount
http://localhost:9002/static/preview.bundle.js:4034:2
ReactCompositeComponentWrapper.invokeComponentDidMountWithTimer
http://localhost:9002/static/preview.bundle.js:3380:2
CallbackQueue.notifyAll
http://localhost:9002/static/preview.bundle.js:2137:2
ReactReconcileTransaction.close
http://localhost:9002/static/preview.bundle.js:3554:2
ReactReconcileTransaction.closeAll
http://localhost:9002/static/preview.bundle.js:1021:2
ReactReconcileTransaction.perform
http://localhost:9002/static/preview.bundle.js:1021:2
batchedMountComponentIntoNode
http://localhost:9002/static/preview.bundle.js:2209:2

seems it can't resolve Progress from stardust

any tips? or any info I can supply to help? I can make my repo public so you can test but is there anything I can troubleshoot first? Using React + Meteor + Semantic. Could we nice if we could get stardust working. Was there any syntax change since that guide was written?

[Maxhodges]

should it work on this version?
"stardust": "^0.12.4",

[levithomason]

It should. this.element.progress is the SUI jQuery plugin. Ensure you have loaded jQuery first, then SUI JS, then your app. Ensure you have jQuery on the console in the browser, and if so, select an jQuery element and see if it has the progress method on it.

[levithomason]

Was there any syntax change since that guide was written?

Which guide are you referring to here?

[Maxhodges]

i mean these instructions
https://technologyadvice.github.io/stardust/#Progress

jquery loaded

>if (window.$) { 
    // jQuery is loaded
console.log("yup");  
} else {
    // jQuery is not loaded
}

output: yup

Is there another way I should be loading it? Maybe your example should load it too?

import $ from 'jquery';
import jQuery from 'jquery';


import React from 'react'
import {Progress} from 'stardust'


const ProgressTest = () => (
    <Progress percent={66} className='success'>
        The progress was successful
    </Progress>
);

export default ProgressTest;

[Maxhodges]

isn't the whole point of stardust so that we don't need to use jQuery when combining SUI with React?
We're re-creating SUI in react ourselves because we can't get stardust to work!

[levithomason]

isn't the whole point of stardust so that we don't need to use jQuery when combining SUI with React?

That is the goal, and we're close to it. As noted in the README, Stardust is in development and undergoing big changes. Note the current high priority v1.0 Migrations issues:

1. Moving legacy component APIs to our v1 API Update legacy component APIs to the v1 API #269
2. Removing jQuery and SUI JS Remove jQuery dependency #247

An index.html was recently added to the README under Usage showing what to do for now:

...
  <!-- Temporary script dependencies until we're done removing jQuery -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script>
</head>
...

We're re-creating SUI in react ourselves because we can't get stardust to work!

We've been at this a while and it is no small undertaking. We ought to join forces on this. We've got a good amount of manpower and smarts behind this project. I'd encourage you to take a look at How Can I Help? and put those efforts into PRs. You'll gain the benefit.

Will close this issue for now, let me know if you still have issues and we'll help where we can.