abersager / redux-persist-cookie-storage

Redux Persist storage adapter for cookies
MIT License
92 stars 10 forks source link

Keeps craching after setup #18

Open andrew-oko-odion opened 5 years ago

andrew-oko-odion commented 5 years ago

NEXTJS APP

package.json

,
  "dependencies": {
    "@babel/core": "7.1.0",
    "@svgr/webpack": "2.4.1",
    "@uppy/core": "^0.27.3",
    "@uppy/dashboard": "^0.27.5",
    "@uppy/form": "^0.29.0",
    "@uppy/react": "^0.27.5",
    "@uppy/tus": "^0.27.5",
    "@uppy/xhr-upload": "^0.29.0",
    "@zeit/next-css": "^1.0.1",
    "animate.css": "^3.6.1",
    "axios": "^0.17.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "9.0.0",
    "babel-jest": "23.6.0",
    "babel-loader": "8.0.4",
    "babel-plugin-named-asset-import": "^0.2.2",
    "babel-preset-react-app": "^5.0.4",
    "bcrypt": "^1.0.3",
    "classnames": "^2.2.5",
    "cookie-parser": "^1.4.3",
    "cookies": "^0.7.3",
    "cookies-js": "^1.2.3",
    "css-loader": "1.0.0",
    "currency-formatter": "^1.4.3",
    "dotenv": "6.0.0",
    "dotenv-expand": "4.2.0",
    "express": "^4.16.4",
    "feather-icons": "^4.7.3",
    "file-loader": "^2.0.0",
    "history": "^4.7.2",
    "isomorphic-unfetch": "^3.0.0",
    "js-cookie": "^2.2.0",
    "jsonwebtoken": "^8.1.1",
    "jwt-decode": "^2.2.0",
    "loaders.css": "^0.1.2",
    "lodash": "^4.17.4",
    "moment": "^2.22.2",
    "next": "^7.0.2",
    "next-flash": "^1.0.2",
    "next-redux-saga": "^3.0.0",
    "next-redux-wrapper": "^2.0.0",
    "react": "^16.2.0",
    "react-activestorage-provider": "^0.6.0",
    "react-animated-slider": "^1.1.3",
    "react-app-polyfill": "^0.1.3",
    "react-dates": "^16.3.6",
    "react-dev-utils": "^6.0.5",
    "react-dom": "^16.2.0",
    "react-dropzone": "^6.2.2",
    "react-feather": "^1.0.8",
    "react-geosuggest": "^2.7.0",
    "react-google-autocomplete": "^1.0.15",
    "react-google-maps": "^9.4.5",
    "react-google-maps-loader": "^4.2.2",
    "react-google-places-suggest": "^3.4.0",
    "react-helmet": "^5.2.0",
    "react-image-cropper": "^1.3.0",
    "react-images": "^1.0.0-alpha.3",
    "react-places-autocomplete": "^7.0.1",
    "react-ravepayment": "^1.0.0",
    "react-redux": "^5.0.6",
    "react-share": "^2.3.1",
    "react-slick": "^0.23.1",
    "react-text-loop": "^1.1.0",
    "react-transition-group": "1.x",
    "redux": "^3.7.2",
    "redux-devtools-extension": "^2.13.5",
    "redux-flash": "^2.0.0",
    "redux-form": "^7.2.0",
    "redux-persist": "^5.10.0",
    "redux-persist-cookie-storage": "^1.0.0",
    "redux-saga": "^0.16.2",
    "redux-thunk": "^2.2.0",
    "sass-loader": "7.1.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.83.0",
    "shortid": "^2.2.8",
    "slick-carousel": "^1.8.1",
    "style-loader": "0.23.0",
    "url-loader": "^1.1.2",
    "validate.js": "^0.12.0",
    "webpack": "^4.23.1"
  },
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }
}

store.js

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './redux/rootReducer';
import rootSaga from './saga';

import { persistStore } from 'redux-persist';
import Cookies from 'cookies-js';

const sagaMiddleware = createSagaMiddleware();

const bindMiddleware = middleware => {
    if (process.env.NODE_ENV !== 'production') {
        const { composeWithDevTools } = require('redux-devtools-extension');
        return composeWithDevTools(applyMiddleware(...middleware));
    }
    return applyMiddleware(...middleware);
};

