Install step fails

[ikari-pl]

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 ;-)

[zazzaz]

what's your Vue cli selection choice, please ?

[Yosuke-Nishizawa]

Me too. @vue/cli 4.5.10

[zazzaz]

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

[Yosuke-Nishizawa]

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

> yorkie@2.0.0 install /home/user/temp/20210125/test-app/node_modules/yorkie
> node bin/install.js

setting up Git hooks
done

> core-js@3.8.3 postinstall /home/user/temp/20210125/test-app/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

> ejs@2.7.4 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/cli-plugin-typescript@4.5.11
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/cli-plugin-router@4.5.11
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/cli-plugin-vuex@4.5.11
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...

> deasync@0.1.21 install /home/user/temp/20210125/test-app/node_modules/deasync
> node ./build.js

`linux-x64-node-10` exists; testing
Binary is fine; exiting

> core-js@2.6.12 postinstall /home/user/temp/20210125/test-app/node_modules/babel-runtime/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

+ @vue/cli-plugin-unit-jest@4.5.11
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/cli-plugin-eslint@4.5.11
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...

+ vue-cli-plugin-element-plus@0.0.13
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)

[zazzaz]

Still can't get it reproduced. Can you provide a github repo?

[nasa1024]

I have the same problem

(base) ubuntu@VM-0-17-ubuntu:~/blog/front-app$ vue add element-plus

📦  Installing vue-cli-plugin-element-plus...

+ vue-cli-plugin-element-plus@0.0.13
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
front-app@0.1.0
├─┬ https://opencollective.com/typescript-eslint
│ └── @typescript-eslint/eslint-plugin@2.34.0, @typescript-eslint/parser@2.34.0, @typescript-eslint/experimental-utils@2.34.0, @typescript-eslint/typescript-estree@2.34.0
├─┬ https://opencollective.com/core-js
│ └── core-js@3.8.3, core-js-compat@3.8.3
├─┬ https://opencollective.com/eslint
│ └── eslint@6.8.0
├─┬ https://github.com/sponsors/feross
│ └── eslint-plugin-standard@4.1.0, base64-js@1.5.1, ieee754@1.2.1, safe-buffer@5.2.1, arch@2.2.0
├─┬ https://www.patreon.com/feross
│ └── eslint-plugin-standard@4.1.0, base64-js@1.5.1, ieee754@1.2.1, safe-buffer@5.2.1, arch@2.2.0
├─┬ https://feross.org/support
│ └── eslint-plugin-standard@4.1.0, base64-js@1.5.1, ieee754@1.2.1, safe-buffer@5.2.1, arch@2.2.0
├─┬ https://opencollective.com/webpack
│ └── sass-loader@10.1.1, webpack@4.46.0, schema-utils@2.7.1, schema-utils@2.7.0, terser-webpack-plugin@2.3.8, copy-webpack-plugin@5.1.2, css-loader@3.6.0, schema-utils@3.0.0
├─┬ https://github.com/sponsors/mysticatea
│ └── regexpp@3.1.0, eslint-utils@2.1.0, vue-eslint-parser@7.4.1, eslint-plugin-es@3.0.1
├─┬ https://github.com/sponsors/isaacs
│ └── glob@7.1.6
├─┬ https://opencollective.com/babel
│ └── @babel/core@7.12.10
├─┬ https://opencollective.com/browserslist
│ └── browserslist@4.16.1
├─┬ https://github.com/sponsors/sindresorhus
│ └── camelcase@6.2.0, cli-spinners@2.5.0, parse-json@5.2.0, make-dir@3.1.0, p-limit@2.3.0, ansi-escapes@4.3.1, figures@3.2.0, type-fest@0.11.0, onetime@5.1.2, import-fresh@3.3.0, is-docker@2.1.1, get-stream@5.2.0, globals@12.4.0, strip-json-comments@3.1.1
├─┬ https://github.com/sponsors/ljharb
│ └── object.assign@4.1.2, call-bind@1.0.2, has-symbols@1.0.1, get-intrinsic@1.1.0, resolve@1.19.0, is-core-module@2.2.0, object.values@1.1.2, util.promisify@1.0.1, es-abstract@1.18.0-next.2, es-to-primitive@1.2.1, is-callable@1.2.2, is-negative-zero@2.0.1, is-regex@1.1.1, object-inspect@1.9.0, string.prototype.trimend@1.0.3, string.prototype.trimstart@1.0.3, is-date-object@1.0.2, is-symbol@1.0.3, object.getownpropertydescriptors@2.1.1, es-abstract@1.17.7, deep-equal@1.1.1, is-arguments@1.1.0, object-is@1.1.4, regexp.prototype.flags@1.3.1, array-includes@3.1.2, array.prototype.flat@1.2.4, is-string@1.0.5
├─┬ https://github.com/sponsors/epoberezkin
│ └── ajv@6.12.6
├─┬ https://github.com/avajs/find-cache-dir?sponsor=1
│ └── find-cache-dir@3.3.1
├─┬ https://github.com/sponsors/jonschlinkert
│ └── picomatch@2.2.2
├─┬ https://github.com/chalk/chalk?sponsor=1
│ └── chalk@4.1.0
├─┬ https://github.com/chalk/ansi-styles?sponsor=1
│ └── ansi-styles@4.3.0
├─┬ https://tidelift.com/funding/github/npm/autoprefixer
│ └── autoprefixer@9.8.6
├─┬ https://opencollective.com/postcss/
│ └── postcss@7.0.35, postcss-load-config@2.1.2
├─┬ https://github.com/sponsors/wooorm
│ └── vendors@1.0.4
├─┬ https://github.com/sponsors/fb55
│ └── css-what@3.4.2, domelementtype@2.1.0
├─┬ https://github.com/fb55/entities?sponsor=1
│ └── entities@2.2.0
├─┬ https://github.com/chalk/wrap-ansi?sponsor=1
│ └── wrap-ansi@7.0.0
├─┬ https://tidelift.com/funding/github/npm/loglevel
│ └── loglevel@1.7.1
├─┬ https://github.com/sponsors/RubenVerborgh
│ └── follow-redirects@1.13.2
└─┬ https://opencollective.com/popperjs
  └── @popperjs/core@2.6.0

[zazzaz]

@541573560 a repo demo, please?

[Ryan2128]

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

[zazzaz]

all right, I'll take a look at v4.5.11

[michaelvsinko]

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' })
    }
  })
...

[lyj0309]

我也是同样问题

[BeyLL]

同问

[denni-hill]

It is caused by wrong regular expression while code generation. Here's an example with vue-cli created project.

[Danjuanlab]

同样遇到此错误，发现当新建项目时，选择默认的vue3（babel，eslint），然后再添加element-plus可以成功。 当新建时选择自定义，只有选择ESlint with error prevention only时，构建完项目后才能添加element-plus。其他选项，例如ESlint+Prettier，都会在随后抛出错误。

[aloiseau17]

+1

[kid1412621]

any optional workaround now?

[acfuns]

I have the same problem,.Who can help me?

[kunogi]

been decades...still not fixed.... err with vue3+ts

[patrpok]

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.

[Givenchy-Coisini]

我也有同样的问题