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

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

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

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

npm

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

Vue CLI

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

解決済

【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クリップ

1040閲覧

投稿2022/03/21 13:06

編集2022/03/22 00:40

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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Vue.js

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

npm

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

Vue CLI

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