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

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

新規登録して質問してみよう
ただいま回答率
86.12%
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エンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

解決済

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

xinome
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エンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

1回答

0グッド

0クリップ

113閲覧

投稿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

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

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

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

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

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

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

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

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

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

回答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

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

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

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

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エンジンを使用しているサーバーサイドのイベント駆動型プログラムです。