function configureStore(initialState) {
    const store = createStore(
        rootReducer,
        initialState,
        bindMiddleware([sagaMiddleware])
    );

    store.runSagaTask = () => {
        store.sagaTask = sagaMiddleware.run(rootSaga);
    };

    store.runSagaTask();

    return persistStore(store, {});
}
export default configureStore;

_app.js

import App, { Container } from 'next/app';
import React from 'react';
import { Provider } from 'react-redux';
import withRedux from 'next-redux-wrapper';
import withReduxSaga from 'next-redux-saga';
import Layout from '../components/Layout';
import 'semantic-ui-css/semantic.min.css';
import Head from 'next/head';

import createStore from '../store';

class MyApp extends App {
    static async getInitialProps({ Component, ctx }) {
        let pageProps = {};

        if (Component.getInitialProps) {
            pageProps = await Component.getInitialProps({ ctx });
        }

        return { pageProps };
    }

    render() {
        const { Component, pageProps, store } = this.props;
        return (
            <Container>
                <Head>
                    <meta charSet="utf-8" />
                    <meta
                        name="viewport"
                        content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
                    />
                </Head>
                <Provider store={store} >
                    <Layout>
                        <Component {...pageProps} />
                    </Layout>
                </Provider>
            </Container>
        );
    }
}

export default withRedux(createStore)(withReduxSaga({ async: true })(MyApp));

rootReducer.js

import { combineReducers } from 'redux';
import spaces from './spaces';
import reviews from './reviews';
import user from './user';
import flashMessages from './flashMessages';
import auth from './auth';
import amenity from './amenity';
import { reducer as formReducer } from 'redux-form';
import modal from './modal';

import { persistCombineReducers } from 'redux-persist';
import { CookieStorage } from 'redux-persist-cookie-storage';
import Cookies from 'cookies-js';

const persistConfig = {
    key: 'root',
    storage: new CookieStorage(Cookies),
};

import {
    reducer as flashReducer,
    middleware as flashMiddleware,
} from 'redux-flash';

export default combineReducers(persistConfig, {
    spaces,
    reviews,
    user,
    flashMessages,
    auth,
    modal,
    amenity,
    flash: flashReducer,
    form: formReducer,
});

I get this Error

TypeError: this.cookies.get is not a function
    at CookieStorage.getItem (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist-cookie-storage/src/redux-persist-cookie-storage.js:17:27)
    at getStoredState (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist/lib/getStoredState.js:16:18)
    at /home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist/lib/persistReducer.js:93:7
    at dispatch (/home/niceguy/workspace/javascript/nextevent/node_modules/redux/lib/createStore.js:178:22)
    at Object.dispatch (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-saga/lib/internal/middleware.js:72:22)
    at Object.persist (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist/lib/persistStore.js:104:13)
    at persistStore (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist/lib/persistStore.js:108:13)
    at configureStore (/home/niceguy/workspace/javascript/nextevent/.next/server/static/development/pages/_app.js:1394:76)
    at createStore (/home/niceguy/workspace/javascript/nextevent/node_modules/next-redux-wrapper/lib/index.js:68:12)
    at initStore (/home/niceguy/workspace/javascript/nextevent/node_modules/next-redux-wrapper/lib/index.js:73:24)
    at Function._callee$ (/home/niceguy/workspace/javascript/nextevent/node_modules/next-redux-wrapper/lib/index.js:179:27)
    at tryCatch (/home/niceguy/workspace/javascript/nextevent/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/home/niceguy/workspace/javascript/nextevent/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/home/niceguy/workspace/javascript/nextevent/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/home/niceguy/workspace/javascript/nextevent/node_modules/next-redux-wrapper/lib/index.js:18:221)
    at _next (/home/niceguy/workspace/javascript/nextevent/node_modules/next-redux-wrapper/lib/index.js:18:409)
