search

plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.18k stars 1.03k forks source link

Meteor dynamic module cant create d3-interpolate with nivo/core #2477

Closed sbilgil closed 6 months ago

sbilgil commented 11 months ago

Thanks for using nivo

Before creating an issue...

Are you asking a question?

Please don't file GitHub issues to ask questions. Try to use the discord channel first: https://discord.gg/n7Ft74f.

Describe/explain the bug I am responsible for an app which is React Meteor app. In this app we have component PieChart which uses nivo/pie ResponsivePie component and which import some part from nivo/core. And in nivo/core there is dependency on d3-interpolate. When we build the meteor app and dockerize it it works on Microsoft IE and Edge on windows clients. And also works on Chrome on linux clients. But other browsers creates an error like : In one of the project nivo is used. In one component nivo pie component used. And nivo-pie.es.js use components from @nivo/core and in nivo-core.es.js there is a code like : var useAnimatedPath = function useAnimatedPath(path) { var _useMotionConfig = useMotionConfig(), animate = _useMotionConfig.animate, springConfig = _useMotionConfig.config; var previousPath = usePrevious(path); var interpolator = useMemo(function () { return interpolateString(previousPath, path); }, [previousPath, path]); var _useSpring = useSpring({ from: { value: 0 }, to: { value: 1 }, reset: true, config: springConfig, immediate: !animate }), value = _useSpring.value; return to(value, interpolator); }; where d3-interpolate's part of interpolateString is used. And our app(written in meteor which dynamically create components i guess) is dockerized and used. But if it is used in linux chrome or windows edge it is ok. but when used in other browsers it fails with below error : TypeError: ((c && c.eval) || eval)(...).apply is not a function t http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:1975 g http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:7 q http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:7 resolve http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:7 o http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:9 module /node_modules/d3-interpolate/src/value.js:1 t http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:1975 g http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:7 n http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:7 o http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:9 module /node_modules/d3-interpolate/src/index.js:1 t http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:1975 g http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:7 n http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:7 o http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:9 module /node_modules/@nivo/core/dist/nivo-core.es.js:1 t http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:1975 g http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:7 n http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:7 o http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:9 module /node_modules/@nivo/pie/dist/nivo-pie.es.js:1 t http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:1975 g http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:7 n http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:7 o http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:9 module /imports/ui/components/charts/PieChart.jsx:1 t http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:1975 g http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:7 n http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:7 o http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:9 module /imports/ui/components/analytics/AnalyticsCard.jsx:1 t http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:1975 g http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:7 n http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:7 o http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:9 module /imports/ui/components/analytics/AnalyticsDashboard.jsx:1 t http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:1975 g http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:7 n http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:7 o http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:9 h http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:1975 t http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:1975 bindEnvironment http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:1 promise callback*n/t.makeCompatible/n.prototype.then http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:1971 dynamicImport http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:1975 D http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:2093 Mi http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:69 Qo http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:69 fs http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:69 ds http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:69 Zs http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:69 Ys http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:69 Vs http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:69 ys http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:69 _o http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:69 bindEnvironment http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:1 promise callback*n/t.makeCompatible/n.prototype.then http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:1971 onNewData http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 next http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 M http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 A http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 e http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 K http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 K http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 next http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 i http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 ie http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 broadcastQueries http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 broadcastQueries http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 broadcastQueries http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 m http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 next http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 M http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 A http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 e http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 next http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 next http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 M http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 A http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 e http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 next http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165 M http://178.242.135.26:20004/88290784a54f278964783d4f4f504506f3255c34.js?meteor_js_resource=true:165

To Reproduce My React Component using nivo/pie is: <ResponsivePie data={nivoData} margin={margin} innerRadius={0.5} padAngle={0.7} cornerRadius={3} colors={{ scheme: 'blues' }} borderWidth={1} borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }} sliceLabel={sliceLabel} radialLabel={radialLabel} tooltip={tooltip({ formats, x, y })} radialLabelsSkipAngle={20} slicesLabelsSkipAngle={20} animate motionStiffness={90} motionDamping={15} onClick={handleOnClick} {...otherProps} /> Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

stale[bot] commented 7 months ago

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

plouc commented 6 months ago

@sbilgil, the pie chart works well in Firefox as far as I can tell. I'm going to close this issue, until you can reproduce the issue in codesandbox, or provide a repo with some easy steps to reproduce.