Q&A
docker build時にRUN npm run buildの時点でCannot read property 'tap' of undefinedというエラーが発生する
Rails、AWSを独学中の初学者です。
現在、Nuxt.js + Ruby on Rails + AWS Fargate の開発・デプロイチュートリアルという記事を進めています。
AWS ECR （フロントエンド編）において、Dockerfileの記述を追加し、ECRへimageをpushする際の docker buildコマンドで以下のエラーが発生しました。
発生している問題・エラーメッセージ
. . . => [5/7] RUN apt-get update -y && apt-get upgrade -y && npm install npm@6.14.4 && npm install ejs@3.0.1 && npm install nuxt@2.0.0 && npm in 486.8s => [6/7] ADD . /app 12.9s => ERROR [7/7] RUN npm run build 7.1s ------ > [7/7] RUN npm run build: #11 1.142 #11 1.142 > app@1.0.0 build /app #11 1.142 > nuxt build #11 1.142 #11 1.830 #11 1.830 WARN mode option is deprecated. You can safely remove it from nuxt.config #11 1.830 #11 6.888 #11 6.888 FATAL Cannot read property 'tap' of undefined #11 6.888 #11 6.888 at new Resolver (node_modules/enhanced-resolve/lib/Resolver.js:56:22) #11 6.888 at Object.exports.createResolver (node_modules/enhanced-resolve/lib/ResolverFactory.js:119:14) #11 6.888 at Object.<anonymous> (node_modules/enhanced-resolve/lib/node.js:21:39) #11 6.888 at Module._compile (internal/modules/cjs/loader.js:1200:30) #11 6.888 at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10) #11 6.888 at Module.load (internal/modules/cjs/loader.js:1049:32) #11 6.888 at Function.Module._load (internal/modules/cjs/loader.js:937:14) #11 6.888 at Module.require (internal/modules/cjs/loader.js:1089:19) #11 6.888 at require (internal/modules/cjs/helpers.js:73:18) #11 6.888 at Object.<anonymous> (node_modules/postcss-import-resolver/index.js:5:5) #11 6.888 at Module._compile (internal/modules/cjs/loader.js:1200:30) #11 6.888 at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10) #11 6.888 at Module.load (internal/modules/cjs/loader.js:1049:32) #11 6.888 at Function.Module._load (internal/modules/cjs/loader.js:937:14) #11 6.888 at Module.require (internal/modules/cjs/loader.js:1089:19) #11 6.888 at require (internal/modules/cjs/helpers.js:73:18) #11 6.888 #11 6.927 #11 6.927 ╭────────────────────────────────────────────────────────╮ #11 6.927 │ │ #11 6.927 │ ✖ Nuxt Fatal Error │ #11 6.927 │ │ #11 6.927 │ TypeError: Cannot read property 'tap' of undefined │ #11 6.927 │ │ #11 6.927 ╰────────────────────────────────────────────────────────╯ #11 6.927 #11 6.969 npm ERR! code ELIFECYCLE #11 6.972 npm ERR! errno 1 #11 6.977 npm ERR! app@1.0.0 build: `nuxt build` #11 6.980 npm ERR! Exit status 1 #11 6.983 npm ERR! #11 6.985 npm ERR! Failed at the app@1.0.0 build script. #11 6.987 npm ERR! This is probably not a problem with npm. There is likely additional logging output above. #11 7.003 #11 7.005 npm ERR! A complete log of this run can be found in: #11 7.006 npm ERR! /root/.npm/_logs/2020-12-05T15_22_18_066Z-debug.log ------ failed to solve with frontend dockerfile.v0: failed to build LLB: executor failed running [/bin/sh -c npm run build]: runc did not terminate sucessfully
該当のソースコード
関連がありそうなファイルは以下です。
Dockerfile
1FROM node:14.3 2 3WORKDIR /app 4 5ENV LANG C.UTF-8 6ENV TZ Asia/Tokyo 7 8# ↓追加 9ADD package.json /app/package.json 10ADD package-lock.json /app/package-lock.json 11# ここまで 12 13RUN apt-get update -y && \ 14 apt-get upgrade -y && \ 15 npm install npm@6.14.4 && \ 16 npm install ejs@3.0.1 && \ 17 npm install nuxt@2.0.0 && \ 18 npm install -g create-nuxt-app@2.15.0 && \ 19 npm install defu@3.1.0 20 21ADD . /app 22 23# ↓追加 24RUN npm run build 25 26EXPOSE 3000 27 28CMD ["npm", "run", "start"] 29# ここまで
package.json↓
{ "name": "app", "version": "1.0.0", "description": "hoge", "author": "me", "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate", "test": "jest" }, "dependencies": { "@nuxtjs/axios": "^5.12.2", "nuxt": "^2.0.0" }, "devDependencies": { "@babel/core": "^7.11.6", "@babel/preset-env": "^7.11.5", "@vue/test-utils": "^1.1.0", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^26.3.0", "jest": "^26.4.2", "vue-jest": "^3.0.7" }, "jest": { "moduleFileExtensions": [ "js", "json", "vue" ], "transform": { ".*\.(vue)$": "vue-jest", "^.+\.js$": "<rootDir>/node_modules/babel-jest" } } }
nuxt.config.js↓
export default { mode: 'universal', /* ** Headers of the page */ head: { title: process.env.npm_package_name || '', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, /* ** Customize the progress-bar color */ loading: { color: '#fff' }, /* ** Global CSS */ css: [ ], /* ** Plugins to load before mounting the App */ plugins: [ ], /* ** Nuxt.js dev-modules */ buildModules: [ ], /* ** Nuxt.js modules */ modules: [ '@nuxtjs/axios', ], /* ** Build configuration */ build: { /* ** You can extend webpack config here */ extend(config, ctx) { } }, server: { port: 3000, host: '0.0.0.0' } }
docker-compose.yml↓
version: "3" services: db: container_name: db image: mysql:5.7.30 environment: TZ: Asia/Tokyo MYSQL_ALLOW_EMPTY_PASSWORD: "yes" volumes: - mysql_data:/var/lib/mysql ports: - 3307:3306 networks: app_net: ipv4_address: '172.20.0.2' backend: container_name: backend build: ./backend/ image: backend command: bundle exec rails server -b 0.0.0.0 tty: true stdin_open: true volumes: - ./backend:/app:cached - bundle_data:/usr/local/bundle:cached - /app/vendor - /app/tmp - /app/log - /app/.git environment: TZ: Asia/Tokyo depends_on: - db ports: - 5000:3000 # ポートフォワード networks: app_net: ipv4_address: '172.20.0.3' frontend: container_name: front build: ./frontend/ image: frontend volumes: - ./frontend:/app ports: - 3000:3000 command: "npm run dev" networks: app_net: ipv4_address: '172.20.0.4' networks: app_net: driver: bridge ipam: driver: default config: - subnet: 172.20.0.0/24 volumes: mysql_data: bundle_data:
試したこと
Cannot read property 'tap' of undefinedでググり、こちらを参考に、
package-lock.jsonとnode_modulesを削除したのち、npm installしましたが変わらずでした。
フロントエンドに関して、環境構築から何から初めて触ったので、理解が乏しい部分があると思いますが、よろしくお願い致します。
補足情報（FW/ツールのバージョンなど）
バージョンは参考させていただいている記事と同じです。
回答1件
0
私もそのチュートリアルを進めており、同じエラーに遭遇しました。
結論から申しますと、以下のように npm install時に --globalオプションを付けることで解決しました。
npm install -g nuxt@2.0.0 &&\
チュートリアルに書いてあるとおりの記述だとCLIのパスが通っていないのでしょう。
nuxtやcreate-nuxt-app のようにCLIを実行するものはグローバルインストールしてやる必要があるようですね。
投稿2021/01/03 00:24
総合スコア6
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。