Next.JS AppProps - 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件

Question

我正在开发 Next.JS 13.5.6 应用程序，每当我在开发模式下连接到该站点时都会遇到错误。如果我构建并启动，生产模式就可以工作。

我连接到该网站时收到的错误是：

⨯ D:\Coding Projects\Gearbox\pages\_app.tsx
Module parse failed: Unexpected token (15:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   Component,
|   pageProps: { session, ...pageProps },
> }: AppProps<{ session: Session }>) {
|   return (
|     <SessionProvider session={session}>

该错误出现两次，然后是：

⨯ Error: ENOENT: no such file or directory, open 'C:\Users\name\Coding Projects\Gearbox\.next\fallback-build-manifest.json'
    at readFileSync (node:fs:453:20)
    at loadManifest (D:\Coding Projects\Gearbox\node_modules\next\dist\server\load-manifest.js:30:54)
    at loadManifestWithRetries (D:\Coding Projects\Gearbox\node_modules\next\dist\server\load-components.js:34:51)
    at async loadDefaultErrorComponentsImpl (D:\Coding Projects\Gearbox\node_modules\next\dist\server\load-default-error-components.js:30:24)
    at async DevServer.getFallbackErrorComponents (D:\Coding Projects\Gearbox\node_modules\next\dist\server\dev\next-dev-server.js:551:16)
    at async DevServer.renderErrorToResponseImpl (D:\Coding Projects\Gearbox\node_modules\next\dist\server\base-server.js:1875:40)
    at async DevServer.pipeImpl (D:\Coding Projects\Gearbox\node_modules\next\dist\server\base-server.js:826:25)
    at async DevServer.handleCatchallRenderRequest (D:\Coding Projects\Gearbox\node_modules\next\dist\server\next-server.js:572:17)
    at async DevServer.handleRequestImpl (D:\Coding Projects\Gearbox\node_modules\next\dist\server\base-server.js:728:17) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\Users\\name\\Coding Projects\\Gearbox\\.next\\fallback-build-manifest.json'
}

我的_app.tsx如下：

import { SessionProvider } from "next-auth/react";
import "../styles/globals.css";
import { AppProps } from "next/app";
import { Session } from "next-auth";
import { DndProvider } from "react-dnd";
import { Analytics } from "@vercel/analytics/react";
import { SpeedInsights } from "@vercel/speed-insights/next";
import { HTML5Backend } from "react-dnd-html5-backend";

import { NextSeo } from "next-seo";

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps<{ session: Session }>) {
  return ( /* JSX */ );
}

当我连接到该网站时，它显示

Internal Server Error

。

到目前为止，我已经尝试重新克隆存储库，删除

node_modules

和

.next

，然后运行

npm ci

。同样，该应用程序在生产模式下运行。

我的 tsconfig.json 是：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./*"],
    },
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "pages/createTeam.tsx",
    "pages/[teamSlug]/createSeason.ksx",
    "pages/index.tsx",
    "pages/profile.jsx",
    "pages/[teamSlug]/index.jsx",
    "pages/[teamSlug]/[seasonSlug]/index.jsx",
    "pages/[teamSlug]/[seasonSlug]/[competitonSlug]/index.jsx",
    "lib/client/getSession.js",
    "index.js",
  ],
  "exclude": ["node_modules"],
}

我的 next.config.js 是：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  swcMinify: false,
  images: {
    domains: [
      "lh3.googleusercontent.com",
      "www.mouser.de",
      "www.firstinspires.org",
      "files.slack.com",
    ],
  }
};

module.exports = nextConfig;

如何修复此错误？

Answer 1

我可以通过运行

npx next dev

找到解决方法。