TypeError: this.cookies.get is not a function
    at CookieStorage.getItem (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist-cookie-storage/src/redux-persist-cookie-storage.js:17:27)
    at getStoredState (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist/lib/getStoredState.js:16:18)
    at /home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist/lib/persistReducer.js:93:7
    at dispatch (/home/niceguy/workspace/javascript/nextevent/node_modules/redux/lib/createStore.js:178:22)
    at Object.dispatch (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-saga/lib/internal/middleware.js:72:22)
    at Object.persist (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist/lib/persistStore.js:104:13)
    at persistStore (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist/lib/persistStore.js:108:13)
    at configureStore (/home/niceguy/workspace/javascript/nextevent/.next/server/static/development/pages/_app.js:1394:76)
    at createStore (/home/niceguy/workspace/javascript/nextevent/node_modules/next-redux-wrapper/lib/index.js:68:12)
    at initStore (/home/niceguy/workspace/javascript/nextevent/node_modules/next-redux-wrapper/lib/index.js:73:24)
    at Function._callee$ (/home/niceguy/workspace/javascript/nextevent/node_modules/next-redux-wrapper/lib/index.js:179:27)
    at tryCatch (/home/niceguy/workspace/javascript/nextevent/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/home/niceguy/workspace/javascript/nextevent/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/home/niceguy/workspace/javascript/nextevent/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/home/niceguy/workspace/javascript/nextevent/node_modules/next-redux-wrapper/lib/index.js:18:221)
    at _next (/home/niceguy/workspace/javascript/nextevent/node_modules/next-redux-wrapper/lib/index.js:18:409)
TypeError: this.cookies.get is not a function
    at CookieStorage.getItem (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist-cookie-storage/src/redux-persist-cookie-storage.js:17:27)
    at getStoredState (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist/lib/getStoredState.js:16:18)
    at /home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist/lib/persistReducer.js:93:7
    at dispatch (/home/niceguy/workspace/javascript/nextevent/node_modules/redux/lib/createStore.js:178:22)
    at Object.dispatch (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-saga/lib/internal/middleware.js:72:22)
    at Object.persist (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist/lib/persistStore.js:104:13)
    at persistStore (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist/lib/persistStore.js:108:13)
    at configureStore (/home/niceguy/workspace/javascript/nextevent/.next/server/static/development/pages/_app.js:1394:76)
    at createStore (/home/niceguy/workspace/javascript/nextevent/node_modules/next-redux-wrapper/lib/index.js:68:12)
    at initStore (/home/niceguy/workspace/javascript/nextevent/node_modules/next-redux-wrapper/lib/index.js:73:24)
    at Function._callee$ (/home/niceguy/workspace/javascript/nextevent/node_modules/next-redux-wrapper/lib/index.js:179:27)
    at tryCatch (/home/niceguy/workspace/javascript/nextevent/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/home/niceguy/workspace/javascript/nextevent/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/home/niceguy/workspace/javascript/nextevent/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/home/niceguy/workspace/javascript/nextevent/node_modules/next-redux-wrapper/lib/index.js:18:221)
    at _next (/home/niceguy/workspace/javascript/nextevent/node_modules/next-redux-wrapper/lib/index.js:18:409)
/home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist-cookie-storage/src/redux-persist-cookie-storage.js:35
  this.cookies.set(this.keyPrefix + key, value, options);
               ^

TypeError: this.cookies.set is not a function
    at CookieStorage.setItem (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist-cookie-storage/src/redux-persist-cookie-storage.js:35:16)
    at writeStagedState (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist/lib/createPersistoid.js:90:28)
    at Timeout.processNextKey [as _onTimeout] (/home/niceguy/workspace/javascript/nextevent/node_modules/redux-persist/lib/createPersistoid.js:78:7)
    at ontimeout (timers.js:482:11)
    at tryOnTimeout (timers.js:317:5)
    at Timer.listOnTimeout (timers.js:277:5)
error Command failed with exit code 1.
HamidTanhaei commented 5 years ago

the same problem

andrew-luchkevych commented 5 years ago

+1

AliakseiYakubuk commented 5 years ago

+1

hakanai03 commented 5 years ago

+1

garciawell commented 5 years ago

+1 some solution ?

hmust92 commented 5 years ago

+1

same issue.

uragecz commented 5 years ago

I guess this repo is dead.. Same issue...

uragecz commented 5 years ago

I found the solution. Just use different library for cookies - i used https://github.com/js-cookie/js-cookie

yuyaohshimo commented 4 years ago

I resolved the issue with js-cookie instead as well.