「Module not found: Can't resolve 'next/dist/next-server/lib/utils'」の原因が分かる方いらっしゃいませんか？

前提

Next.js、Reactを用いたアプリケーションを作成しております。
使用機器: Mac m1
エディタ: vscode

実現したいこと

apolloを用いてgraphQLを叩きたい。

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

error - ./node_modules/next-apollo/dist/link.js:40:0
Module not found: Can't resolve 'next/dist/next-server/lib/utils'

Import trace for requested module:
./node_modules/next-apollo/dist/index.js
./lib/apollo.js
./pages/_app.js

https://nextjs.org/docs/messages/module-not-found

該当のソースコード

JavaScript
1import { HttpLink } from "apollo-link-http";
2import { withData } from "next-apollo";
3
4const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:1337";
5
6const config = {
7    link: new HttpLink({
8        uri: `${API_URL}/graphql`, 
9    }), 
10};
11
12export default withData(config);

また、上記2行目の "next-apollo"; の部分にカーソルを合わせると、vscode上に下記のようなメッセージが表示されます。

モジュール 'next-apollo' の宣言ファイルが見つかりませんでした。'<ROOT_PATH>/node_modules/next-apollo/dist/index.js' は暗黙的に 'any' 型になります。
  存在する場合は `npm i --save-dev @types/next-apollo` を試すか、`declare module 'next-apollo';` を含む新しい宣言 (.d.ts) ファイルを追加しますts(7016)

試したこと

npm i --save-dev @types/next-apollo

vscode上に表示されたエラー内容に倣ってインストール実行してみましたが、Not Found Error が発生しました。

そのほかに色々調べてみたのですが、クリティカルな記事が見つからず現在に至っております。

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

node -v: v14.20.0

知識不足や情報不足等あるかと思いますが、もし知見のある方がいらっしゃる場合、ご教示頂けたら幸いです。

knuser1

2022/12/18 04:25 編集

package.jsonの定義はどうなっているでしょうか？（next-apolloやnext.jsのバージョンなど）。 next-apolloのパッケージ https://www.npmjs.com/package/next-apollo を見てみたのですが、1年くらいは更新されておらず、最新版のnext.jsにも対応していないように見えます。 https://www.apollographql.com/blog/apollo-client/next-js/next-js-getting-started/ 上記のように、Apollo ClientとNext.jsを組み合わせたようなサンプルも公開されていると思いますが、`@apollo/client`を直接利用するのでは要件を満たさないでしょうか？

tai72

2022/12/19 10:18

コメントいただきありがとうございます！下記のpackage.jsonの中身を記載いたします。 ※knuser1様にコメントいただいた後に "@apollo/client" をインストールいたしました。 ``` { "name": "myApp", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@apollo/client": "^3.7.2", "@apollo/react-hooks": "^3.1.5", "@apollo/react-ssr": "^3.1.5", "apollo-boost": "^0.4.7", "apollo-link-http": "^1.5.17", "eslint": "8.29.0", "eslint-config-next": "13.0.6", "graphql": "^15.0.0", "next": "13.0.6", "next-apollo": "^3.1.10", "react": "^18.2.0", "react-dom": "^18.2.0", "reactstrap": "^9.1.5" } } ``` >> 1年くらいは更新されておらず、最新版のnext.jsにも対応していないように見えます。そうだったのですね、、、。ご確認いただきありがとうございます。仰る通り、Apollo Client と Next.js を組み合わせたものを試してみたいと思います。大変助かります、ありがとうございます。

tai72

2022/12/19 12:09

@apollo/client を使用することで解決できました、ありがとうございます！