Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ccolonna opened this issue Nov 25, 2020 · 4 comments

Comments

@ccolonna
Copy link

🐛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
Copy link

I am also having same issue, any suggestions?

@ccolonna
Copy link
Author

ccolonna commented Dec 2, 2020

I inspect the problem it is related to d3 selection multi archived package. Here is the line of code where it crash:

.

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
Copy link

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

@X4vi3rXu
Copy link

X4vi3rXu commented Mar 12, 2021

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants