前提
個人プロジェクトで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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。