element-plus: [TypeScript] [message, message-box] when tsconfig.json set moduleResolution to nodenext or bundler, ElMessage can not be imported.

Bug Type: TypeScript

Environment

Vue Version: 3.2.47
Element Plus Version: 2.2.33
Browser / OS: 110.0.5481.100（正式版本） (x86_64)/mac os 12.6.3
Build Tool: Other

Reproduction

Related Component

el-message
el-message-box

Reproduction Link

Github Repo

Steps to reproduce

# 1.
pnpm install

# I set tsconfig.json (moduleResolution to nodenext)
# open index.ts we can see:

# Module '"element-plus"' has no exported member 'ElMessage'. Did you mean to use 'import ElMessage from "element-plus"' instead?ts


# 2. replace by new exports content
pnpm replace

# the error will remove

# 3.

pnpm restore

# the error will show again

What is Expected?

no error

What is actually happening?

has error

Additional comments

(empty)

About this issue

Original URL
State: closed
Created a year ago
Reactions: 6
Comments: 19 (5 by maintainers)

Commits related to this issue

fix(element-plus): ts import error when moduleResolution set to bundler (#11818) — committed to XkSuperCool/element-plus by deleted user a year ago
fix(element-plus): fix TypeScript error caused by moduleResolution closed #11818 — committed to zhuying547/element-plus by zhuying547 a year ago

Most upvoted comments

The problem is with typescript > 4.9.4 for that reason we can not update @vue/tsconfig to an upper version than 0.1.3 and obviously typescript neither.

@FabianMontoya You can.

This problem is caused by compilerOptions.moduleResolution: "bundler" and element-plus exports field in package.json.

If you want to use typescript@5 and @vue/tsconfig@0.3 you have to set compilerOptions.moduleResolution: "node" in tsconfig.json to override @vue/tsconfig@0.3 config.

If not work for you, please see https://github.com/element-plus/element-plus/issues/11818#issuecomment-1539757308.

+16

ModyQyW on May 17, 2023

@aknot242 @ModyQyW I have use typescript@5 and @vue/tsconfig @0.3 tsconfig.json

{
   "compilerOptions.moduleResolution": "node",

  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.vitest.json"
    }
  ]
}

npm run build error ,not working

src/App.vue:4:10 - error TS2614: Module '"element-plus"' has no exported member 'ElMenu'. Did you mean to use 'import ElMenu from "element-plus"'

How to resolve ? Thanks!

@toplinuxsir try putting the following in each of your tsconfig files (tsconfig.node.json, tsconfig.app.json, tsconfig.vitest.json)

{
  "compilerOptions": {
    "moduleResolution": "node"
  }
}

+10

aknot242 on May 9, 2023

@aknot242 Sry the way not work for me, or could U pls help to see is there any error with my configration?

Sheepeer on May 17, 2023

The problem is with typescript > 4.9.4 for that reason we can not update @vue/tsconfig to an upper version than 0.1.3 and obviously typescript neither.

@FabianMontoya You can.

This problem is caused by compilerOptions.moduleResolution: "bundler" and element-plus exports field in package.json.

If you want to use typescript@5 and @vue/tsconfig@0.3 you have to set compilerOptions.moduleResolution: "node" in tsconfig.json to override @vue/tsconfig@0.3 config.

Thank you for posting this, @ModyQyW . This solution worked for me on TypeScript 5.0.4.

aknot242 on May 6, 2023

Yes, I put it in all my three tsconfig files and there is no changement:

@Sheepeer Have you reloaded vscode window or restarted vscode?

ModyQyW on May 17, 2023

@aknot242 @ModyQyW I have use typescript@5 and @vue/tsconfig @0.3 tsconfig.json
{
   "compilerOptions.moduleResolution": "node",

  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.vitest.json"
    }
  ]
}
npm run build error ,not working
src/App.vue:4:10 - error TS2614: Module '"element-plus"' has no exported member 'ElMenu'. Did you mean to use 'import ElMenu from "element-plus"'
How to resolve ? Thanks!
@toplinuxsir try putting the following in each of your tsconfig files (tsconfig.node.json, tsconfig.app.json, tsconfig.vitest.json)
{
  "compilerOptions": {
    "moduleResolution": "node"
  }
}

@Sheepeer Is it not worked for you？

ModyQyW on May 17, 2023