質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

GraphQL

GraphQL は、アプリケーション・プログラミング・インタフェース (API) 向けのクエリ言語およびサーバーサイドランタイムです。APIの速度、柔軟性、開発者にとっての使いやすさを向上させるために設計され、データを複数のデータソースから取得するリクエストを1つのAPI呼び出しで構成できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1292閲覧

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

tai72

総合スコア2

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

GraphQL

GraphQL は、アプリケーション・プログラミング・インタフェース (API) 向けのクエリ言語およびサーバーサイドランタイムです。APIの速度、柔軟性、開発者にとっての使いやすさを向上させるために設計され、データを複数のデータソースから取得するリクエストを1つのAPI呼び出しで構成できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2022/12/17 02:50

前提

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

knuser

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 を使用することで解決できました、ありがとうございます!
guest

回答1

0

自己解決

'next-apollo'ではなく、**'@apollo/client'**パッケージを使用することで解決。
下記は参考にさせていただいた記事です。
https://qiita.com/Annoske/items/60da1fa6a8371c32f76c
https://qiita.com/ozaki25/items/f4fc0e2a2ad4646cf8df

投稿2022/12/19 12:19

tai72

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問