TypeError: Cannot destructure property ‘store’ of ‘t(…)’ as it is null

Junior developer here trying to create a simple React application using Next.js. When runing the command npm run build, I am getting the following error:

TypeError: Cannot destructure property 'store' of 't(...)' as it is null.

Export encountered errors on following paths:
        /page: /

Here is how I am setting up the Redux store

import { configureStore } from '@reduxjs/toolkit';
import { createWrapper } from 'next-redux-wrapper';
import rootReducer from './reducers/reducers';

export const makeStore = () =>
  configureStore({
    reducer: rootReducer,
  });

export type RootState = ReturnType<ReturnType<typeof makeStore>['getState']>;

export const wrapper = createWrapper(makeStore, { debug: true });

export default wrapper;

Then I am using this in the _app.js file as follows:

// pages/_app.js

import { wrapper } from '../store';
import { Provider } from 'react-redux';
import { useSelector, useDispatch } from 'react-redux';
import { useEffect, useState } from 'react';

function InnerApp({ Component, pageProps }) {
  const dispatch = useDispatch();
  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);
  const [isClient, setIsClient] = useState(false); // Track client-side rendering
  const [isLoading, setIsLoading] = useState(true); // Loading state for auth

  // Check for token in localStorage and authenticate user
  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      dispatch({ type: 'AUTHENTICATE_USER', payload: token });
    }
    setIsLoading(false); // Auth check done, set loading to false
  }, [dispatch]);

  useEffect(() => {
    setIsClient(true);
  }, []);

  if (!isClient || isLoading) {
    // If not on client side or loading, don't render the UI yet
    return null;
  }

  return (
    .....
  );
}

function MyApp({ Component, pageProps }) {
  console.log("PageProps:", pageProps);
  const { store, props } = wrapper.useWrappedStore(pageProps);
  console.log("Store:", store);
  console.log("Props:", props);

  // Check if the store exists before rendering
  if (!store) {
    console.error("Store initialization failed during SSR or pageProps is missing.");
    return null; // Prevent further rendering if the store is null or undefined
  }

  return (
    <Provider store={store}>
      <InnerApp Component={Component} {...props} />
    </Provider>
  );
}

export default MyApp;

Lastly, here is my rootReducer

// Import combineReducers utility from redux to combine multiple reducers
import { combineReducers } from 'redux';

// Import the authReducer to handle authentication-related state changes
import { authReducer } from '../auth/authReducer';

// Use combineReducers to combine different reducers into a single rootReducer
const rootReducer = combineReducers({
    auth: authReducer,
});

export default rootReducer;

Despite the above-mentioned code, nothing changed and the same error is repeated when using the command npm run build

I had hoped that checking for the “Store” property should have corrected this issue:

// Check if the store exists before rendering
  if (!store) {
    console.error("Store initialization failed during SSR or pageProps is missing.");
    return null; // Prevent further rendering if the store is null or undefined
  }

I was also able to pull some logs which are as follows:

