Next-i18next: With next-redux-saga and next-redux-wrapper

[andylacko]

Hello, next-i18next seem to work good, but as I configure it in _app.js like this, redux saga stops loading data, requests won't fire.

When I look into component, there are initialProps data, but redux-saga is not working

Dunno, if this is issue, or I am missing something

(end of _app.js)

const withTranslation = appWithTranslation(MyApp)
const componentWithRedux = connect(store => ({
  user: store.user,
}))(withTranslation)
export default withRedux(initStore)(withReduxSaga(componentWithRedux))

[isaachinman]

We probably need to hoist statics. What happens if you use appWithTranslation _last_, not first?

[davebream]

I have this problem too.
If I use appWithTranslation last, my pages don't pass the props that are returned in getInitialProps down to the component.

my _app.js:

import App, { Container } from 'next/app';
import { compose } from 'redux';
import { Provider } from 'react-redux';
import { ThemeProvider } from 'emotion-theming';
import getConfig from 'next/config';
import * as Sentry from '@sentry/browser';
import withRedux from 'next-redux-wrapper';
import withReduxSaga from 'next-redux-saga';

import { appWithTranslation } from 'next-i18n';
import theme from 'theme';
import createStore from 'store';

const { publicRuntimeConfig } = getConfig();

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    return {
      pageProps: Component.getInitialProps ? await Component.getInitialProps(ctx) : {},
    };
  }

  constructor(...args) {
    super(...args);
    Sentry.init({ dsn: publicRuntimeConfig.sentryDsn });
  }

  componentDidCatch(error, errorInfo) {
    Sentry.configureScope(scope => {
      Object.keys(errorInfo).forEach(key => {
        scope.setExtra(key, errorInfo[key]);
      });
    });
    Sentry.captureException(error);

    super.componentDidCatch(error, errorInfo);
  }

  render() {
    const { Component, pageProps, store } = this.props;

    return (
      <ThemeProvider theme={ theme }>
        <Container>
          <Provider store={ store }>
            <Component { ...pageProps } />
          </Provider>
        </Container>
      </ThemeProvider>
    );
  }
}

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

[jamuhl]

might be solved in https://github.com/isaachinman/next-i18next/pull/12

[isaachinman]

I've just merged #12. Simple bug that should fix a lot of these issues.

@andylacko and @davebream can you let me know if your problems are resolved? I still imagine we'll need to hoist statics, but I haven't had the time to reproduce your individual cases yet.

[davebream]

@jamuhl @isaachinman it seems like it has solved the issue for me (when the appWithTranslation is the last of the composed HOCs). Thanks!

[isaachinman]

Does appWithTranslation not work higher up the HOC chain? I would assume redux hoists statics, so it should work fine like that.

@andylacko Can we close this issue?

[davebream]

@isaachinman no it doesn't, the store is not present in the props.

[isaachinman]

@davebream Which store? Do you have time to put together a quick reproducible example via CodeSandbox?

[davebream]

@isaachinman I'm trying to, but it looks like my custom _app.js is not used by next.js on CodeSandbox

[isaachinman]

Ah that makes sense, they're probably doing some strange stuff to replicate a filesystem. You can just fork and modify the example dir, or convert the CodeSandbox project to a repo.

[davebream]

@isaachinman Look at the console while navigating: https://codesandbox.io/s/xryjxorqno

[isaachinman]

@davebream Thank you very much for that example.

This should be fixed with a13cc4e. I'm going to release it now in v0.6.0. Please do let me know if you have any more issues.

[davebream]

Hi there, I'm sorry to say that, but store is still undefined after upgrading to 0.6.0 (when appWithTranslation is a first of the composed hocs)

I've updated version of the package on CodeSandbox and also checked locally.

[andylacko]

@isaachinman , now I tested another page with redux and sagas and it says Unhandled Rejection (TypeError): Cannot read property 'dispatch' of undefined

  static async getInitialProps({ store, req, isServer }) {
    let token = null;

    if (isServer) {
      token = req.cookies.o
    } else {
      token = clientCookies.get('o')
    }

    store.dispatch(dashboardPage(token)) // < here it fails
    store.dispatch(loadDashboard(token))
    store.dispatch(loadOrders(token))

    return { isServer }
  }

so maybe the problem is in my server code which looks like, somehow the server can't recognise store, when I use nextI18NextMiddleware, maybe I should have created a new issue, but it seems similar problem, just on server side

