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

Miscarry

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? – Vineyard

node v12.16.3 and npm v7.0.5, ill try upgrading? – Miscarry

still getting the same error after upgrading to your versions and reinstalling dependencies – Miscarry

Could you post the code for your pages/_app.js file? – Ontario

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 – Miscarry

Answer 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

Miscarry

Answer 2

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

Yoohoo

Answer 3

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

Korte

Answer 4

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

Frontpage

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 – Hypermetropia

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. – Seline