next.js 捕获SyntaxError：“undefined”在JSON中不是有效的JSON,parse(< anonymous>)

vh0rcniy  于 2023-04-20  发布在  其他
关注(0)|答案(1)|浏览(316)

我在我的下一个js应用程序中有这个错误，当我启动应用程序时，它抛出了这个错误，我使用react-redux用于我的状态管理，下一个版本13与appDir，当我删除来自react redux的Provider时，应用程序工作正常，但当我将其添加回来时，它抛出了这个错误，我实际上没有在代码中使用JSON。我只 Package 了孩子与ApolloProvider和Provider如下所示
这是完整的错误：caught SyntaxError：“undefined”是JSON中的无效JSON。parse（）at parseModel（webpack-internal：///（：3000/app-client）/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js：33：15）

这是我的布局.tsx

"use client"
import { Poppins } from "next/font/google";
import SiteHeader from "./(client-components)/(Header)/SiteHeader";
import ClientCommons from "./ClientCommons";
import "./globals.css";
import "@/fonts/line-awesome-1.3.0/css/line-awesome.css";
import "@/styles/index.scss";
import "rc-slider/assets/index.css";
import Footer from "@/components/Footer";
import FooterNav from "@/components/FooterNav";
import { ApolloProvider } from "@apollo/react-hooks";
import { Provider } from "react-redux";
import { store } from "../lib/store";
import client from "../lib/graphql";
const poppins = Poppins({
  subsets: ["latin"],
  display: "optional",
  weight: ["100", "300", "400", "500", "600", "700", "800"],
});

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: any;
}) {
  return (
    <html lang="en" className={poppins.className}>
      <body className="bg-white text-base dark:bg-neutral-900 text-neutral-900 dark:text-neutral-200">
       <ApolloProvider client={client}>
          <Provider store={store}>
            <ClientCommons />
            <SiteHeader />
            {children}
            <FooterNav />
            <Footer />
           </Provider>
        </ApolloProvider> 
      </body>
    </html>
  );
}

这是我的propertySlice.js

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { fetchProperties, fetchProperty } from "./propertiesApi";

const initialState = {
  
  data: [],
  propertyData: null,
  loading: true,
  error: null,
  searchQuery: {
    location: "",
    priceMin: null,
    priceMax: null,
    propertyTypes: [],
  },
  property: {},
  selectedListingId: null,
};

const propertiesSlice = createSlice({
  name: "properties",
  initialState,
  reducers: {
    setSelectedListing(state, action) {
      state.selectedListingId = action.payload;
    },
    setProperties(state, action) {
      state.items = action.payload;
    },
    setSearchQuery(state, action) {
      state.searchQuery = action.payload;
    },
    setProperty(state, action) {
      state.property = action.payload;
    },
    setLoading(state, action) {
      state.loading = action.payload;
    },
    setError(state, action) {
      state.error = action.payload;
    },
  },

  extraReducers: (builder) => {
    builder
      .addCase(fetchProperties.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchProperties.fulfilled, (state, { payload }) => {
        state.loading = false;
        state.data = payload;
      })
      .addCase(fetchProperties.rejected, (state, { payload }) => {
        state.loading = false;
        state.error = payload;
      })
      .addCase(fetchProperty.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchProperty.fulfilled, (state, { payload }) => {
        state.loading = false;
        state.error = null;
        state.property = payload;
      })
      .addCase(fetchProperty.rejected, (state, { payload }) => {
        state.loading = false;
        state.error = payload;
      });
  },
});

export const {
  setProperty,
  setLoading,
  setError,
  setProperties,
  setSearchQuery,
  setSelectedListing,
} = propertiesSlice.actions;

export default propertiesSlice.reducer;

This is my propertiesApi.ts

import { createAsyncThunk } from "@reduxjs/toolkit";
import { store } from "@/lib/store";
import client from "../../lib/graphql";
import { GET_AllProperties, Get_Property } from "../../graphql/queries";
import { useDispatch } from "react-redux";

