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

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

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

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

npm

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Q&A

解決済

【Vue CLI】npm run serveでエラーが発生する

m0yah1
m0yah1

総合スコア10

Vue.js

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

npm

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

1回答

0グッド

0クリップ

3997閲覧

投稿2022/03/21 13:06

編集2022/03/21 13:11

1.実現したいこと・つまづいた点

【最終目的】vue3にtailwind cssを導入するために、まずはVue CLIを使ってVueのプロジェクトを立ち上げたい
⇒【つまづき】npm run serveでエラーが発生したので、原因を明らかにしたい

2.手順・エラーメッセージ

1.コマンドプロンプトを開き、プロジェクトを作成【成功】

$ vue create vue-test

2.設定はDefault3系を選択【成功】

Vue CLI v5.0.3 ? Please pick a preset: (Use arrow keys) > Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features

3.プロジェクトを作成、cd vue-testでディレクトリを移動し、npm run serveでローカルサーバーを起動する【失敗】

エラー画面
コマンドプロンプトのエラー表記

エラーメッセージ

ERROR Failed to compile with 1 error error in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css Syntax Error: TypeError: Cannot read properties of undefined (reading 'config')

エラーメッセージ全体

C:\Users\name\vue-test>npm run serve > vue-test@0.1.0 serve > vue-cli-service serve INFO Starting development server... ERROR Failed to compile with 1 error error in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css Syntax Error: TypeError: Cannot read properties of undefined (reading 'config') ERROR in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): TypeError: Cannot read properties of undefined (reading 'config') at getTailwindConfig (C:\Users\name\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:81:62) at C:\Users\name\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:124:92 at C:\Users\name\node_modules\tailwindcss\lib\processTailwindFeatures.js:43:11 at plugins (C:\Users\name\node_modules\tailwindcss\lib\index.js:20:104) at LazyResult.runOnRoot (C:\Users\name\vue-test\node_modules\postcss\lib\lazy-result.js:339:16) at LazyResult.runAsync (C:\Users\name\vue-test\node_modules\postcss\lib\lazy-result.js:393:26) at LazyResult.async (C:\Users\name\vue-test\node_modules\postcss\lib\lazy-result.js:221:30) at LazyResult.then (C:\Users\name\vue-test\node_modules\postcss\lib\lazy-result.js:206:17) @ ./node_modules/vue-style-loader/index.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css 4:14-323 15:3-20:5 16:22-331 @ ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css 1:0-381 1:0-381 @ ./src/App.vue 5:0-62 @ ./src/main.js 2:0-28 3:10-13 ERROR in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=css) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): TypeError: Cannot read properties of undefined (reading 'config') at getTailwindConfig (C:\Users\name\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:81:62) at C:\Users\name\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:124:92 at C:\Users\name\node_modules\tailwindcss\lib\processTailwindFeatures.js:43:11 at plugins (C:\Users\name\node_modules\tailwindcss\lib\index.js:20:104) at LazyResult.runOnRoot (C:\Users\name\vue-test\node_modules\postcss\lib\lazy-result.js:339:16) at LazyResult.runAsync (C:\Users\name\vue-test\node_modules\postcss\lib\lazy-result.js:393:26) at LazyResult.async (C:\Users\name\vue-test\node_modules\postcss\lib\lazy-result.js:221:30) at LazyResult.then (C:\Users\name\vue-test\node_modules\postcss\lib\lazy-result.js:206:17) @ ./node_modules/vue-style-loader/index.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=css 4:14-354 15:3-20:5 16:22-362 @ ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=css 1:0-415 1:0-415 @ ./src/components/HelloWorld.vue 5:0-81 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=js 1:0-53 5:4-14 @ ./src/App.vue?vue&type=script&lang=js 1:0-189 1:0-189 1:190-368 1:190-368 @ ./src/App.vue 2:0-54 3:0-49 3:0-49 8:49-55 @ ./src/main.js 2:0-28 3:10-13 webpack compiled with 2 errors

4.自分で調べたことや試したこと

初めてVue.jsで開発を始めようと思い、こちらのQiltaを参考に作業環境を整えようとしていました。
関連ツールのバージョンを最新にしたり、エラーメッセージのファイルを確認したり、類似の質問を確認しましたが、解決に至ることができませんでした。
根本的なものを誤っている可能性もあるのですが、自分では気付けそうにないので、お力添えいただけると幸いです。

5.使っているツールのバージョンなど補足情報

  • デバイス:Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz 4.00 GHz
  • OS:Windows 10 Pro / バージョン21H2
  • Vue:@vue/cli 5.0.3
  • npm:@8.5.0
  • node:@v16.14.2

$npm list vue
vue@3.2.31
@vue/server-renderer@3.2.31
vue@3.2.31 deduped

以下のような質問にはグッドを送りましょう

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

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

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

自己解決

自己解決できたので、方法を記載します。

解決方法

postcss.config.jstailwind.config.jsをプロジェクトのルートディレクトリ直下に置くとエラーが解消され、ローカルサーバーのビルドが完了します。

解決手順

1.postcss.config.jstailwind.config.jsをインストールする

コマンドプロンプト等で以下のように打ち込み、2つのファイルをインストールします。

npm install -D postcss@latest autoprefixer@latest

2.インストールした2つのファイルをプロジェクトのルートディレクトリ直下に置く

インストールしたファイル(★)を、以下のようなファイル構成になるように移動させてください。

C:\Users\name(ユーザー名)\vue-test(プロジェクトファイル名) │ .gitignore │ babel.config.js │ jsconfig.json │ package-lock.json │ package.json │ postcss.config.js★ │ README.md │ tailwind.config.js★ │ vue.config.js ├─ node_modules ├─ public └─ src

3,再度コマンドプロンプトでnpm run serveする

コマンドプロンプトを開き、cd vue-test(プロジェクトファイル名)でディレクトリを移動し、npm run serveでローカルサーバーを起動してください。
成功すると、以下のような画面が表示されます。

> vue-cli-service serve INFO Starting development server... [38%] building (11/41 modules) warn - The `content` option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. DONE Compiled successfully in 2834ms 23:57:13 App running at: - Local: http://localhost:(ポート番号)/ - Network: http://(IPアドレス):(ポート番号)/ Note that the development build is not optimized. To create a production build, run npm run build.

どうやって解決に結びついたか

エラーメッセージが「config」「postcss」「tailwind」に関する内容だったので、もしかしてpostcss.config.jstailwind.config.jsをディレクトリに入れていないからかな…と思いました。
まだTailwindCSSをプロジェクトに含めてはいないので、参考記事を元に進めたいと思います。

参考記事

【WEB開発】Vue.js + TailWind CSS 導入編

投稿2022/03/21 15:38

編集2022/03/21 15:40
m0yah1

総合スコア10

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

Vue.js

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

npm

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。