nuxt: installModule doesn't work with nuxt 2 modules

I remove “@nuxtjs/tailwindcss” , and follow Tailwind official website guide to resolved this issue:

https://tailwindcss.com/docs/guides/nuxtjs

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.   │
   │                                                                                 │
   ╰─────────────────────────────────────────────────────────────────────────────────╯

for yarn you can override the package as shown:

// package.json
...
  "resolutions": {
    "@nuxt/kit": "3.0.0-rc.13"
  }
...

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/tailwindcss@5.3.5
  └── @nuxt/kit@3.0.0-rc.13 overridden

I’ll just remind everyone to delete @nuxtjs/tailwindcss mentions 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

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.

I’ll just remind everyone to delete @nuxtjs/tailwindcss mentions from nuxt.config.js after Tailwind package installation.

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.<anonymous> (/Users/nielsvanleenen/Documents/Opdrachten/Hidde/hidde-tuinte/node_modules/loader-runner/lib/LoaderRunner.js:205:4) at Storage.finished (/Users/nielsvanleenen/Documents/Opdrachten/Hidde/hidde-tuinte/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16) at /Users/nielsvanleenen/Documents/Opdrachten/Hidde/hidde-tuinte/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9 at /Users/nielsvanleenen/Documents/Opdrachten/Hidde/hidde-tuinte/node_modules/graceful-fs/graceful-fs.js:123:16 at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) { opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ], library: ‘digital envelope routines’, reason: ‘unsupported’, code: ‘ERR_OSSL_EVP_UNSUPPORTED’ }

Node.js v19.2.0 error Command failed with exit code 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 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.

Same error ! And none of the solutions written above fixed the problem.

@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.

I had same issue. I solved this by updating tailwindcss version

https://tailwindcss.com/docs/guides/nuxtjs