TypeError: __jsx is not a function

[Onibenjo]

Bug report

Describe the bug

using custom _app.js
I keep getting
Server Error TypeError: __jsx is not a function at

const MyApp = ({ Component, pageProps, store }) => <Component {...pageProps} />

To Reproduce

1. git clone https://github.com/adesiyanbs/preeson-2.git
2. cd preeson-2
3. yarn
4. yarn dev

Expected behavior

Compile successful

Screenshots

System information

• OS: [e.g. macOS, Windows]
• Browser (if applies) [e.g. chrome, safari]
• Version of Next.js: [e.g. 6.0.2]
• Version of Node.js: [e.g. 10.10.0]

Additional context

Add any other context about the problem here.

[gabrielalmeida]

Hi!

There are several errors on your _app.js preventing your page to render.

• import React from 'react-dom'

React doesn't need to be imported if you're only willing to use JSX, if you're willing to use something available under React, you need to import it by doing import React from 'react'.

• Wrong usage of getInitialProps

I don't get what you're trying to achieve here:

  static async getInitialProps({Component, ctx}) {
    const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};
     return {pageProps: pageProps};
    }

The only argument getInitialProps receives is the ctx itself. So this line is currently receiving undefined for these destructured values:

static async getInitialProps({Component, ctx}) {

Besides that, it seems you're trying to replace pageProps, which is also unexpected.

It seems you're trying to have blocking data requirements for every single page in your application, which should probably be avoided:

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.

But if that's really what you're trying to do, replace your getInitialProps with something along the lines:

  static async getInitialProps(ctx) {
    const appProps = await App.getInitialProps(ctx);
    return { ...appProps };
  }

Your usage of next-redux-wrapper is also wrong. Note the correct imports and wrapper stated on docs:

import { createWrapper }from "next-redux-wrapper";
const store = createStore(cartReducer);
const makestore = () => store;
const wrapper = createWrapper(makestore, {debug: true})
export default wrapper.withRedux(MyApp)

Note that at the end of the usage next-redux-wrapper section they state:

⚠️ Next.js provides generic getInitialProps when using class MyApp extends App which will be picked up by wrapper, so you must not extend App as you'll be opted out of Automatic Static Optimization: https://err.sh/next.js/opt-out-auto-static-optimization. Just export a regular Functional Component as in the example above.

So you'll probably need to rewrite this as a Functional Component to use that lib.

[Onibenjo]

Thank you so much. This clarified things

Thanks

[Onibenjo]

and it worked