2024-09-14T21:32:23.03391Z    ▲ Next.js 14.2.8
2024-09-14T21:32:23.034331Z 
2024-09-14T21:32:23.108574Z    Creating an optimized production build ...
2024-09-14T21:32:41.990583Z  ✓ Compiled successfully
2024-09-14T21:32:41.992793Z    Linting and checking validity of types ...
2024-09-14T21:32:45.845081Z    Collecting page data ...
2024-09-14T21:32:49.063056Z    Generating static pages (0/18) ...
2024-09-14T21:32:49.356022Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.356776Z   giapState: undefined,
2024-09-14T21:32:49.357169Z   gspState: null,
2024-09-14T21:32:49.35736Z    gsspState: null,
2024-09-14T21:32:49.357505Z   gippState: null
2024-09-14T21:32:49.35779Z  }
2024-09-14T21:32:49.357985Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.358438Z   giapState: undefined,
2024-09-14T21:32:49.358619Z   gspState: null,
2024-09-14T21:32:49.359113Z   gsspState: null,
2024-09-14T21:32:49.359275Z   gippState: null
2024-09-14T21:32:49.359405Z }
2024-09-14T21:32:49.359545Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.359699Z   giapState: undefined,
2024-09-14T21:32:49.359826Z   gspState: null,
2024-09-14T21:32:49.360057Z   gsspState: null,
2024-09-14T21:32:49.360209Z   gippState: null
2024-09-14T21:32:49.360413Z }
2024-09-14T21:32:49.361083Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.361227Z   giapState: undefined,
2024-09-14T21:32:49.361352Z   gspState: null,
2024-09-14T21:32:49.361468Z   gsspState: null,
2024-09-14T21:32:49.361609Z   gippState: null
2024-09-14T21:32:49.361775Z }
2024-09-14T21:32:49.361895Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.362034Z   giapState: undefined,
2024-09-14T21:32:49.362151Z   gspState: null,
2024-09-14T21:32:49.362257Z   gsspState: null,
2024-09-14T21:32:49.36236Z    gippState: null
2024-09-14T21:32:49.362478Z }
2024-09-14T21:32:49.362611Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.362726Z   giapState: undefined,
2024-09-14T21:32:49.362846Z   gspState: null,
2024-09-14T21:32:49.362959Z   gsspState: null,
2024-09-14T21:32:49.364722Z   gippState: null
2024-09-14T21:32:49.364844Z }
2024-09-14T21:32:49.365037Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.36516Z    giapState: undefined,
2024-09-14T21:32:49.365273Z   gspState: null,
2024-09-14T21:32:49.36538Z    gsspState: null,
2024-09-14T21:32:49.365483Z   gippState: null
2024-09-14T21:32:49.365606Z }
2024-09-14T21:32:49.365718Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.365843Z   giapState: undefined,
2024-09-14T21:32:49.36595Z    gspState: null,
2024-09-14T21:32:49.366181Z   gsspState: null,
2024-09-14T21:32:49.36629Z    gippState: null
2024-09-14T21:32:49.366386Z }
2024-09-14T21:32:49.36648Z  4. useWrappedStore created new store with {
2024-09-14T21:32:49.366925Z   giapState: undefined,
2024-09-14T21:32:49.367101Z   gspState: null,
2024-09-14T21:32:49.36722Z    gsspState: null,
2024-09-14T21:32:49.367444Z   gippState: null
2024-09-14T21:32:49.367611Z }
2024-09-14T21:32:49.367739Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.367851Z   giapState: undefined,
2024-09-14T21:32:49.368005Z   gspState: null,
2024-09-14T21:32:49.368257Z   gsspState: null,
2024-09-14T21:32:49.368427Z   gippState: null
2024-09-14T21:32:49.368552Z }
2024-09-14T21:32:49.36866Z  4. useWrappedStore created new store with {
2024-09-14T21:32:49.369361Z   giapState: undefined,
2024-09-14T21:32:49.369501Z   gspState: null,
2024-09-14T21:32:49.369651Z   gsspState: null,
2024-09-14T21:32:49.369767Z   gippState: null
2024-09-14T21:32:49.369865Z }
2024-09-14T21:32:49.369978Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.370078Z   giapState: undefined,
2024-09-14T21:32:49.370157Z   gspState: null,
2024-09-14T21:32:49.370238Z   gsspState: null,
2024-09-14T21:32:49.370318Z   gippState: null
2024-09-14T21:32:49.370395Z }
2024-09-14T21:32:49.38547Z     Generating static pages (4/18) 
2024-09-14T21:32:49.388133Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.433283Z   giapState: undefined,
2024-09-14T21:32:49.433534Z   gspState: null,
2024-09-14T21:32:49.433922Z   gsspState: null,
2024-09-14T21:32:49.434205Z   gippState: null
2024-09-14T21:32:49.434636Z }
2024-09-14T21:32:49.435564Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.435698Z   giapState: undefined,
2024-09-14T21:32:49.435822Z   gspState: null,
2024-09-14T21:32:49.435939Z   gsspState: null,
2024-09-14T21:32:49.436654Z   gippState: null
2024-09-14T21:32:49.436888Z }
2024-09-14T21:32:49.759637Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.760137Z   giapState: undefined,
2024-09-14T21:32:49.760325Z   gspState: null,
2024-09-14T21:32:49.760442Z   gsspState: null,
2024-09-14T21:32:49.760565Z   gippState: null
2024-09-14T21:32:49.7607Z   }
2024-09-14T21:32:49.760826Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.760956Z   giapState: undefined,
2024-09-14T21:32:49.761095Z   gspState: null,
2024-09-14T21:32:49.761204Z   gsspState: null,
2024-09-14T21:32:49.76132Z    gippState: null
2024-09-14T21:32:49.761432Z }
2024-09-14T21:32:49.761557Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.761671Z   giapState: undefined,
2024-09-14T21:32:49.761766Z   gspState: null,
2024-09-14T21:32:49.76186Z    gsspState: null,
2024-09-14T21:32:49.761956Z   gippState: null
2024-09-14T21:32:49.7621Z   }
2024-09-14T21:32:49.762235Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.76235Z    giapState: undefined,
2024-09-14T21:32:49.762479Z   gspState: null,
2024-09-14T21:32:49.762614Z   gsspState: null,
2024-09-14T21:32:49.762727Z   gippState: null
2024-09-14T21:32:49.76284Z  }
2024-09-14T21:32:49.762981Z    Generating static pages (8/18) 
2024-09-14T21:32:49.763108Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.763229Z   giapState: undefined,
2024-09-14T21:32:49.763342Z   gspState: null,
2024-09-14T21:32:49.763451Z   gsspState: null,
2024-09-14T21:32:49.763558Z   gippState: null
2024-09-14T21:32:49.763667Z }
2024-09-14T21:32:49.763793Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.763918Z   giapState: undefined,
2024-09-14T21:32:49.764054Z   gspState: null,
2024-09-14T21:32:49.764158Z   gsspState: null,
2024-09-14T21:32:49.764258Z   gippState: null
2024-09-14T21:32:49.764369Z }
2024-09-14T21:32:49.764478Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.764583Z   giapState: undefined,
2024-09-14T21:32:49.764698Z   gspState: null,
2024-09-14T21:32:49.764805Z   gsspState: null,
2024-09-14T21:32:49.764921Z   gippState: null
2024-09-14T21:32:49.765056Z }
2024-09-14T21:32:49.765167Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.765281Z   giapState: undefined,
2024-09-14T21:32:49.765406Z   gspState: null,
2024-09-14T21:32:49.765518Z   gsspState: null,
2024-09-14T21:32:49.76563Z    gippState: null
2024-09-14T21:32:49.765744Z }
2024-09-14T21:32:49.765862Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.765988Z   giapState: undefined,
2024-09-14T21:32:49.766118Z   gspState: null,
2024-09-14T21:32:49.766238Z   gsspState: null,
2024-09-14T21:32:49.766364Z   gippState: null
2024-09-14T21:32:49.766481Z }
2024-09-14T21:32:49.766588Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.766705Z   giapState: undefined,
2024-09-14T21:32:49.766823Z   gspState: null,
2024-09-14T21:32:49.767247Z   gsspState: null,
2024-09-14T21:32:49.767399Z   gippState: null
2024-09-14T21:32:49.767515Z }
2024-09-14T21:32:49.767628Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.767741Z   giapState: undefined,
2024-09-14T21:32:49.767856Z   gspState: null,
2024-09-14T21:32:49.768032Z   gsspState: null,
2024-09-14T21:32:49.768149Z   gippState: null
2024-09-14T21:32:49.768249Z }
2024-09-14T21:32:49.768386Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.768491Z   giapState: undefined,
2024-09-14T21:32:49.768607Z   gspState: null,
2024-09-14T21:32:49.768715Z   gsspState: null,
2024-09-14T21:32:49.768812Z   gippState: null
2024-09-14T21:32:49.768905Z }
2024-09-14T21:32:49.769043Z    Generating static pages (13/18) 
2024-09-14T21:32:49.850046Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.850727Z   giapState: undefined,
2024-09-14T21:32:49.851009Z   gspState: null,
2024-09-14T21:32:49.851149Z   gsspState: null,
2024-09-14T21:32:49.85128Z    gippState: null
2024-09-14T21:32:49.851408Z }
2024-09-14T21:32:49.85152Z  4. useWrappedStore created new store with {
2024-09-14T21:32:49.851643Z   giapState: undefined,
2024-09-14T21:32:49.85175Z    gspState: null,
2024-09-14T21:32:49.851875Z   gsspState: null,
2024-09-14T21:32:49.852033Z   gippState: null
2024-09-14T21:32:49.852157Z }
2024-09-14T21:32:49.852329Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.8525Z     giapState: undefined,
2024-09-14T21:32:49.852621Z   gspState: null,
2024-09-14T21:32:49.852752Z   gsspState: null,
2024-09-14T21:32:49.85289Z    gippState: null
2024-09-14T21:32:49.853024Z }
2024-09-14T21:32:49.853138Z 4. useWrappedStore created new store with {
2024-09-14T21:32:49.853545Z   giapState: undefined,
2024-09-14T21:32:49.853912Z   gspState: null,
2024-09-14T21:32:49.854191Z   gsspState: null,
2024-09-14T21:32:49.854561Z   gippState: null
2024-09-14T21:32:49.854709Z }
2024-09-14T21:32:49.889784Z TypeError: Cannot destructure property 'store' of 't(...)' as it is null.
2024-09-14T21:32:49.890059Z     at r (/opt/buildhome/repo/.next/server/app/page.js:1:4385)
2024-09-14T21:32:49.89019Z      at r (/opt/buildhome/repo/.next/server/app/page.js:1:4624)
2024-09-14T21:32:49.890297Z     at eh (/opt/buildhome/repo/.next/server/app/page.js:1:19449)
2024-09-14T21:32:49.890398Z     at nj (/opt/buildhome/repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
2024-09-14T21:32:49.890585Z     at nM (/opt/buildhome/repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)
2024-09-14T21:32:49.890759Z     at nN (/opt/buildhome/repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
2024-09-14T21:32:49.890907Z     at nI (/opt/buildhome/repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47010)
2024-09-14T21:32:49.891128Z     at nM (/opt/buildhome/repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47717)
2024-09-14T21:32:49.891489Z     at nM (/opt/buildhome/repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546)
2024-09-14T21:32:49.891596Z     at nN (/opt/buildhome/repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) {
2024-09-14T21:32:49.891714Z   digest: '4117157438'
2024-09-14T21:32:49.892063Z }
2024-09-14T21:32:49.892243Z 
2024-09-14T21:32:49.89236Z  Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
2024-09-14T21:32:49.892501Z 
2024-09-14T21:32:49.892651Z TypeError: Cannot destructure property 'store' of 't(...)' as it is null.
2024-09-14T21:32:49.892811Z     at r (/opt/buildhome/repo/.next/server/app/page.js:1:4385)
2024-09-14T21:32:49.892998Z     at r (/opt/buildhome/repo/.next/server/app/page.js:1:4624)
2024-09-14T21:32:49.893114Z     at eh (/opt/buildhome/repo/.next/server/app/page.js:1:19449)
2024-09-14T21:32:49.893233Z     at nj (/opt/buildhome/repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
2024-09-14T21:32:49.893343Z     at nM (/opt/buildhome/repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)
2024-09-14T21:32:49.89345Z      at nN (/opt/buildhome/repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
2024-09-14T21:32:49.893557Z     at nI (/opt/buildhome/repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47010)
2024-09-14T21:32:49.893674Z     at nM (/opt/buildhome/repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47717)
2024-09-14T21:32:49.893786Z     at nM (/opt/buildhome/repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61546)
2024-09-14T21:32:49.893903Z     at nN (/opt/buildhome/repo/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
2024-09-14T21:32:49.908223Z  ✓ Generating static pages (18/18)
2024-09-14T21:32:49.926605Z 
2024-09-14T21:32:49.927289Z > Export encountered errors on following paths:
2024-09-14T21:32:49.927483Z     /page: /
2024-09-14T21:32:49.966548Z Failed: Error while executing user command. Exited with error code: 1
2024-09-14T21:32:49.980784Z Failed: build command exited with code: 1
2024-09-14T21:32:50.971716Z Failed: error occurred while running build command
  • reactjs
  • next.js
  • react-redux

5

I was able to resolve this. The main issue was that in the new version of Next.js, instead of using a pages directory, we need to use the “app” directory (created automatically when using the npm install next@latest react@latest react-dom@latest command)

In this app directoty, we need to create a sub-directory and a file called “page.js” within it. The code for the component goes in this new page.js file.

Some of this is mentioned here but not all of it.

To summarize, the main issue was the existence of both the “pages” and the “app” directory. When I moved all the files from the “pages” directory to the respective sub-directories in the “app” directory, the issue was solved. It was being caused because of a conflict between the “pages” and the “app” directory.

Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa Dịch vụ tổ chức sự kiện 5 sao Thông tin về chúng tôi Dịch vụ sinh nhật bé trai Dịch vụ sinh nhật bé gái Sự kiện trọn gói Các tiết mục giải trí Dịch vụ bổ trợ Tiệc cưới sang trọng Dịch vụ khai trương Tư vấn tổ chức sự kiện Hình ảnh sự kiện Cập nhật tin tức Liên hệ ngay Thuê chú hề chuyên nghiệp Tiệc tất niên cho công ty Trang trí tiệc cuối năm Tiệc tất niên độc đáo Sinh nhật bé Hải Đăng Sinh nhật đáng yêu bé Khánh Vân Sinh nhật sang trọng Bích Ngân Tiệc sinh nhật bé Thanh Trang Dịch vụ ông già Noel Xiếc thú vui nhộn Biểu diễn xiếc quay đĩa Dịch vụ tổ chức tiệc uy tín Khám phá dịch vụ của chúng tôi Tiệc sinh nhật cho bé trai Trang trí tiệc cho bé gái Gói sự kiện chuyên nghiệp Chương trình giải trí hấp dẫn Dịch vụ hỗ trợ sự kiện Trang trí tiệc cưới đẹp Khởi đầu thành công với khai trương Chuyên gia tư vấn sự kiện Xem ảnh các sự kiện đẹp Tin mới về sự kiện Kết nối với đội ngũ chuyên gia Chú hề vui nhộn cho tiệc sinh nhật Ý tưởng tiệc cuối năm Tất niên độc đáo Trang trí tiệc hiện đại Tổ chức sinh nhật cho Hải Đăng Sinh nhật độc quyền Khánh Vân Phong cách tiệc Bích Ngân Trang trí tiệc bé Thanh Trang Thuê dịch vụ ông già Noel chuyên nghiệp Xem xiếc khỉ đặc sắc Xiếc quay đĩa thú vị

Filed under: Kiến thức lập trình - @ 12:17

Thẻ:

Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa
Thiết kế website Thiết kế website Thiết kế website Cách kháng tài khoản quảng cáo Mua bán Fanpage Facebook Dịch vụ SEO Tổ chức sinh nhật