export const fetchProperties = createAsyncThunk(
  "properties/fetchProperties",
  async () => {
    const { data } = await client.query({
      query: GET_AllProperties,
    });
    return data.allProperties;
  }
);

export const fetchProperty = createAsyncThunk(
  "property/fetchProperty",
  async (id) => {
    const variables = { id };
    const { data } = await client.query({
      query: Get_Property,
      variables,
    });
    return data.property;
  }
);

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export const useAppDispatch = () => useDispatch<AppDispatch>();

这里是store.js

import { configureStore } from "@reduxjs/toolkit";
import propertiesSlice from '../features/properties/propertiesSlice'
import userSlice from '../features/user/userSlice'

export const store = configureStore({
  reducer: {
     properties: propertiesSlice,
     user: userSlice,
  },
});

Package.json

{
  "name": "chisfis-nextjs",
  "version": "0.2.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@apollo/react-hooks": "^4.0.0",
    "@headlessui/react": "^1.7.12",
    "@heroicons/react": "^2.0.16",
    "@mapbox/mapbox-gl-geocoder": "^5.0.1",
    "@mapbox/mapbox-sdk": "^0.15.0",
    "@netlify/plugin-nextjs": "^4.33.0",
    "@reduxjs/toolkit": "^1.9.3",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/line-clamp": "^0.4.2",
    "@tailwindcss/typography": "^0.5.9",
    "@types/google-map-react": "^2.1.7",
    "@types/node": "18.14.2",
    "@types/react": "18.0.28",
    "@types/react-datepicker": "^4.10.0",
    "@types/react-dom": "18.0.11",
    "client-only": "^0.0.1",
    "eslint": "8.35.0",
    "eslint-config-next": "^13.2.3",
    "framer-motion": "^10.0.1",
    "geocoding": "^1.0.0",
    "google-map-react": "^2.2.0",
    "graphql": "^16.6.0",
    "graphql-tag": "^2.12.6",
    "latest": "^0.2.0",
    "lodash": "^4.17.21",
    "mapbox-gl": "^2.13.0",
    "next": "^13.2.4-canary.9",
    "next-auth": "^4.20.1",
    "rc-slider": "^10.1.1",
    "react": "^18.2.0", 
    "react-datepicker": "^4.10.0",
    "react-dom": "^18.2.0",
    "react-hooks-global-state": "^2.1.0",
    "react-icons": "^4.8.0",
    "react-map-gl": "^7.0.21",
    "react-redux": "^8.0.0-beta.1",
    "react-swipeable": "^7.0.0",
    "react-use": "^17.4.0",
    "react-use-keypress": "^1.3.1",
    "react-whatsapp": "^0.3.0",
    "redux": "^4.2.1",
    "sass": "^1.58.3",
    "server-only": "^0.0.1",
    "sharp": "^0.32.0",
    "typescript": "4.9.5"
  },
  "devDependencies": {
    "@types/mapbox__mapbox-gl-geocoder": "^4.7.3",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7",
    "webpack": "^5.78.0"
  }
}

我试图将我的node js版本更改为不起作用的更高和更低版本，我删除了node模块并再次安装npm，但仍然抛出错误

next.js

1条答案

按热度按时间
pb3skfrl

pb3skfrl1#

检查您的TypeScript类型：确保你在代码中使用了正确的TypeScript类型。检查你的TypeScript类型是否相互兼容，这样会很容易发现错误
你的propertySlice.js，是js不是。ts尝试在你的所有应用程序中使用ts。
检查您的Redux商店配置：请确保您正确配置了Redux商店。检查您是否向商店提供了正确的还原器
检查您的Apollo客户端配置：确保正确配置了Apollo客户端，检查是否向客户端提供了正确的uri，以及是否将客户端正确传递给ApolloProvider
我能想到的就这些了，希望能帮上忙

赞(0）分享  回复(0）举报  2023-04-20
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com