Errors when Running from Script Src

[geirman]

I'm building a photo slideshow component, and I'd like to animate each photo in using variations of scale, translateX, translateY, and opacity. So your component looks perfect!

The page is created without a build pipeline, so I'm including your script using unpkg. I've worked through several errors already, but I'm stuck with these three errors. The page works without your animate library (sans animations of course) and now I'm not sure what the problem might be. Seems like it should all work.

Here's how I'm importing your library, pulling in react-transition-group as a dependency for your library.

<script src="https://unpkg.com/react-transition-group@2.2.0/dist/react-transition-group.min.js"></script>
<script src="https://unpkg.com/react-simple-animate@1.7.2/lib/animate.js"></script>

And here's how I'm using your library.

        const Photo = ({src,questCode}) => {
            return (
                <div className="photo-container">
                    <Animate
                        startAnimation={true}
                        startStyle={{"transform":"scale(0.5)"}}
                        endStyle={{"transform":"scale(1)"}}
                        durationSeconds="0.3"
                        easeType="linear">
                        <img key={questCode} className="photo" src={src} />
                    </Animate>
                </div>
            )
        }

Here's the source of the entire file, just unzip the html page into a folder then run python -m SimpleHTTPServer in that folder to view it using a webserver... slideshow.html.zip

[bluebill1049]

hey @geirman,

I think you should use create-react-app

https://github.com/facebookincubator/create-react-app

This will save your time for all those build config and babel set up.

let me know if that works for you.

cheers bill

[geirman]

yeah, that would be the easy solution, but In this case I'm integrating this page with a non-react app. Do you know what's going on?

[bluebill1049]

Sorry, i don't have experience building on non-react app 😢

I would build your photo gallery component with create react app, and build it. yarn build

and then just make it target your non-react app dom element.

ReactDOM.render(<PhotoGallery />, document.getElementById('id'));

[geirman]

I will eventually do something like that, but it's not so simple to merge the two deployment workflows. In the meantime, this is what I've got to work with. And it should in theory work precisely the same. Totally understand if you don't want to look into this, and I thank you for your time (and your contribution) regardless.

However, if you do take a look, it should be pretty simple... just unzip and run that page to verify the error. You may see the problem right away (fingers crossed).

Again, thanks!

[bluebill1049]

ha, I did open up the file and take a look, in fact react-transition-group doesn't work as well.

you can try this following hack

<script> var exports = {}; </script> on top of the file.

[geirman]

Nice hack, and thanks for taking a look but unfortunately that just gives me a different set of errors. Is that what you saw too? If that worked for you but not me, then I'm really confused.

[bluebill1049]

sorry mate, can't figure it out. you may want to post the question on stack overflow?

[geirman]

Ok then, if that's the best you can do ;)

Seriously, appreciate your effort. I'll keep searching

[AmirinNS]

I also had the same problem. It worked perfectly in create-react-app but not in other non react-app setup. Any solution for this?

[bluebill1049]

hey @AmirinNS, i haven't spend too much time without using a build tool (eg. webpack hence create react app works)... i may take a look at it, once i am complete with incoming hooks.