Uncaught TypeError: _d3Selection.select(...).append(...).attr(...).style(...).styles is not a function

[ccolonna]

🐛Bug report

Describe the bug

<TimeAxis> raise this error. This works good except for a fluxible app i inherit. Maybe you can suggest a workaround ? :)

Uncaught TypeError: _d3Selection.select(...).append(...).attr(...).style(...).styles is not a function
    renderTimeAxis TimeAxis.js:200
    wrappedMethod react-hot-loader.development.js:540
    componentDidMount TimeAxis.js:110
    wrappedMethod react-hot-loader.development.js:530
    React 6
    unstable_runWithPriority scheduler.development.js:653
    React 5
    unstable_runWithPriority scheduler.development.js:653
    React 6
    onStoreChange connectToStores.js:53
    wrappedMethod react-hot-loader.development.js:540
    emit index.js:129
    emitChange BaseStore.js:73
    updateInstances PatternStore.js:35
    callHandler Action.js:67
    handlersEach Action.js:45
    execute Action.js:44
    dispatch DispatcherContext.js:111
    loadPatternInstances loadPatternInstances.js:13
    run setImmediate.js:49
    runIfPresent setImmediate.js:69
    onGlobalMessage setImmediate.js:109
TimeAxis.js:200
    renderTimeAxis TimeAxis.js:200
    wrappedMethod react-hot-loader.development.js:540
    componentDidMount TimeAxis.js:110
    wrappedMethod react-hot-loader.development.js:530
    React 6
    commitRootImpl self-hosted:954
    unstable_runWithPriority scheduler.development.js:653
    React 4
    performSyncWorkOnRoot self-hosted:897
    flushSyncCallbackQueueImpl React
    unstable_runWithPriority scheduler.development.js:653
    React 6
    onStoreChange connectToStores.js:53
    wrappedMethod react-hot-loader.development.js:540
    onStoreChange self-hosted:850
    emit index.js:129
    emitChange BaseStore.js:73
    updateInstances PatternStore.js:35
    updateInstances self-hosted:850
    callHandler Action.js:67
    handlersEach Action.js:45
    forEach self-hosted:225
    execute Action.js:44
    dispatch DispatcherContext.js:111
    dispatch self-hosted:850
    loadPatternInstances loadPatternInstances.js:13
    run setImmediate.js:49
    runIfPresent setImmediate.js:69
    onGlobalMessage setImmediate.js:109

The above error occurred in the <TimeAxis> component:
    in TimeAxis (created by ChartContainer)
    in g (created by ChartContainer)
    in svg (created by ChartContainer)
    in ChartContainer (created by TimeIntervalFilter)
    in div (created by TimeIntervalFilter)
    in div (created by TimeIntervalFilter)
    in TimeIntervalFilter (created by PatternInstancesNetwork)
    in div (created by PatternInstancesNetwork)
    in PatternInstancesNetwork (created by PatternInstancesNetworkView)
    in PatternInstancesNetworkView (created by storeConnector(PatternInstancesNetworkView))
    in storeConnector(PatternInstancesNetworkView) (created by HistoryHandler)
    in HistoryHandler (created by RouteHandler)
    in RouteHandler (created by storeConnector(RouteHandler))
    in storeConnector(RouteHandler) (created by Application)
    in div (created by Application)
    in Application (created by storeConnector(Application))
    in storeConnector(Application) (created by HistoryHandler)
    in HistoryHandler (created by RouteHandler)
    in RouteHandler (created by storeConnector(RouteHandler))
    in storeConnector(RouteHandler) (created by contextProvider(storeConnector(RouteHandler)))
    in contextProvider(storeConnector(RouteHandler))

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. react-dom.development.js:19527
    React 11
    unstable_runWithPriority scheduler.development.js:653
    React 5
    unstable_runWithPriority scheduler.development.js:653
    React 6
    onStoreChange connectToStores.js:53
    wrappedMethod react-hot-loader.development.js:540
    emit index.js:129
    emitChange BaseStore.js:73
    updateInstances PatternStore.js:35
    callHandler Action.js:67
    handlersEach Action.js:45
    execute Action.js:44
    dispatch DispatcherContext.js:111
    loadPatternInstances loadPatternInstances.js:13
    run setImmediate.js:49
    runIfPresent setImmediate.js:69
    onGlobalMessage setImmediate.js:109

To Reproduce Cannot suggest a way to reproduce as this works everywhere escept for a fluxible app i inherit

[raghureddys]

I am also having same issue, any suggestions?

[ccolonna]

I inspect the problem it is related to d3 selection multi archived package. Here is the line of code where it crash: https://github.com/esnet/react-timeseries-charts/blob/aa9c9b368100d78337b562d9e2833f2d90d9de3d/src/components/TimeAxis.js#L181 .

At the moment I tried to apply a patch like this but I didn't test if it breaks the code somewhere. The component anyway mounts.

        const g = select(ReactDOM.findDOMNode(this)) // eslint-disable-line
            .append("g")
            .attr("class", "x axis")
            .style("stroke", "none");

        // .styles(valueStyle)

        Object.entries(valueStyle).forEach(([prop, val]) => g.style(prop, val));

        g.call(axis.tickSize(tickSize));

[daniel-parton-bhp]

Also having the same issue from Version 0.15.0 up. This doesn't happen in Version 0.14.0

[X4vi3rXu]

Hi all, I found two version d3-selection in my yarn.lock and try remove another not this project used one it works for me

so, I think is d3 problem, maybe?