Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Console error message "xx.confirm is not a function" and not show dialog. #5763

Closed
1 task
iwengx opened this issue Jun 30, 2022 · 21 comments
Closed
1 task

Comments

@iwengx
Copy link

iwengx commented Jun 30, 2022

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.2.5

Environment

Vite^2.9.9、Vue^3.2.36、pnpm

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  1. Create a Vue project using the above environment.
  2. Using Confirmation modal dialog Example
  3. pnpm run build and click button.

What is expected?

Show a confirmation modal dialog.

What is actually happening?

Console error message "xx.confirm is not a function" and not show dialog.


In the build environment.

@github-actions
Copy link

github-actions bot commented Jul 1, 2022

Hello @wengx-unx. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch, fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @wengx-unx,我们完全同意你的提议/反馈,欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支,务必填写 Pull Request 内的预设模板,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

@cshuting
Copy link

cshuting commented Jul 6, 2022

Has this problem been fixed?

@iwengx
Copy link
Author

iwengx commented Jul 6, 2022

Has this problem been fixed?

Not yet

@techbirds
Copy link
Contributor

techbirds commented Jul 6, 2022

After verification, under the premise of the same environment, the pop-up window after construction can work normally. You can take a look at this example:

https://github.com/techbirds/my-vue-app

pnpm i
pnpm run serve

So please check whether your environment is normal and whether the writing method is correct.

@gitgundam
Copy link

Has this problem been fixed?

Not yet

same problem, after builded the project with vite.

@eisir
Copy link

eisir commented Jul 7, 2022

you can try to use
import Modal from "ant-design-vue/lib/modal"
instead of
import { Modal } from "ant-design-vue"

@lxchapu
Copy link

lxchapu commented Jul 7, 2022

you can try to use import Modal from "ant-design-vue/lib/modal" instead of import { Modal } from "ant-design-vue"

it worked

@zch233
Copy link

zch233 commented Aug 22, 2022

the same

@peerlessXu
Copy link

i have the same problem

@wjkang
Copy link

wjkang commented Oct 10, 2022

the same

@asiyuan
Copy link

asiyuan commented Oct 24, 2022

have any result

@asiyuan
Copy link

asiyuan commented Oct 24, 2022

you can try to use import Modal from "ant-design-vue/lib/modal" instead of import { Modal } from "ant-design-vue"

so use this, can't open in development

@cn-wang
Copy link
Contributor

cn-wang commented Dec 3, 2022

you can try to use

// modal.ts
import { Modal } from 'ant-design-vue'
export const {  info, success, error, warning, confirm } = Modal
<!-- demo.vue -->
<template>
  <button @click="handleClick">click me</button>
</template>

<script  lang="ts">
import {confirm} from './modal'
export default {
  setup() {

    return {
      handleClick() {
       confirm({
          title: "title", 
          onOk() {
            console.log("hi...")
          }
        })
      }
    }
  }
}
</script>

I think this question should be in vite...

@dodaydream
Copy link

you can try to use

// modal.ts
import { Modal } from 'ant-design-vue'
export const {  info, success, error, warning, confirm } = Modal
<!-- demo.vue -->
<template>
  <button @click="handleClick">click me</button>
</template>

<script  lang="ts">
import {confirm} from './modal'
export default {
  setup() {

    return {
      handleClick() {
       confirm({
          title: "title", 
          onOk() {
            console.log("hi...")
          }
        })
      }
    }
  }
}
</script>

I think this question should be in vite...

Tried the above solution, still does not work. Can confirm this question occurred in vite. However, importing from ant-design-vue/lib/modal works.

@github-actions
Copy link

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

@hakityc
Copy link

hakityc commented Mar 29, 2023

same problem

@thaotrong2000
Copy link

- My solution is:
I use confirm modal in package "ant-design-vue".
I dont import all component, i import several component.

// important
import { Modal } from "ant-design-vue";
Vue.prototype.$confirm = Modal.confirm;

@thaotrong2000
Copy link

same problem
My solution:
#5763 (comment)

@hakityc
Copy link

hakityc commented Mar 31, 2023

Thanks! I have successed in his way (eisir )

@hakityc
Copy link

hakityc commented Mar 31, 2023

Thanks! I have successed in his way (eisir )

#5763 (comment)

Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 31, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests