ConfirmationService: require is not defined

[ValentinCrochemore]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already  https://github.com/primefaces/primevue/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=110

Current behavior
Whenever my code contains confirm.require() the app breaks with ReferenceError: require is not defined. When I inspect this error in browser I can indeed see const { defineComponent } = require('vue'); added in the component where I included confirm.require(). This defineComponent seems to not be used and if I comment confirm.require(), the error and the require goes away.

Expected behavior
It should not add const { defineComponent } = require('vue'); when using confirm.require()

Minimal reproduction of the problem with instructions
https://codesandbox.io/s/bug-primevue-nuxt-3-bnq9d?file=/pages/test.vue
The page index.vue is there to illustrate that the app works fine. Note that the codesandbox repro is not ideal and has sometimes bugs not related to this one. If you want to reproduce locally please follow this link and copy/paste plugins/primevue.ts & test.vue from codesandbox.

What is the motivation / use case for changing the behavior?
The use case is displaying a confirm dialog when clicking a button. The behavior that should be change is adding const { defineComponent } = require('vue'); when calling confirm.require(). I looked in the source code and could not find where it would happen

Please tell us about your environment:

• Linux version: 20.04

• Vue version: 3.2.22

• Nuxt version: 3.0.0-27296172.f5307f9

• Vite version: 2.6.14

• PrimeVue version: 3.10.0

• Browser: all

[adlpz]

This issue still occurs in 3.11.0. Tried both in a local project and by forking the linked codesandbox and bumping primevue to 3.11.0. Same exact error.

However if you simply refer to this function by another name, the error disappears:

// If this code is present, Nuxt 3 fails to even compile:
confirm.require({message: 'U sure?'})

// However, this works flawlessly:
const doTheDialog = confirm.require
doTheDialog({message: 'U sure?'})

Looks like it is some obscure issue with the require(...) word itself, probably colliding with the built-in Node function when doing SSR, or the other way around. I'm afraid this whole transpiler vodoo is well above my paygrade.

Hope this helps.

[ValentinCrochemore]

Haha it works ! I would never have guessed. Thanks a lot !

[jmverges]

Thanks @adlpz took me all the morning. Shouldn't be this issue reopened?

[kmuip]

@adlpz Thanks, that did the job :)

I used the following in my code:

const { require: confirmRequire } = useConfirm()

[andreas83]

Nuxt: 3.11.2
Node: 18.18.0
Primevue: 3.52.0

vie console.log i can see the function require is defined, but calling it results in nothing. no error or warning.

i can just guess this is still somehow related with the reserved require keyword.

update

const {require: confirmRequire} = useConfirm();

console.log(confirmRequire); 

// returns a function ƒ require2(options) {
//        ConfirmationEventBus.emit("confirm", options);
//    }

// but following will give a undefined:

console.log(confirmRequire({
    message: 'Wollen Sie diese Anmerkung wirklich löschen?',
    header: 'Anmerkung löschen',
    icon: 'pi pi-info-circle',
    acceptClass: 'p-button-danger',
    accept: () => {
        deleteComment(e);
    },
    reject: () => {
    }
})));

update 2

okay found the reason, i simply was not aware that the confirm.require method relays on the ConfirmDialog component.

at least 2 hours wasted. thanks anyways.