React-beautiful-dnd: Uncaught Error: storeKey has been removed and does not do anything while importing DragDropContext (using react-redux 6.0.0)

[pbylina]

Bug or feature request?

bug

Expected behavior

Compile application successfully

Actual behavior

Stack trace:

Uncaught Error: storeKey has been removed and does not do anything. To use a custom Redux store for specific components, create a custom React context with React.createContext(), and pass the context object to React-Redux's Provider and specific components like: . You may also pass a {context : MyContext} option to connect
at invariant (main.js:46691)
at connectAdvanced (main.js:118625)
at connect (main.js:118858)
at Module../node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js (main.js:95084)
at __webpack_require__ (main.js:725)
at fn (main.js:102)
at Module../src/index.js (main.js:154095)
at __webpack_require__ (main.js:725)
at fn (main.js:102)
at Object.0 (main.js:161035)

Generated here:

https://github.com/reduxjs/react-redux/blob/63af52f1b776b2223027c1a73c0f2a725c377666/src/components/connectAdvanced.js#L86

Steps to reproduce

What version of React are you using?

react: 16.5.2
redux: 4.0.1
react-redux: 6.0.0

What version of react-beautiful-dnd are you running?

10.0.3

Demo

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { DragDropContext } from 'react-beautiful-dnd';

import App from './routes/app.container';
import store from './modules/store';

const render = () => {
  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>, document.getElementById('app'),
  );
};

render();

Any solutions or I have to downgrade react-redux?

[michaelshiel]

We have the same issue after adding react-beautiful-dnd to our existing project (also using react-dnd and redux/react-redux)

[pbylina]

@michaelshiel For now downgrading react-redux to lower version (5.1.1) is a solutions for me.

[alexreardon]

1. We are looking to upgrade to react-redux v6 (or going away from it) #984
2. It is strange that you need to downgrade. Redux is an internal dependency which is locked to v5. v6 does not satisfy our version range so your bundler should not be trying to use a v6 redux with a v5 dependency. I think something strange is going on there

[benflinn]

yeah broken here too.

[rafde]

Not sure why this was closed. This error is still present in the latest version. Please upgrade to latest react-redux and dont use storeKey

[Venryx]

A way to solve this without downgrading the whole-project react-redux version is by using the string-replace-webpack-plugin package: https://github.com/jamesandersen/string-replace-webpack-plugin

My usage of it in my webpack-config:

webpackConfig.module.rules.push(
    {
        //test: /connected-(draggable|droppable).js$/,
        test: /react-beautiful-dnd.esm.js$/,
        loader: StringReplacePlugin.replace({replacements: [
            // make react-beautiful-dnd import react-redux using a relative path, so it uses its local v5 instead of the project's v6
            {
                pattern: /from 'react-redux';/g,
                replacement: (match, offset, str)=>"from '../node_modules/react-redux';",
            },
        ]}),
    },
);

[alexreardon]

This is closed because it feels like a bundler issue. If a project declares that it needs 5.x of a dependency, then a 6.x dependency should not be provided to it

/cc @TrySound thoughts?

[Venryx]

@alexreardon Agreed, it is a bundler issue -- at least in my case. For other reasons, I earlier on set my webpack-config so that any node-module imports (including from libraries), will look for the module in the root node_modules folder first, and only if it isn't found there, to use the local/nested version.

It sounds odd to have done this (some would even be horrified!), but it helped with a few issues (some at runtime, and some with Typescript), and has for the most part worked fine. (it also has the nice side effect of substantially reducing -- by about 50% -- the total module-count and therefore build time)

For libraries that do, in fact, need the exact version they specify, I use the string-replace-webpack-plugin to bypass my "use root version first" resolve-config.

[rafde]

The preference for this library is to use 2 versions of react-redux bundled? That seems off and unfortunate considering that the new react-redux 6 is conforming to newer react standards and not triggering errors in when <StrictMode> is used.
¯_(ツ)_/¯
Thanks for the workaround solution, though.

[alexreardon]

We plan on upgrading react-redux once some performance issues are overcome https://github.com/reduxjs/react-redux/issues/1177

For now if you want to use react-redux v6 then your bundler will need to provide a v5 react-redux to react-beautiful-dnd. This should be the correct behaviour of a bundler as we declare a dependency on 5.x

[alexreardon]

for libraries that do, in fact, need the exact version they specify

It would be a bad idea to provide a dependency to a piece of software that falls outside of its supported sem ver range

[Venryx]

@alexreardon Yeah it sounds really bad, but in practice I've had almost no issues (this library is the second exception I think) with just forcing all the libraries to use the latest (other-module-specified) versions of other libraries. (it's a good sign as it means most libraries do not add breaking changes -- or when they do, other libraries at least produce new versions that are compatible with it, so I upgrade them all in one go)

I can definitely understand people shaking their head at this configuration though, which is why I only use this in my personal projects. I do so for the bundle size reduction (module-count drops from ~2600 to ~1400, with a corresponding build-time decrease), and more importantly, to fix incompatibilities between versions requested by different libraries; some keep requesting old incompatible versions because their authors are no longer developing them, and I don't want to bother with creating a fork.

Though I suppose I could use the string-replace-webpack-plugin for these "use root version" exceptions, instead of changing the norm and using it for the "use own version" exceptions. I might switch to doing that, though it would be a shame to be increasing the build-time by ~85% in the process. (I've tried using webpack build-time reducers such as hard-source-webpack-plugin, happy-pack, dll-plugin, etc., but most of them I've had issues with, particularly out-of-memory errors -- though I might have another go soon)

[TrySound]

Do you have anything like yarn resolutions in your package.json?

[salvoravida]

We plan on upgrading react-redux once some performance issues are overcome reduxjs/react-redux#1177

For now if you want to use react-redux v6 then your bundler will need to provide a v5 react-redux to react-beautiful-dnd. This should be the correct behaviour of a bundler as we declare a dependency on 5.x

6.0.1 to 6.2.1 - refactor - fix Performance
https://github.com/reduxjs/react-redux/pull/1201

test it now wih:

"react-redux": "npm:@salvoravida/react-redux@^6.2.1"

[ghost]

Thanks @alexreardon removing my own react-redux dependency handled it for it me.

This is a great component with excellent docs, perhaps a note in the install doc would be in order. It seems a common enough use case for someone to have a react-redux dependency prior to adding this, I did look through the issues prior to posting but totally missed this.