Next.js アプリの yarn run build が通らない

Question

前提

Next.js で静的なポートフォリオサイトを作っています。

実現したいこと

yarn run build を通し、vercel デプロイをおこないたい。

発生している問題・エラーメッセージ

./pages/_app.tsx
5:48  Error: Parsing error: Unexpected token :

該当のソースコード

// /pages/_app.tsx
import "../styles/globals.scss";
import { AnimatePresence } from "framer-motion";
import { AppProps } from "next/app";

function MyApp({ Component, pageProps, router }: AppProps) {
  return (
    <AnimatePresence exitBeforeEnter onExitComplete={() => window.scrollTo(0, 0)}>
      <Component key={router.asPath} {...pageProps} />
    </AnimatePresence>
  );
};

export default MyApp;

試したこと

AppProps を使わない形にしてみましたが

import "../styles/globals.scss";
import { AnimatePresence } from "framer-motion";

function MyApp({ Component, pageProps, router }) {
  return (
    <AnimatePresence exitBeforeEnter onExitComplete={() => window.scrollTo(0, 0)}>
      <Component key={router.asPath} {...pageProps} />
    </AnimatePresence>
  );
}

export default MyApp;

Type error: Binding element 'Component' implicitly has an 'any' type. のエラーが発生。
Component, pageProps, router それぞれで型指定をしていけば解決する...??

import "../styles/globals.scss";
import { AnimatePresence } from "framer-motion";

function MyApp({ Component, pageProps, router }: {Component: any, pageProps: any, router: any} ) {
  return (
    <AnimatePresence exitBeforeEnter onExitComplete={() => window.scrollTo(0, 0)}>
      <Component key={router.asPath} {...pageProps} />
    </AnimatePresence>
  );
}

export default MyApp;

試しに AppProps を使用せず、それぞれ型指定をする方式にしてみると結局
4:48 Error: Parsing error: Unexpected token : が発生するので AppProps の問題ではなく記法の問題のようでした。

typescript を入れているのですが jsx として ESLint に見られているとか...??

補足情報（FW/ツールのバージョンなど）

yarn run dev は普通に動き、動作は問題ないです。

Comments

[hirotaka612]

./pages/_app.tsx を ./pages/_app.jsx にリネームしたところ、以下のコードで無事にコンパイルされました！
やはり typescript に対する ESLint の設定が間違っているのか...??

```
import "../styles/globals.scss";
import { AnimatePresence } from "framer-motion";

function MyApp({ Component, pageProps, router }) {
return (
<AnimatePresence
exitBeforeEnter
onExitComplete={() => window.scrollTo(0, 0)}
>
<Component key={router.asPath} {...pageProps} />
</AnimatePresence>
);
}

export default MyApp;
```

Answer 1

function MyApp({ Component, pageProps, router }: AppProps) {

を

function MyApp({ Component, pageProps, router } AppProps) {

に変更する。

Comments

[hirotaka612]

エラーメッセージをそのまま読むと確かにそうなんですが...
それだと AppProps がどこに効いているのか分からずエラーになってしまうと思います :bow:

[退会済みユーザー]

そうなんですね... 力になれなくてごめん