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

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

新規登録して質問してみよう
ただいま回答率
87.20%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Node.js

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

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

解決済

【Nuxt.js】npm run buildでError: Cannot find moduleとなってしまう【Docker】

退会済みユーザー

退会済みユーザー

総合スコア0

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Node.js

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

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

1回答

0評価

0クリップ

574閲覧

投稿2022/04/07 07:50

編集2022/04/08 23:28

前提

独学でSPAポートフォリオを作成しております。
フロントエンドはNuxt.js、バックエンドにRailsを採用しています。
パッケージnuxt-webfontloaderをインストールしnuxt.config.jsのmodulesへ追記したところdocker-compose buildにてエラー発生。

実現したいこと

どうしたらBuildが成功するのか知りたいです。
あとnode_modulesがしっかり更新されているのかが不安です。

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

=> ERROR [7/7] RUN npm run build 1.7s ------ > [7/7] RUN npm run build: #11 0.581 #11 0.581 > app@1.0.0 build /app #11 0.581 > nuxt build #11 0.581 #11 1.241 #11 1.241 WARN mode option is deprecated. Please use ssr: true for universal mode or ssr: false for spa mode and remove mode from nuxt.config #11 1.241 #11 1.570 #11 1.570 WARN Module nuxt-webfontloader not found. #11 1.570 #11 1.572 #11 1.572 FATAL Cannot find module 'nuxt-webfontloader' #11 1.572 Require stack: #11 1.572 - /app/node_modules/@nuxt/core/dist/core.js #11 1.572 #11 1.572 Require stack: #11 1.572 - node_modules/@nuxt/core/dist/core.js #11 1.572 at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1029:15) #11 1.572 at Function.resolve (internal/modules/cjs/helpers.js:79:19) #11 1.572 at p (node_modules/jiti/dist/jiti.js:1:52925) #11 1.572 at Resolver.g [as _require] (node_modules/jiti/dist/jiti.js:1:54200) #11 1.572 at Resolver.requireModule (node_modules/@nuxt/core/dist/core.js:381:29) #11 1.572 at ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:182:38) #11 1.572 at node_modules/@nuxt/utils/dist/utils.js:639:43 #11 1.572 at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:55:5) #11 1.572 at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:478:5) #11 1.572 #11 1.579 #11 1.579 ╭────────────────────────────────────────────────────╮ #11 1.579 │ │ #11 1.579 │ ✖ Nuxt Fatal Error │ #11 1.579 │ │ #11 1.579 │ Error: Cannot find module 'nuxt-webfontloader' │ #11 1.579 │ Require stack: │ #11 1.579 │ - /app/node_modules/@nuxt/core/dist/core.js │ #11 1.579 │ │ #11 1.579 ╰────────────────────────────────────────────────────╯ #11 1.579 #11 1.600 npm ERR! code ELIFECYCLE #11 1.600 npm ERR! errno 1 #11 1.601 npm ERR! app@1.0.0 build: `nuxt build` #11 1.601 npm ERR! Exit status 1 #11 1.601 npm ERR! #11 1.601 npm ERR! Failed at the app@1.0.0 build script. #11 1.601 npm ERR! This is probably not a problem with npm. There is likely additional logging output above. #11 1.607 #11 1.607 npm ERR! A complete log of this run can be found in: #11 1.607 npm ERR! /root/.npm/_logs/2022-04-07T07_23_21_567Z-debug.log ------ executor failed running [/bin/sh -c npm run build]: exit code: 1 ERROR: Service 'frontend' failed to build : Build failed

該当のソースコード

package.json

"dependencies": { "@nuxtjs/axios": "^5.3.6", "nuxt": "^2.0.0", "nuxt-webfontloader": "^1.1.0"

nuxt.config.js

modules: [ // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', 'nuxt-webfontloader', ],

試したこと

npm install はしましたがnode_modulesが更新されているのかは不明です。パスが間違っている可能性もあります。
node_modules, package.json, package-look.jsonはfrontendディレクトリ直下にあります。
docker-compose run --rm frontend npm rootで確認したところ
/app/node_modulesとなっています。

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

npm version
{
app: '1.0.0',
npm: '6.14.4',
ares: '1.16.0',
brotli: '1.0.7',
cldr: '37.0',
icu: '67.1',
llhttp: '2.0.4',
modules: '83',
napi: '6',
nghttp2: '1.40.0',
node: '14.3.0',
openssl: '1.1.1g',
tz: '2019c',
unicode: '13.0',
uv: '1.37.0',
v8: '8.1.307.31-node.33',
zlib: '1.2.11'
}

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Node.js

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

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです