Describe the bug
When I created a js project using vue-cli, I wanted to auto import elementplus and icons , but the project couldn't run after the import。
the package.json like this:
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"core-js": "^3.8.3",
"element-plus": "^2.4.3",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"unplugin-auto-import": "^0.17.2",
"unplugin-icons": "^0.18.1",
"unplugin-vue-components": "^0.26.0"
},
vue.config.js:
const { defineConfig } = require('@vue/cli-service')
const Components = require('unplugin-vue-components/webpack')
const {ElementPlusResolver} = require('unplugin-vue-components/resolvers')
const Icons = require('unplugin-icons/webpack')
const IconsResolver = require('unplugin-icons/resolver')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
configureWebpack: {
plugins: [
// AutoImport({
// resolvers: [
// ElementPlusResolver(),
// IconsResolver({
// prefix: 'Icon',
// }),
// ],
// }),
Components({
resolvers: [
IconsResolver({enabledCollections: ["ep"]}),
ElementPlusResolver(),
],
}),
Icons({autoInstall: true}),
],
}
})
and this is the error:
% npm run serve
> myfirst@0.1.0 serve
> vue-cli-service serve
ERROR TypeError: IconsResolver is not a function
TypeError: IconsResolver is not a function
at Object.<anonymous> (/Users/shareit/Library/CloudStorage/OneDrive-个人/Work/web/myfirst/vue.config.js:23:21)
at Module._compile (node:internal/modules/cjs/loader:1256:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
at Module.load (node:internal/modules/cjs/loader:1119:32)
at Module._load (node:internal/modules/cjs/loader:960:12)
at Module.require (node:internal/modules/cjs/loader:1143:19)
at require (node:internal/modules/cjs/helpers:119:18)
at exports.loadModule (/Users/shareit/Library/CloudStorage/OneDrive-个人/Work/web/myfirst/node_modules/@vue/cli-shared-utils/lib/module.js:86:14)
at loadFileConfig (/Users/shareit/Library/CloudStorage/OneDrive-个人/Work/web/myfirst/node_modules/@vue/cli-service/lib/util/loadFileConfig.js:30:20)
at Service.loadUserOptions (/Users/shareit/Library/CloudStorage/OneDrive-个人/Work/web/myfirst/node_modules/@vue/cli-service/lib/Service.js:339:44)
Reproduction
3
System Info
System:
OS: macOS 14.1.1
CPU: (8) arm64 Apple M1
Memory: 116.70 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.18.0 - /usr/local/bin/node
npm: 9.8.1 - /usr/local/bin/npm
Browsers:
Chrome: 119.0.6045.199
Safari: 17.1Used Package Manager
npm
Validations
Describe the bug
When I created a js project using vue-cli, I wanted to auto import elementplus and icons , but the project couldn't run after the import。
the package.json like this:
vue.config.js:
and this is the error:
Reproduction
3
System Info
System: OS: macOS 14.1.1 CPU: (8) arm64 Apple M1 Memory: 116.70 MB / 8.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.18.0 - /usr/local/bin/node npm: 9.8.1 - /usr/local/bin/npm Browsers: Chrome: 119.0.6045.199 Safari: 17.1Used Package Manager
npm
Validations