javascript - Next.js _app.js: Module parse failed: Unexpected token on fresh project - Stack Overflow

admin管理员组

文章数量:1346186

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 
|
| 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:

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 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/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./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

• javascript
• reactjs
• next.js

Share Improve this question Follow edited Feb 9, 2021 at 13:09 Mikkel Bengtsen asked Feb 9, 2021 at 10:59 Mikkel BengtsenMikkel Bengtsen 11111 gold badge11 silver badge55 bronze badges 5

• 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 Commented Feb 9, 2021 at 11:06
• node v12.16.3 and npm v7.0.5, ill try upgrading? – Mikkel Bengtsen Commented Feb 9, 2021 at 11:09
• still getting the same error after upgrading to your versions and reinstalling dependencies – Mikkel Bengtsen Commented Feb 9, 2021 at 11:18
• Could you post the code for your pages/_app.js file? – juliomalves Commented Feb 9, 2021 at 13:02
• 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 Commented Feb 9, 2021 at 13:09

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

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

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

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

Error Image

The issue was I was calling it from a client ponent. 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 ponent. 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);

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

本文标签： javascriptNextjs appjs Module parse failed Unexpected token on fresh projectStack Overflow