Problem with production version (serve build)

[erosval]

Bug reports:

I'm using the component from an application created using create-react-app, everything works fine as long as I do not build. When I execute:

    npm run build
    serve -s build
    http://localhost:5000/

I see a blank page and this is what i see in console log:

Something strange seems to happen when I produce the minimized version. Has anyone already had a similar problem?

---

Please consider also to support this project https://beerpay.io/chrvadala/react-svg-pan-zoom

[lionkeng]

The browser field in react-svg-pan-zoom's package.json is set to use the UMD bundle. CRA's build process (ala webpack) is using that field as a hint and end up pulling the UMD bundle to include in your final app build. I believe React only works with es6 classes. The quick-fix here is to change your import statements to explicitly use the ES bundle in this package. For e.g. change import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom' to import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom/build-es'

[chrvadala]

You're right. It seems that webpack gets the library from the browser key. https://github.com/webpack/webpack/issues/4674

I'm going to replace browser key with unpkg as they did here https://github.com/blockstack/blockstack.js/pull/621/files

[chrvadala]

It's fixed into the develop branch

[chrvadala]

Fixed with v3.1

[ericksepulveda]

I had this issue and upgrading to v3.1 fixed it BUT it broke the rest of my site layout :D

[chrvadala]

Have you read this guide?https://github.com/chrvadala/react-svg-pan-zoom/blob/master/docs/migrate-from-v2-to-v3.md

[ericksepulveda]

I had not seen it but from the name it does not look relevant since I did an upgrade from ^3.0.3 to ^3.1.0. I'll check it out though, thanks!