Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Tailwind Primevue not working with Nuxt Security module #6771

Open
DaniZGit opened this issue Nov 12, 2024 · 3 comments
Open

Tailwind Primevue not working with Nuxt Security module #6771

DaniZGit opened this issue Nov 12, 2024 · 3 comments
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team

Comments

@DaniZGit
Copy link

Describe the bug

Adding nuxt-security module to an existing nuxt-unstyled-tailwind example stops the website from loading and throws a 500 error:
{0A87D582-D6AD-4AC3-BB33-AFF580BAF0E9}

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.

@DaniZGit DaniZGit added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Nov 12, 2024
@tugcekucukoglu tugcekucukoglu added Status: Pending Review Issue or pull request is being reviewed by Core Team and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Nov 15, 2024
@KarlBoosterBaer
Copy link

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
Copy link

lawren commented Nov 21, 2024

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

@vejja
Copy link

vejja commented Nov 22, 2024

@tugcekucukoglu Nuxt-Security team here

As discovered by @lawren in nuxt-modules/security#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.

Update: Fixed as of Nuxt-Security v2.1.4. PrimeVue users should upgrade.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Projects
None yet
Development

No branches or pull requests

5 participants