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

Question

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

I just created the fresh next js project using npx create-next-app and was able to run npm run dev successfully. I am using node -v 14.15.4 and npm -v 7.5.2. What is your node version? — Soheb
– Soheb, Commented Feb 9, 2021 at 11:06
still getting the same error after upgrading to your versions and reinstalling dependencies — Mikkel Bengtsen
– Mikkel Bengtsen, Commented Feb 9, 2021 at 11:18
I edited the main question now with the code @juliomalves, but its the exact same code as what you get with npx create-next-app — Mikkel Bengtsen
– Mikkel Bengtsen, Commented Feb 9, 2021 at 13:09

Mikkel Bengtsen · Accepted Answer · 2021-02-10 08:35:57Z

1

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

answered Feb 10, 2021 at 8:35

Mikkel Bengtsen

1111 gold badge1 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yaach · Accepted Answer · 2024-01-19 14:59:27Z

0

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

answered Jan 19, 2024 at 14:59

yaach

4623 silver badges3 bronze badges

Comments

Vishal Kashi · Accepted Answer · 2024-01-21 04:41:43Z

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);

Igor · Accepted Answer · 2024-09-03 13:31:28Z

0

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

answered Sep 3, 2024 at 13:31

Igor

1

2 Comments

Marco Over a year ago

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related