CODEWITHSUNDEEP
javascriptreactjsnext.js
Mikkel Bengtsen
Mikkel Bengtsen

Reputation: 111

Next.js _app.js: Module parse failed: Unexpected token on fresh project

I create a fresh Next.js project using:

npx create-next-app

Then I move into the folder, run npm run dev and am getting the following error:

C:/Users/mikke/Documents/Projects/next-project/pages/_app.js 4:9
Module parse failed: Unexpected token (4:9)
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
|
| function MyApp({ Component, pageProps }) {
>   return <Component {...pageProps} />
| }
|

Very confused as to why this is happening. I first got the error deploying and then cloning this example: https://github.com/supabase/supabase/tree/master/examples/nextjs-todo-list

I've also tried removing node_modules and ./next and reinstalling dependencies, but no luck. What am I missing?

Edit: my _app.js (exact same as create-next-app default)

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Upvotes: 10

Views: 10415

Answers (4)

Igor
Igor

Reputation: 1

This happened to me when I exported something from routes and used it on the front.

Upvotes: 0

Vishal Kashi
Vishal Kashi

Reputation: 872

Hey in my case I was using a library called drizzle for communicating with my db. And I got this error.

Error Image

The issue was I was calling it from a client component. I moved the code (which was a server action in this case) to another file and used "use server" declarative on top of the file and then referenced the function from the client component. This solved it for me.

"use server"
import {z} from "zod";
import { action } from "@/utils/safe-action"
import { auth } from "@/auth/auth";
import { db } from "@/database";
import { posts } from "@/database/schema/posts";

const CreatePostSchema = z.object({
    body: z.string(),
})

type CreatePostSchema = z.infer<typeof CreatePostSchema>;

const _createPost = async (post: CreatePostSchema) => {
    const session = await auth();
    console.log(post);
    
    if(!session) return {message: "User is not authenticated"};

    //Todo: Other validations regarding a post

    await db.insert(posts).values({
        body: post.body,
        userId: session.user.id
    })

    //Todo: redirect user to some page
}

export const createPost = action(CreatePostSchema, _createPost);

Upvotes: 0

yaach
yaach

Reputation: 462

I have been experienced the same issue lately. Also tried to delete .next, node_modules, restart the dev server. Not sure why this is happening.

On my troubleshooting path, found out a workaround that works but then my application after some development gets stuck on the same issue.

Anyways, my workaround is that I need to either reinstall nextjs or upgrade nextjs, and delete .nextjs and node_modules.

Basically:

$ npm uninstall next
$ npm i next
$ rm -r .next node_modules
$ npm run dev

Did this from next v 14.0.1 to 14.0.3 to 14.1.0

Upvotes: 0

Mikkel Bengtsen
Mikkel Bengtsen

Reputation: 111

For others that might run into this, the solution (atleast for me) was to run the commands inside vscode's terminal. For more info: https://github.com/vercel/next.js/issues/16535

Upvotes: 1

Related Questions