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

[wangxdmm]

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)

[ModyQyW]

el-notification is also related.

[aknot242]

el-button and el-dialog also appear to be experiencing this error.

[FabianMontoya]

It should be related with a break change into the TS versionof @vue/tsconfig, I was able to run my project without error with the following versions:

"dependencies": {
    "element-plus": "^2.3.4",
    "vue": "^3.2.47"
}
"devDependencies": {
    "@vitejs/plugin-vue": "^4.2.1",
    "@vue/tsconfig": "0.1.3",  /* <-- important fix */
    "typescript": "4.9.5",  /* <-- important fix */
    "vite": "^4.3.5",
    "vue-tsc": "^1.6.4"
}

[FabianMontoya]

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.

[ModyQyW]

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 #11818 (comment).

[aknot242]

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.

[toplinuxsir]

@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!

[xiefangqing]

依赖：

 "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "element-plus": "^2.3.4",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@types/node": "^18.16.3",
    "@vitejs/plugin-vue": "^4.1.0",
    "sass": "^1.62.1",
    "typescript": "^5.0.2",
    "vite": "^4.3.2",
    "vue-tsc": "^1.4.2"
  }

import { ElMessage } from 'element-plus';

报错：
error TS2614: Module '"element-plus"' has no exported member 'ElMessage'. Did you mean to use 'import ElMessage from "element-plus"' instead?

[aknot242]

@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"
  }
}

[toplinuxsir]

@aknot242 Thanks! It works!

[Sheepeer]

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

[ModyQyW]

@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？

[Sheepeer]

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

[ModyQyW]

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

@Sheepeer Have you reloaded vscode window or restarted vscode?

[Sheepeer]

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

@Sheepeer Have you reloaded vscode window or restarted vscode?

OHHH I forgot! So much Thx!!!

[Dreamacro]

Any progress?

Once "moduleResolution": "node" is used, import ElementPlus from 'unplugin-element-plus/vite' in vite.config.ts will report another import error.

[slimvan]

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

Node

[zhuying547]

#12602 Good Job

[adminChina]

good, Simply modify tsconfig.app.json