Tailwind Primevue not working with Nuxt Security module

[DaniZGit]

Describe the bug

Adding nuxt-security module to an existing nuxt-unstyled-tailwind example stops the website from loading and throws a 500 error:

The module does work with the nuxt-styled-tailwind example tho...

Reproducer

https://stackblitz.com/~/github.com/DaniZGit/primevue-test

PrimeVue version

4.1.1

Vue version

3.x

Language

ES6

Build / Runtime

Nuxt

Browser(s)

Chrome

Steps to reproduce the behavior

1. Copy official example here
2. Run pnpm install
3. Run pnpm i nuxt-security
4. Add "nuxt-security" to the modules array in the nuxt.config.ts file
5. Run pnpm run dev

Expected behavior

Nuxt security module should load as expected.

[KarlBoosterBaer]

I've got the same issue. Spent two days figuring out the problem. Found the Problem by

1. npx nuxi@latest init
2. Setup Primevue Taliwind by following the docs
3. npx nuxi@latest module add security Everything worked fine until i installed nuxt-security. Then npm run dev throws ERROR [nuxt] [request error] [unhandled] [500] element.replace is not a function.

[lawren]

Appears to be related to the nonce and sri options in Nuxt Security as setting these to false avoids the issue. I believe the issue is with Nuxt Security and have opened a PR to address.

[vejja]

@tugcekucukoglu Nuxt-Security team here

As discovered by @lawren in https://github.com/Baroshem/nuxt-security/issues/564, the problem arises because you (or other 3rd-parties) are mutating the Typescript definitions of the nitro renderer:

export interface NuxtRenderHTMLContext {
  island?: boolean
  htmlAttrs: string[]
  head: string[]
  bodyAttrs: string[]
  bodyPrepend: string[]
  body: string[]
  bodyAppend: string[]
}

As defined in Nuxt core here : https://github.com/nuxt/nuxt/blob/f68589c2cac4af6378fa3d33ea6716f07a387e86/packages/nuxt/src/core/runtime/nitro/renderer.ts#L47

We are scanning this object for security purposes, and we are relying on the string[] type definitions to be respected.

However, we will be releasing a hotfix to help your users. Please note that we cannot accomodate for all deviations made by third-parties to the Nuxt interfaces.