vue-cli-plugin-element-plus
vue-cli-plugin-element-plus copied to clipboard
Published
20 hours ago •
element-plus
element-plus
Install step fails
First installation, following https://element-plus.org/#/en-US/component/quickstart went like this:
vue add element-plus ✔ 16:13:36
📦 Installing vue-cli-plugin-element-plus...
added 1 package in 5s
✔ Successfully installed plugin: vue-cli-plugin-element-plus
? How do you want to import Element Plus? Fully import
? Do you want to overwrite the SCSS variables of Element Plus? No
? Choose the locale you want to load, the default locale is English (en) en
🚀 Invoking generator for vue-cli-plugin-element-plus...
📦 Installing additional dependencies...
added 7 packages in 9s
⚓ Running completion hooks...
ERROR TypeError: Cannot read property 'replace' of undefined
TypeError: Cannot read property 'replace' of undefined
at /Users/me/src/project/node_modules/vue-cli-plugin-element-plus/generator/index.js:45:45
at runGenerator (/Users/me/.nvm/versions/node/v15.6.0/lib/node_modules/@vue/cli/lib/invoke.js:132:13)
at processTicksAndRejections (node:internal/process/task_queues:94:5)
at async invoke (/Users/me/.nvm/versions/node/v15.6.0/lib/node_modules/@vue/cli/lib/invoke.js:92:3)
Tried twice to be sure ;-)
What Vue CLI option did you choose, please?
I've selected "Default (Vue 3 Preview) ([Vue 3] babel, eslint)" and works fine.
Or, maybe you could provide a github repo after you run vue add test-app
Thanks
@zazzaz The following is the procedure to reproduce. I suspect that Eslint is probably the cause. It worked fine when I installed element-plus without eslint.
$ vue create test-app
Vue CLI v4.5.10
┌───────────────────────────────────────────┐
│ │
│ New version available 4.5.10 → 4.5.11 │
│ Run npm i -g @vue/cli to update! │
│ │
└───────────────────────────────────────────┘
? Please pick a preset: Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Vue CLI v4.5.10
✨ Creating project in /home/user/temp/20210125/test-app.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
> [email protected] install /home/user/temp/20210125/test-app/node_modules/yorkie
> node bin/install.js
setting up Git hooks
done
> [email protected] postinstall /home/user/temp/20210125/test-app/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
> [email protected] postinstall /home/user/temp/20210125/test-app/node_modules/ejs
> node ./postinstall.js
added 1244 packages from 948 contributors and audited 1247 packages in 33.768s
64 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
🚀 Invoking generators...
📦 Installing additional dependencies...
added 75 packages from 83 contributors and audited 1322 packages in 11.945s
70 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project test-app.
👉 Get started with the following commands:
$ cd test-app
$ npm run serve
$ cd test-app/
$ vue add typescript
📦 Installing @vue/cli-plugin-typescript...
+ @vue/[email protected]
added 49 packages from 42 contributors and audited 1371 packages in 13.433s
71 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
✔ Successfully installed plugin: @vue/cli-plugin-typescript
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Convert all .js files to .ts? Yes
? Allow .js files to be compiled? Yes
? Skip type checking of all declaration files (recommended for apps)? Yes
🚀 Invoking generator for @vue/cli-plugin-typescript...
📦 Installing additional dependencies...
added 16 packages from 7 contributors and audited 1387 packages in 13.269s
76 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: @vue/cli-plugin-typescript
$ vue add router
WARN There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes
📦 Installing @vue/cli-plugin-router...
+ @vue/[email protected]
updated 1 package and audited 1388 packages in 10.517s
76 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
✔ Successfully installed plugin: @vue/cli-plugin-router
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
🚀 Invoking generator for @vue/cli-plugin-router...
📦 Installing additional dependencies...
added 1 package and audited 1388 packages in 10.14s
76 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: @vue/cli-plugin-router
$ vue add vuex
WARN There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes
📦 Installing @vue/cli-plugin-vuex...
+ @vue/[email protected]
updated 1 package and audited 1389 packages in 10.914s
76 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
✔ Successfully installed plugin: @vue/cli-plugin-vuex
🚀 Invoking generator for @vue/cli-plugin-vuex...
📦 Installing additional dependencies...
added 1 package from 1 contributor and audited 1389 packages in 10.568s
76 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: @vue/cli-plugin-vuex
$ vue add unit-jest
WARN There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes
📦 Installing @vue/cli-plugin-unit-jest...
> [email protected] install /home/user/temp/20210125/test-app/node_modules/deasync
> node ./build.js
`linux-x64-node-10` exists; testing
Binary is fine; exiting
> [email protected] postinstall /home/user/temp/20210125/test-app/node_modules/babel-runtime/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
+ @vue/[email protected]
added 278 packages from 340 contributors and audited 1668 packages in 27.832s
76 packages are looking for funding
run `npm fund` for details
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
✔ Successfully installed plugin: @vue/cli-plugin-unit-jest
🚀 Invoking generator for @vue/cli-plugin-unit-jest...
📦 Installing additional dependencies...
added 2 packages from 2 contributors, updated 1 package and audited 1670 packages in 19.905s
76 packages are looking for funding
run `npm fund` for details
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: @vue/cli-plugin-unit-jest
$ vue add eslint
WARN There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes
📦 Installing @vue/cli-plugin-eslint...
+ @vue/[email protected]
updated 1 package and audited 1670 packages in 19.303s
76 packages are looking for funding
run `npm fund` for details
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
✔ Successfully installed plugin: @vue/cli-plugin-eslint
? Pick an ESLint config: Prettier
? Pick additional lint features: Lint on save
🚀 Invoking generator for @vue/cli-plugin-eslint...
📦 Installing additional dependencies...
added 6 packages from 6 contributors and audited 1677 packages in 17.922s
76 packages are looking for funding
run `npm fund` for details
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: @vue/cli-plugin-eslint
$ vue add element-plus
WARN There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes
📦 Installing vue-cli-plugin-element-plus...
+ [email protected]
added 1 package and audited 1678 packages in 20.468s
76 packages are looking for funding
run `npm fund` for details
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
✔ Successfully installed plugin: vue-cli-plugin-element-plus
? How do you want to import Element Plus? Fully import
? Do you want to overwrite the SCSS variables of Element Plus? Yes
? Choose the locale you want to load, the default locale is English (en) ja
🚀 Invoking generator for vue-cli-plugin-element-plus...
📦 Installing additional dependencies...
added 15 packages from 11 contributors and audited 1693 packages in 20.647s
79 packages are looking for funding
run `npm fund` for details
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
⚓ Running completion hooks...
ERROR TypeError: Cannot read property 'replace' of undefined
TypeError: Cannot read property 'replace' of undefined
at api.afterInvoke (/home/user/temp/20210125/test-app/node_modules/vue-cli-plugin-element-plus/generator/index.js:45:45)
at runGenerator (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:132:13)
at process._tickCallback (internal/process/next_tick.js:68:7)
I have the same problem
(base) ubuntu@VM-0-17-ubuntu:~/blog/front-app$ vue add element-plus
📦 Installing vue-cli-plugin-element-plus...
+ [email protected]
added 1 package in 9.229s
81 packages are looking for funding
run `npm fund` for details
✔ Successfully installed plugin: vue-cli-plugin-element-plus
? How do you want to import Element Plus? Fully import
? Do you want to overwrite the SCSS variables of Element Plus? Yes
? Choose the locale you want to load, the default locale is English (en) zh-cn
🚀 Invoking generator for vue-cli-plugin-element-plus...
📦 Installing additional dependencies...
added 15 packages from 11 contributors in 9.633s
84 packages are looking for funding
run `npm fund` for details
⚓ Running completion hooks...
ERROR TypeError: Cannot read property 'replace' of undefined
TypeError: Cannot read property 'replace' of undefined
at /home/ubuntu/blog/front-app/node_modules/vue-cli-plugin-element-plus/generator/index.js:45:45
at runGenerator (/usr/local/lib/nodejs/node-v14.15.4-linux-x64/lib/node_modules/@vue/cli/lib/invoke.js:132:13)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async invoke (/usr/local/lib/nodejs/node-v14.15.4-linux-x64/lib/node_modules/@vue/cli/lib/invoke.js:92:3)
————————————————————————
(base) ubuntu@VM-0-17-ubuntu:~/blog/front-app$ npm fund
[email protected]
├─┬ https://opencollective.com/typescript-eslint
│ └── @typescript-eslint/[email protected], @typescript-eslint/[email protected], @typescript-eslint/[email protected], @typescript-eslint/[email protected]
├─┬ https://opencollective.com/core-js
│ └── [email protected], [email protected]
├─┬ https://opencollective.com/eslint
│ └── [email protected]
├─┬ https://github.com/sponsors/feross
│ └── [email protected], [email protected], [email protected], [email protected], [email protected]
├─┬ https://www.patreon.com/feross
│ └── [email protected], [email protected], [email protected], [email protected], [email protected]
├─┬ https://feross.org/support
│ └── [email protected], [email protected], [email protected], [email protected], [email protected]
├─┬ https://opencollective.com/webpack
│ └── [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
├─┬ https://github.com/sponsors/mysticatea
│ └── [email protected], [email protected], [email protected], [email protected]
├─┬ https://github.com/sponsors/isaacs
│ └── [email protected]
├─┬ https://opencollective.com/babel
│ └── @babel/[email protected]
├─┬ https://opencollective.com/browserslist
│ └── [email protected]
├─┬ https://github.com/sponsors/sindresorhus
│ └── [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
├─┬ https://github.com/sponsors/ljharb
│ └── [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
├─┬ https://github.com/sponsors/epoberezkin
│ └── [email protected]
├─┬ https://github.com/avajs/find-cache-dir?sponsor=1
│ └── [email protected]
├─┬ https://github.com/sponsors/jonschlinkert
│ └── [email protected]
├─┬ https://github.com/chalk/chalk?sponsor=1
│ └── [email protected]
├─┬ https://github.com/chalk/ansi-styles?sponsor=1
│ └── [email protected]
├─┬ https://tidelift.com/funding/github/npm/autoprefixer
│ └── [email protected]
├─┬ https://opencollective.com/postcss/
│ └── [email protected], [email protected]
├─┬ https://github.com/sponsors/wooorm
│ └── [email protected]
├─┬ https://github.com/sponsors/fb55
│ └── [email protected], [email protected]
├─┬ https://github.com/fb55/entities?sponsor=1
│ └── [email protected]
├─┬ https://github.com/chalk/wrap-ansi?sponsor=1
│ └── [email protected]
├─┬ https://tidelift.com/funding/github/npm/loglevel
│ └── [email protected]
├─┬ https://github.com/sponsors/RubenVerborgh
│ └── [email protected]
└─┬ https://opencollective.com/popperjs
└── @popperjs/[email protected]
@zazzaz This problem does exist, @vue/cli version is 4.5.11. I just investigate other issue of ep.
Step to repo:
- vue create element-plus-test
- vue add element-plus
? How do you want to import Element Plus? Fully import ? Do you want to overwrite the SCSS variables of Element Plus? No ? Choose the locale you want to load, the default locale is English (en) zh-cn - throw error
Error message:
ERROR TypeError: Cannot read property 'replace' of undefined
TypeError: Cannot read property 'replace' of undefined
at C:\Users\Ryan\Desktop\element-plus-test\node_modules\vue-cli-plugin-element-plus\generator\index.js:45:45
at runGenerator (D:\nodejs\npm_modules\node_modules\@vue\cli\lib\invoke.js:132:13)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async invoke (D:\nodejs\npm_modules\node_modules\@vue\cli\lib\invoke.js:92:3)
app main.(js|ts) Works fine:
...
createApp(App).use(store).mount('#app')
...
Does not work - generated by @vue/cli:
// with typescript and prettier
...
createApp(App).mount("#app");
...
// with Vuex/Router and prettier
...
createApp(App)
.use(store)
.use(router)
.mount('#app') // or .mount("#app");
...
There is a problem because of newlines and other types of quotes with project configuration with prettier.
Possible solution:
plugin generator/index.js
...
api.afterInvoke(() => {
const { EOL } = require('os')
const fs = require('fs')
const contentMain = fs.readFileSync(api.resolve(api.entryFile), { encoding: 'utf-8' })
if (!contentMain.includes('installElementPlus(app)')) {
const lines = contentMain.split(/\r?\n/g)
const semicolon = lines[lines.findIndex((line) => line.match(/mount/))].endsWith(';') ? ';' : ''
const renderIndex = lines.findIndex((line) => line.match(/createApp\(App\)/))
const renderInlineContext = lines[renderIndex]
lines[renderIndex] = renderInlineContext.replace('createApp\(App\)', 'app')
lines.splice(renderIndex, 0, `const app = createApp(App)` + semicolon, `installElementPlus(app)` + semicolon)
fs.writeFileSync(api.resolve(api.entryFile), lines.join(EOL), { encoding: 'utf-8' })
}
})
...
It is caused by wrong regular expression while code generation. Here's an example with vue-cli created project.
同样遇到此错误，发现当新建项目时，选择默认的vue3（babel，eslint），然后再添加element-plus可以成功。 当新建时选择自定义，只有选择ESlint with error prevention only时，构建完项目后才能添加element-plus。其他选项，例如ESlint+Prettier，都会在随后抛出错误。
Workaround is already mentioned in this thread by Danjuanlab. If using Vue CLI, possible workaround is to go through Manually select features when creating vue project and then either unselect Linter / formatter, otherwise keep it selected but in the next step of installation select ESlint with error prevention only. Seems that other installation options have no effect on this error and thus may be used at discretion.
