Redux-logger export changed

Question

I have upgraded my webpack to the latest version. After fixing some issue with my webpack.config I can compile again. But now I am seeing the following errors when I am trying to run my site:

[redux-logger v3] BREAKING CHANGE
[redux-logger v3] Since 3.0.0 redux-logger exports by default logger with default settings.
[redux-logger v3] Change
[redux-logger v3] import createLogger from 'redux-logger'
[redux-logger v3] to
[redux-logger v3] import { createLogger } from 'redux-logger'

Uncaught TypeError: middleware is not a function
at applyMiddleware.js:39
at Array.map (<anonymous>)
at applyMiddleware.js:38
at createStore (createStore.js:51)
at configureStore (store.js:13)
at Object.<anonymous> (NavBar.js:7)
at Object.module.exports (bundle-hot.js:106583)
at __webpack_require__ (bootstrap 876f8fb1506d9b4ca875:707)
at fn (bootstrap 876f8fb1506d9b4ca875:112)
at Object.<anonymous> (App.js:6)

I went to the npm page for redu-logger and the example is still with the old format. Yet the doc page shows the changes.

This is my current store.js

import { applyMiddleware, compose, createStore } from 'redux';

import { thunk } from 'redux-thunk';
import { logger } from "redux-logger"
import { browserHistory } from 'react-router';
import { routerMiddleware } from 'react-router-redux';

import reducer from '../reducers';

const middleware = applyMiddleware(thunk, logger({collapsed:true}),     routerMiddleware(browserHistory));

export default function configureStore(initialState) {
const store = createStore(
    reducer,
    initialState,
    compose (
        middleware,
        window.devToolsExtension ? window.devToolsExtension() : f => f
    )
);

if(__DEVTOOLS__){
    if (module.hot) {
        // Enable Webpack hot module replacement for reducers
        module.hot.accept('../reducers', () => {
            const nextRootReducer = require('../reducers').default;
            store.replaceReducer(nextRootReducer);
        });
    }

}
return store;
}

The versions I am using:

"redux": "3.7.2"
"redux-thunk": "2.2.0",
"redux-logger": "3.0.6",
"react-router": "4.2.0",
"react-router-redux": "4.0.8",

---

Update #1

Following the answer of @Alechill I now get the following issue (which I believe is related):

sync.js:104 Uncaught TypeError: Cannot read property 'listen' of undefined
at syncHistoryWithStore (sync.js:104)
at Object.<anonymous> (NavBar.js:8)
at Object.module.exports (bundle-hot.js:106587)
at __webpack_require__ (bootstrap 1b638ac8e0fc25802b6f:707)
at fn (bootstrap 1b638ac8e0fc25802b6f:112)
at Object.<anonymous> (App.js:6)
at Object.<anonymous> (bundle-hot.js:66975)
at __webpack_require__ (bootstrap 1b638ac8e0fc25802b6f:707)
at fn (bootstrap 1b638ac8e0fc25802b6f:112)
at Object.<anonymous> (index-hot.js:9)

This is my NavBar.js top lines:

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import configureStore from '../store/store';
const store = configureStore();
const history = syncHistoryWithStore(browserHistory, store);

The error comes from syncHistoryWithStore which uses the store.

This was working before I upgraded to the latest version of webpack and all the dependencies. Could it be that it is called too soon?

Answer 1

You are importing logger but should instead import createLogger since the exports have changed

From the type defs:

export const logger: Redux.Middleware;
export function createLogger(options?: ReduxLoggerOptions): Redux.Middleware;

the logger you are importing is just a default instance of the middleware, but you are trying to call it as if it were the factory function

You can fix that in your module by:

import { createLogger } from 'redux-logger'
const middleware = applyMiddleware(thunk, createLogger({collapsed:true}), routerMiddleware(browserHistory))