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

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

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

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

npm

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

解決済

Prettier実行後にnpm run dev 実行するとエラーが発生する

SanQ
SanQ

総合スコア92

Vue.js

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

npm

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

1回答

0評価

0クリップ

356閲覧

投稿2022/03/13 05:54

前提・実現したいこと

PrettierでVueファイルのコードを整形後、npm run dev(watch, prod)を実行したところエラーが発生した。Prettierでコードの整形を行い、npm run devを行ってもエラーが発生しない方法を教えていただきたい。

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

./resources/js/components/User/Sections.vuePrettierを使用してコードの整形を行ったファイル

terminal

ERROR in ./resources/js/components/User/Sections.vue?vue&type=template&id=26d30eb7& (./node_modules/vue- loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader- options!./resources/js/components/User/Sections.vue?vue&type=template&id=26d30eb7&) Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): SyntaxError: Unexpected token (1:2404) at Parser.pp$4.raise (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:2757:13) at Parser.pp.unexpected (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:647:8) at Parser.pp.expect (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:641:26) at Parser.pp$3.parseExprList (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:2651:14) at Parser.pp$3.parseSubscripts (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:2075:29) at Parser.pp$3.parseExprSubscripts (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:2050:21) at Parser.pp$3.parseMaybeUnary (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:2024:17) at Parser.pp$3.parseExprOps (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:1966:19) at Parser.pp$3.parseMaybeConditional (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:1949:19) at Parser.pp$3.parseMaybeAssign (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:1925:19) at Parser.pp$3.parseExpression (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:1896:19) at Parser.pp$1.parseStatement (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:815:45) at Parser.parseStatement (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:6116:31) at Parser.pp$1.parseBlock (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:1112:23) at Parser.pp$3.parseFunctionBody (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:2600:22) at Parser.pp$1.parseFunction (/var/www/public/WHI/WHI/node_modules/vue-template-es2015-compiler/buble.js:1219:8) webpack compiled with 1 error

ツールのバージョン

package.json

json

{ "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "@popperjs/core": "^2.10.2", "axios": "^0.21", "bootstrap": "^5.1.3", "deepmerge": "^4.2.2", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14", "prettier": "2.5.1", "resolve-url-loader": "^3.1.2", "sass": "~1.32", "sass-loader": "^11.1.1", "vue": "^2.6.12", "vue-loader": "^15.9.8", "vue-template-compiler": "^2.6.12" }, "dependencies": { "js-cookie": "^3.0.1", "vue-router": "^3.5.3", "vuetify": "^2.6.3", "vuex": "^3.6.2", "vuex-persistedstate": "^4.1.0" } }

.prettierrc.json

json

{ "printWidth": 80, "tabWidth": 4, "useTabs": false, "semi": true, "singleQuote": false, "quoteProps": "as-needed", "jsxSingleQuote": false, "trailingComma": "es5", "bracketSpacing": true, "jsxBracketSameLine": false, "arrowParens": "always", "rangeStart": 0, "filepath": "none", "requirePragma": false, "insertPragma": false, "proseWrap": "preserve", "htmlWhitespaceSensitivity": "css", "vueIndentScriptAndStyle": false, "endOfLine": "auto" }

試したこと

npm run installnpm run updatepackage.jsonのバージョンを変更した

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Vue.js

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

npm

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