(async () => {
  await app.prepare()
  const server = express()
  nextI18NextMiddleware(app, server)

  server.use(bodyParser.urlencoded({ extended: false }))
  server.use(bodyParser.json())
  server.use(cookieParser())

  server.get(...

redux + redux saga are initialised with

import withRedux from 'next-redux-wrapper'
import nextReduxSaga from 'next-redux-saga'

>

export default function withReduxSaga(BaseComponent) {
  return withRedux(initStore)(nextReduxSaga(BaseComponent))
}

[davebream]

@andylacko I have the exact same error displayed.

[isaachinman]

Hm, this is interesting. I tested this order, and assumed it meant we had fixed the issue:

withRedux(createStore),
appWithTranslation,
withReduxSaga({ async: true }),

[andylacko]

@isaachinman , should I try to give you more hints? I can try, but don't know, what more info should I provide to help

[isaachinman]

Sure, any help from anyone would be much appreciated. At the moment I'm not exactly sure where this bug is coming from, or if it's even the fault of next-i18next.

[isaachinman]

I doubt your Unhandled Rejection (TypeError): Cannot read property 'dispatch' of undefined error has anything to do with SSR specifically, it just means the store is undefined. Same as the original bug that caused this issue to be opened. Unless I'm missing your point?

[isaachinman]

From playing around a bit, it seems like you just need to make sure you put your withRedux before appWithTranslation, presumably so that the store exists by the time appWithTranslation is called.

I haven't used Redux in a professional project for over a year now, so I don't really remember how all these patterns work. Isn't it expected that the order of HOCs matters? Is the bug here that you want to be able to use HOCs in _any_ order, or is it something else?

[davebream]

@isaachinman maybe they need to implement hoisting in next-redux-wrapper 😂

[andylacko]

it doesn't show the error with store undefined anymore, but in __app.js file i have getInitialProps function

  static async getInitialProps({ Component, router, ctx }) {
    const { store, req, isServer } = ctx;
    let pageProps = {}

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

    console.log(`is server is: ${isServer}`)
    if (isServer) {
      store.dispatch(userData(req.cookies.o, true))
    } else {
      store.dispatch(userData(clientCookies.get('o'), true))
    }

    return { pageProps }
  }

and it is completely ignored by server, even the console log isn't fired, I am using isomorphic-fetch. I have no clue, what might be blocking the function from executing correctly, when I remove translations from server and client code it works normally again

[isaachinman]

@andylacko That getInitialProps issue is fixed with v0.7.0. Unrelated to this issue.

[isaachinman]

Thanks everyone for helping us along with the process of developing young OSS, by the way! I know it can be frustrating.

[andylacko]

@isaachinman , thanks for excellent support, everything is working now 👌

[jamuhl]

If you like this module don’t forget to star this repo. Make a tweet, share the word -> there are many ways to help this project :pray:

[SathyanaryanaNaidu]

Still i am facing the same issue , i tried with 0.7.0 and also with 0.8.0 .....The problem is in the getinitialprops Store is missing .

[isaachinman]

@Sathya-Appscrip I see you opened another issue as well. It seems you're having trouble getting started in general.

Please post your question in _one place_ so that I (or others) can help you effectively.

You will need to provide a reproducible example via CodeSandbox to receive any help whatsoever.

[Clebal]

Hello @isaachinman, I don't know if it's exactly the same problem, but I'm having an error using next-redux-saga and next-redux-wrapper with next-i18next but only in production. I've made a CodeSanbox: https://codesandbox.io/s/v8796vz3m5. The error appears also using react-redux 6.0.0 (in the sandbox i'm using 5.1.1). Hope it helps. Thank you.

[isaachinman]

Hey @Clebal, thanks for providing a CodeSandbox. Unfortunately I'm getting a weird 502 error right now.

Do you mind sharing a repo with me, and explaining the exact error/problem you are experiencing?

I will take a look as quickly as possible. Thanks for your patience.

[Clebal]

Hi @isaachinman, I don't know if you want to follow this issue here or in #52. I've made a repo for you: https://github.com/Clebal/issue-next-i18next. Anyways, to use the CodeSandbox you need to "Server Control Panel" and first build the app and later restart sandbox.

The error I get is this (remember, only in production):

If I update react-redux to 6.0.0, the error message change, but the meaning is the same.

If you need something, just let me know.

[isaachinman]

Thanks @Clebal.

This is related to react-tree-walker (probably context related) and #49, #40. Unfortunately we're seeing a lot of context-related bugs.

Please bear with me as I look into it.

[isaachinman]

So the problem in this case is that you've wrapped both your _app.js and child components with Redux decorators that require/depend upon specific context, and then we attempt to render the tree in a "plain" way without that context, thus causing the break.

I am in no way tied to use of react-tree-walker, and it has caused a _lot_ of problems.

We need a way to:

1. Traverse a React component tree and discover what namespaces are necessary to render that tree
2. Not break context requirements

I am not sure yet how we're going to achieve this.

Please note: While I am very sorry that recent releases have been unstable, this is still a pre-release project. If you're having issues with custom context requirements breaking prod, please use v0.9.0 for the time being.

[isaachinman]

Let's continue discussion in #54.