nuxt
nuxt copied to clipboard
nuxt
installModule doesn't work with nuxt 2 modules
Environment
Operating System: Windows Node Version: v14.17.1 Nuxt Version: 2.15.8 Nitro Version: - Package Manager: [email protected] Builder: nxut2(webpack ) User Config: - Runtime Modules: - Build Modules: -
Reproduction
The latest version of @nuxt/kit has a problem with @nuxtjs/tailwindcss problem version : 3.0.0-rc.14
and seems like versions below 3.0.0-rc.14 work properly
Describe the bug
npm run dev doesn't work properly
Additional context
No response
Logs
npm run dev doesn't work properly as following below
i Using default Tailwind CSS file from runtime/tailwind.css nuxt:tailwindcss 17:04:00
FATAL Cannot destructure property 'nuxt' of 'this' as it is undefined. 17:04:00
at postcss8Module (node_modules\@nuxt\postcss8\dist\index.js:15:10)
at installModule (/C:/Users/jun/Desktop/projects/nuxtjs2/node_modules/@nuxtjs/tailwindcss/node_modules/@nuxt/kit/dist/index.mjs:416:9)
at async setup (/C:/Users/jun/Desktop/projects/nuxtjs2/node_modules/@nuxtjs/tailwindcss/dist/module.mjs:196:7)
at async ModuleContainer.normalizedModule (/C:/Users/jun/Desktop/projects/nuxtjs2/node_modules/@nuxtjs/tailwindcss/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)
I've had the same since yesterday. A fresh install fails on yarn dev
Node: v16.13.0, MacOS Monterey 12.6
Setup:
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxt-what
? Project name: nuxt-what
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Tailwind CSS
? Template engine: HTML
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: None
? Version control system: Git
yarn run v1.22.17
Result:
$ nuxt
ℹ Using default Tailwind CSS file from runtime/tailwind.css nuxt:tailwindcss 10:25:00
FATAL Cannot destructure property 'nuxt' of 'this' as it is undefined. 10:25:00
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. │
│ │
╰─────────────────────────────────────────────────────────────────────────────────╯
I remove "@nuxtjs/tailwindcss" , and follow Tailwind official website guide to resolved this issue:
https://tailwindcss.com/docs/guides/nuxtjs
I remove "@nuxtjs/tailwindcss" , and follow Tailwind official website guide to resolved this issue:
https://tailwindcss.com/docs/guides/nuxtjs
It is working only that way atm
temporarily solved by using overrides property.
npm version >= 8.3
// package.json
...
"overrides": {
"@nuxtjs/tailwindcss": {
"@nuxt/kit": "3.0.0-rc.13"
}
},
...
> npm list @nuxt/kit
└─┬ @nuxtjs/[email protected]
└── @nuxt/[email protected] overridden
Environment
Operating System: Windows Node Version: v18.12.1 Nuxt Version: 2.15.8 Nitro Version: - Package Manager: [email protected], [email protected] Builder: nxut2(webpack ) User Config: - Runtime Modules: - Build Modules: -
Still facing the same issue even with overriding as suggested by @chamyeongdo
[email protected] C:\Users\sam\source\repos\dashboard
├─┬ @nuxtjs/[email protected]
│ └── @nuxt/[email protected] overridden
└─┬ [email protected]
└── @nuxt/[email protected] deduped
yarn run v1.22.19
$ cross-env NUXT_ENV_API_URL=https://dashboard.azurewebsites.net nuxt
i Using Tailwind CSS from ~/assets/css/tailwind.css nuxt:tailwindcss 10:20:19
FATAL Cannot destructure property 'nuxt' of 'this' as it is undefined. 10:20:19
at postcss8Module (node_modules\@nuxt\postcss8\dist\index.js:15:10)
at installModule (/C:/Users/sam/source/repos/dashboard/node_modules/@nuxt/kit/dist/index.mjs:416:9)
at async setup (/C:/Users/sam/source/repos/dashboard/node_modules/@nuxtjs/tailwindcss/dist/module.mjs:186:7)
at async ModuleContainer.normalizedModule (/C:/Users/sam/source/repos/dashboard/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.
I had same issue. I solved this by updating tailwindcss version
https://tailwindcss.com/docs/guides/nuxtjs
I remove "@nuxtjs/tailwindcss" , and follow Tailwind official website guide to resolved this issue:
https://tailwindcss.com/docs/guides/nuxtjs
Does not work for me, still have a similar error.
for yarn you can override the package as shown:
// package.json
...
"resolutions": {
"@nuxt/kit": "3.0.0-rc.13"
}
...
@anime-shed here are my versions:
Operating System: Ubuntu Node Version: v16.15.1 Nuxt Version: v2.15.8 Package Manager: yarn 1.22.19
I do have npm with version 8.9.0 installed but i do not use it.
Removing package-lock.json file and redoing npm run dev works for me.
like
I revert my yarn.lock file and it worked, not sure what happened
I have the same problem, 5 days ago.
MacOS: Monterey 12.6 Node Version: v14.15.4 Nuxt Version: v2.15.8
In my case, delete nuxt.config.js file, redoing npm run dev, and works!
But, i get the following message: WARN You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
I had the same problem using Vercel
warning [email protected]: The engine "vscode" appears to be invalid.
--
22:16:32.135 | [3/4] Linking dependencies...
22:16:32.137 | warning "@nuxtjs/tailwindcss > @nuxt/postcss8 > [email protected]" has unmet peer dependency "webpack@^4.27.0 \|\| ^5.0.0".
22:16:32.138 | warning "@nuxtjs/tailwindcss > @nuxt/postcss8 > [email protected]" has unmet peer dependency "webpack@^4.0.0 \|\| ^5.0.0".
22:16:32.139 | warning "@unocss/nuxt > @unocss/[email protected]" has unmet peer dependency "vite@^2.9.0 \|\| ^3.0.0-0".
22:16:32.140 | warning "@unocss/nuxt > @unocss/[email protected]" has unmet peer dependency "webpack@^4 \|\| ^5".
22:16:32.140 | warning "nuxt-windicss > [email protected]" has unmet peer dependency "vite@^2.0.1 \|\| ^3.0.0".
22:16:37.005 | [4/4] Building fresh packages...
22:16:37.249 | success Saved lockfile.
22:16:37.253 | $ nuxt prepare
22:16:37.355 | [log] Nuxi 3.0.0
22:16:38.499 | [info] [nuxt:tailwindcss] Using default Tailwind CSS file from runtime/tailwind.css
22:16:38.574 | [error] Cannot destructure property 'nuxt' of 'this' as it is undefined.
22:16:38.574 | at webVitalsModule (node_modules/@nuxtjs/web-vitals/dist/index.js:47:11)
22:16:38.574 | at installModule (node_modules/@nuxt/kit/dist/index.mjs:416:9)
22:16:38.575 | at async initNuxt (node_modules/nuxt/dist/index.mjs:1825:7)
22:16:38.575 | at async loadNuxt (node_modules/nuxt/dist/index.mjs:1857:5)
22:16:38.575 | at async loadNuxt (node_modules/@nuxt/kit/dist/index.mjs:493:19)
22:16:38.575 | at async Object.invoke (node_modules/nuxi/dist/chunks/prepare.mjs:30:18)
22:16:38.575 | at async _main (node_modules/nuxi/dist/cli.mjs:50:20)
22:16:38.593 | error Command failed with exit code 1.
22:16:38.594 | info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
22:16:38.637 | Error: Command "yarn install" exited with 1
for yarn you can override the package as shown:
// package.json ... "resolutions": { "@nuxt/kit": "3.0.0-rc.13" } ...
If you are using monorepo, add this into your root's package.json and that will solve it.
This is a well known issue with yarn 1.x https://github.com/yarnpkg/yarn/issues/5039
I tried all options that have been suggested here, now i get another error :
`node:internal/crypto/hash:71 this[kHandle] = new _Hash(algorithm, xofLen); ^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:140:10)
at module.exports (/Users/nielsvanleenen/Documents/Opdrachten/Hidde/hidde-tuinte/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/nielsvanleenen/Documents/Opdrachten/Hidde/hidde-tuinte/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/Users/nielsvanleenen/Documents/Opdrachten/Hidde/hidde-tuinte/node_modules/webpack/lib/NormalModule.js:471:10)
at /Users/nielsvanleenen/Documents/Opdrachten/Hidde/hidde-tuinte/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/nielsvanleenen/Documents/Opdrachten/Hidde/hidde-tuinte/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/nielsvanleenen/Documents/Opdrachten/Hidde/hidde-tuinte/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/nielsvanleenen/Documents/Opdrachten/Hidde/hidde-tuinte/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at Array.
Node.js v19.2.0 error Command failed with exit code 1.`
@njiels this is because you are using Node 17+, there is a issue with openssl and webpack. Either try using it with ’NODE_OPTIONS=--openssl-legacy-provider’ or use a Node Version less than 17.
For me, I removed tailwindcss from the project then it work.
1/ npm uninstall @nuxtjs/tailwindcss 2/ find nuxt.config.js then remove import value: @nuxtjs/tailwindcss 3/ run again, it works for me.
Hey folks,
My site is on Vercel. I just turn of analytics and the site come back. (Something related to web vitals)
I'll just remind everyone to delete @nuxtjs/tailwindcss mentions from nuxt.config.js after Tailwind package installation.
I'll just remind everyone to delete
@nuxtjs/tailwindcssmentions from nuxt.config.js after Tailwind package installation.
This worked for me. I did simply what you said: I removed @nuxtjs/tailwindcss from the nuxt.config.js file. Thanks
I started out with this:
For me, I removed tailwindcss from the project then it work.
1/ npm uninstall @nuxtjs/tailwindcss 2/ find nuxt.config.js then remove import value: @nuxtjs/tailwindcss 3/ run again, it works for me.
Then to solve this:
node:internal/crypto/hash:71
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\Users\sam\source\repos\dashboard\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\sam\source\repos\dashboard\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Users\sam\source\repos\dashboard\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\sam\source\repos\dashboard\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Users\sam\source\repos\dashboard\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Users\sam\source\repos\dashboard\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\sam\source\repos\dashboard\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at Array.<anonymous> (C:\Users\sam\source\repos\dashboard\node_modules\loader-runner\lib\LoaderRunner.js:205:4) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Node.js v18.12.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I tried this
Either try using it with ’NODE_OPTIONS=--openssl-legacy-provider’ or .......
But now I am getting the following error:
ERROR Failed to compile with 1 errors friendly-errors 12:39:36
This dependency was not found: friendly-errors 12:39:36
friendly-errors 12:39:36
* nuxt_plugin_signalR_63479a74 in ./.nuxt/index.js friendly-errors 12:39:36
friendly-errors 12:39:36
To install it, you can run: npm install --save nuxt_plugin_signalR_63479a74 friendly-errors 12:39:36
i Waiting for file changes 12:39:36
i Memory usage: 674 MB (RSS: 938 MB) 12:39:36
i Listening on: http://localhost:10023/ 12:39:36
12:39:36
TS2339: Property 'isAxiosError' does not exist on type 'AxiosStatic'.
140 | } catch (e: any) {
141 | console.error(e)
> 142 | if (axios.isAxiosError(e)) {
| ^^^^^^^^^^^^
143 | this.error = getAxiosError(e)
144 | if (this.error == 'Session expired. Please Login again!') {
145 | window.open(`${this.baseUrl}?logout=true`, '_self')
WARN Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'