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

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

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

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Yarn

Yarnは、Facebook/Exponent/Google/Tildeが開発したJavaScriptのパッケージマネージャ。npmよりもインストールが速く、厳密にモジュールのバージョンを固定できるなど、npmの問題を解決。npmと互換性があり、同じpackage.jsonを使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Q&A

解決済

1回答

791閲覧

create-nuxt-app実行後のNuxtアプリが起動しない

xinome

総合スコア20

Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Yarn

Yarnは、Facebook/Exponent/Google/Tildeが開発したJavaScriptのパッケージマネージャ。npmよりもインストールが速く、厳密にモジュールのバージョンを固定できるなど、npmの問題を解決。npmと互換性があり、同じpackage.jsonを使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

0グッド

0クリップ

投稿2022/11/17 07:02

前提

個人プロジェクトで1から create-nuxt-app を使ってNuxtアプリのセットアップを検証しています。
https://blog.proglus.jp/4972/
手順としてはほぼリンクの流れで進めていて、プロジェクトファイル作成まではいけるのですが
yarn dev 実行時、下記エラーが出るようになりました。
数回プロジェクトファイルの削除・再インストールとトライしてみたのですが解消されず、
・根本的なシステムの問題なのか
・外部ファイルの影響なのか
など一切が不明な状態となってしまいました。

お手数をおかけしますが、過去に似た事象が起きて解決された方、知見のある方いらっしゃればアドバイスいただけると助かります。
よろしくお願いいたします。

実現したいこと

  • ローカルでNuxtアプリが起動するようにしたい(今回の現象を解消したい)
  • 解消した上で、SourceTree経由でローカルリポジトリとGithubを連携したい
  • (+αでできれば)Storybook、SCSSパッケージをインストールして正しく動くようにしたい

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

$ yarn dev yarn run v1.22.4 $ nuxt ℹ Using default Tailwind CSS file from runtime/tailwind.css FATAL Cannot destructure property 'nuxt' of 'this' as it is undefined. at postcss8Module (node_modules/@nuxt/postcss8/dist/index.js:15:10) at installModule (node_modules/@nuxt/kit/dist/index.mjs:416:9) at async setup (node_modules/@nuxtjs/tailwindcss/dist/module.mjs:186:7) at async ModuleContainer.normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:167:5) at async ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:239:20) at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:51:7) at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:478:5) ╭───────────────────────────────────────────────────────────────────╮ │ │ │ ✖ Nuxt Fatal Error │ │ │ │ TypeError: Cannot destructure property 'nuxt' of 'this' as it │ │ is undefined. │ │ │ ╰───────────────────────────────────────────────────────────────────╯ error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

該当のソースコード

Nuxtセットアップ時の要件を記載します。

bash

1create-nuxt-app v5.0.0 2✨ Generating Nuxt.js project in prj_portfolio_manager_ver2 3? Project name: prj_portfolio_manager_ver2 4? Programming language: TypeScript 5? Package manager: Yarn 6? UI framework: Tailwind CSS 7? Template engine: HTML 8? Nuxt.js modules: Axios - Promise based HTTP client 9? Linting tools: ESLint, Prettier 10? Testing framework: None 11? Rendering mode: Universal (SSR / SSG) 12? Deployment target: Server (Node.js hosting) 13? Development tools: jsconfig.json (Recommended for VS Code if you're not using 14 typescript) 15? Continuous integration: CircleCI 16? What is your GitHub username? xinome 17? Version control system: Git

試したこと

初回は問題なくセットアップとローカルでの起動ができており、Storybookを導入したところ正常に動いていましたが、SCSSの導入時に下記事象が起きたため止むなくリセットした状況下です。
その後今回の事象が起き、手詰まってしまった形です。
(Nuxt本体が動かない限りは進められないので、参考までに転載します)

下記を参考にインストールしてみました。
https://ma-vericks.com/blog/nuxt-scss/
がその際、このエラーが出るようになりました。

bash

1Error 2Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: PostCSS plugin postcss-import requires PostCSS 8. Migration guide for end-users: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users at Processor.normalize (/Users/ikomasatoru/Desktop/workspace/github/prj_portfolio_manager_ver2/node_modules/postcss/lib/processor.js:167:15) at new Processor (/Users/ikomasatoru/Desktop/workspace/github/prj_portfolio_manager_ver2/node_modules/postcss/lib/processor.js:56:25) at postcss (/Users/ikomasatoru/Desktop/workspace/github/prj_portfolio_manager_ver2/node_modules/postcss/lib/postcss.js:55:10) at Object.loader (/Users/ikomasatoru/Desktop/workspace/github/prj_portfolio_manager_ver2/node_modules/postcss-loader/dist/index.js:95:20)

メッセージ内のURL他、下記を参照して node-sass や tailwindcss の削除・再インストールを試しましたが解消されない状態です。
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
https://mebee.info/2021/03/23/post-32231/
https://zenn.dev/rakutek/scraps/bd0e6171464e13

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

Node.js v18.12.1
→元々旧バージョンで動かなかったため、今回アップバージョンしました。
Yarn 1.22.4

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

https://tailwindcss.com/docs/guides/nuxtjs#2
こちらを参考に、下記流れで再度ゼロベースからプロジェクトを立ち上げました。
要因は各ツールのバージョン連携でミスマッチが起こっていた可能性があります。

  • create-nuxt-app 実行の際、UI framework: Noneを指定
  • tailwindcssを後からインストール

bash

1? UI framework: None

投稿2022/11/29 01:36

xinome

総合スコア20

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問