Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Next.JS AppProps – You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

I’m working on a Next.JS 13.5.6 app and am running into an error whenever I connect to the site in development mode. Production mode works if I build and start.

The error I get when I connect to the site is:

⨯ D:Coding ProjectsGearboxpages_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}>

That error appears twice and is followed by:

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

My _app.tsx is as follows:

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 */ );
}

When I connect to the site, it displays Internal Server Error.

So far, I’ve tried recloning the repository, deleting node_modules and .next, and then running npm ci. Again, the app works in production mode.

My tsconfig.json is:

{
  "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"],
}

My next.config.js is:

/** @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;

How do I fix this error?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The space in my file path was the issue. I renamed my "Coding Projects" folder to "CodingProjects" and it worked.


  2. 0

    You may need an appropriate loader to handle this file type…

    transpilePackages

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

module.exports = nextConfig;

    import dynamic from "next/dynamic";
const DndProvider = dynamic(
  () => import("react-dnd").then((dnd) => dnd.DndProvider),
  { ssr: false }
);
const HTML5Backend: any = dynamic(
  () =>
    import('react-dnd-html5-backend').then((html) => html.HTML5Backend as any),
  { ssr: false }
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search