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

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

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

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

解決済

【EC2】vue.jsでのトランスパイル(npm run prodコマンド)を実行するとエラーが出る

NULL_000000
NULL_000000

総合スコア3

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

1回答

0評価

0クリップ

417閲覧

投稿2021/11/17 21:10

編集2021/11/19 00:13

前提・実現したいこと

Laravel+Vue.jsでSNS風Webサービスを作成してEC2にデプロイする段階に挑戦しています。
EC2上でnginx+php+laravel+vue.jsの環境構築を行なっております。

$ npm run prod

JavaScriptのトランスパイルを行った際に以下のエラーが発生しました。
自分の力だけでは解決できないと思い、今回質問させていただきました。

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

ERROR Failed to compile with 1 errors 8:20:40 PM This relative module was not found: * ./components/ArticleLike in ./resources/js/app.js 3 assets ERROR in ./resources/js/app.js Module not found: Error: Can't resolve './components/ArticleLike' in '/home/web-user/laravel-my-portforio/src/resources/js' @ ./resources/js/app.js 3:0-51 7:17-28 @ multi ./resources/js/app.js ./resources/sass/app.scss npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the @ production script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /home/web-user/.npm/_logs/2021-11-17T20_20_40_219Z-debug.log

該当のソースコード

src/resources/js/app.js

JavaScript

import './bootstrap' import Vue from 'vue' import ArticleLike from './components/ArticleLike' const app = new Vue({ el: '#app', components: { ArticleLike, } })

src/resources/js/components/ArticleLike.Vue

JavaScript

<template> <div> <button type="button" class="btn m-0 p-1 shadow-none" > <i class="fas fa-heart mr-1" :class="{'red-text':this.isLikedBy, 'animated heartBeat fast':this.gotToLike}" @click="clickLike" <template> <div> <button type="button" class="btn m-0 p-1 shadow-none" > <i class="fas fa-heart mr-1" :class="{'red-text':this.isLikedBy, 'animated heartBeat fast':this.gotToLike}" @click="clickLike" /> </button> {{ countLikes }} </div> </template> <script> export default { props: { initialIsLikedBy: { type: Boolean, default: false, }, initialCountLikes: { type: Number, default: 0, }, authorized: { type: Boolean, default: false, }, endpoint: { type: String, }, }, data() { return { isLikedBy: this.initialIsLikedBy, countLikes: this.initialCountLikes, gotToLike: false, } }, methods: { clickLike() { if (!this.authorized) { alert('いいね機能はログイン中のみ使用できます') return } this.isLikedBy ? this.unlike() : this.like() }, async like() { const response = await axios.put(this.endpoint) this.isLikedBy = true this.countLikes = response.data.countLikes this.gotToLike = true }, async unlike() { const response = await axios.delete(this.endpoint) this.isLikedBy = false this.countLikes = response.data.countLikes this.gotToLike = false }, }, } </script>

src/package.json

@click="clickLike" { "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.24.0", "cross-env": "^7.0.3", "laravel-mix": "^5.0.1", "lodash": "^4.17.19", "resolve-url-loader": "^3.1.0", "sass": "^1.15.2", "sass-loader": "^7.1.0", "vue": "^2.6.14", "vue-template-compiler": "^2.6.14" } }

src/webpack.mix.js

/* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel application. By default, we are compiling the Sass | file for the application as well as bundling up all the JS files. | */ mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .version();

試したこと

node_modulesを削除する

rm -rf ../laravel/node_modules

package-lock.jsonを削除する

rm -rf ../laravel/package-lock.json

npm installを実行する

npm install

npm run prodを実行する

npm run prod

これらのコマンドを試して見ましたが
同じエラーのままです。
以上、よろしくお願いします。

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

PHP 7.3.29
npm 6.14.4
vue 2.6.14
Laravel Framework 6.20.39
Composer version 2.1.12

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。