npm install dev show error

[younasm]

Question（提问）

Hello,
I followed all your step first I clone from GitHub then install npm then run npm run dev but its show ##error in ./src/main.js

it says Cannot find module '@babel/core'.
I tried to install with this command ##npm install babel-loader@7
but still not working.

Screenshot or Gif（截图或动态图）

`$ npm run dev

vue-element-admin@4.4.0 dev C:\Users\Younas\IdeaProjects\Product-Borrow-Sell-Admin
vue-cli-service serve

INFO Starting development server...
98% after emitting CopyPlugin

ERROR Failed to compile with 1 error 10:48:19 AM
error in ./src/main.js

Syntax Error: Error: [BABEL] C:\Users\Younas\IdeaProjects\Product-Borrow-Sell-Admin\src\main.js: Cannot find module '@babel/core'
Require stack:

• C:\Users\Younas\IdeaProjects\Product-Borrow-Sell-Admin\node_modules@babel\plugin-proposal-async-generator-functions\lib\index.js
• C:\Users\Younas\IdeaProjects\Product-Borrow-Sell-Admin\node_modules@babel\preset-env\lib\available-plugins.js
• C:\Users\Younas\IdeaProjects\Product-Borrow-Sell-Admin\node_modules@babel\preset-env\lib\plugins-compat-data.js
• C:\Users\Younas\IdeaProjects\Product-Borrow-Sell-Admin\node_modules@babel\preset-env\lib\normalize-options.js
• C:\Users\Younas\IdeaProjects\Product-Borrow-Sell-Admin\node_modules@babel\preset-env\lib\index.js
• C:\Users\Younas\IdeaProjects\Product-Borrow-Sell-Admin\node_modules@vue\babel-preset-app\index.js
• C:\Users\Younas\IdeaProjects\Product-Borrow-Sell-Admin\node_modules@vue\cli-plugin-babel\preset.js
• C:\Users\Younas\IdeaProjects\Product-Borrow-Sell-Admin\node_modules@vue\cli-plugin-babel\node_modules@babel\core\lib\config\files\module-types.js
• C:\Users\Younas\IdeaProjects\Product-Borrow-Sell-Admin\node_modules@vue\cli-plugin-babel\node_modules@babel\core\lib\config\files\configuration.js
• C:\Users\Younas\IdeaProjects\Product-Borrow-Sell-Admin\node_modules@vue\cli-plugin-babel\node_modules@babel\core\lib\config\files\index.js
• C:\Users\Younas\IdeaProjects\Product-Borrow-Sell-Admin\node_modules@vue\cli-plugin-babel\node_modules@babel\core\lib\index.js
• C:\Users\Younas\IdeaProjects\Product-Borrow-Sell-Admin\node_modules@vue\cli-plugin-babel\index.js
• C:\Users\Younas\IdeaProjects\Product-Borrow-Sell-Admin\node_modules@vue\cli-service\lib\Service.js
• C:\Users\Younas\IdeaProjects\Product-Borrow-Sell-Admin\node_modules@vue\cli-service\bin\vue-cli-service.js (While processing: "C:\Users\Younas\IdeaProjects\Product-Borrow-Sell-Admin\node_modules\@VUE\cli-plugin-babel\preset.js")

@ multi (webpack)-dev-server/client?http://10.25.16.63:9527&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js`

Other relevant information（格外信息）

• Your OS: Windows 10 Pro
• Node.js version: v14.15.4
• vue-element-admin version: @vue/cli 5.0.0-alpha.3

[mrs01dev]

I suggest to create new vue application (vue create) from scratch , after that run npm run serve, if the new application works fine do the following,

• In the new vue application. delete all folders - but not node_modules Folder-

• From vue-element-admin app copy to the new vue application ,the following folders

(
build
mock

plop-templates
public
src
tests
)

• install missing dependencies to the new vue application , i.e.

npm i "axios" "clipboard" "codemirror" "core-js" "driver.js" "dropzone" "echarts" "element-ui" "file-saver" "fuse.js" "js-cookie" "jsonlint" "jszip" "normalize.css" "nprogress" "path-to-regexp" "pinyin" "screenfull" "script-loader" "sortablejs"

npm i "vue-count-to" "vue-loaders" "vue-particles" "vue-splitpane" "vuedraggable" "xlsx"

• install missing devDependencies to the new vue application , i.e.

  npm i -D autoprefixer@^9
  npm i -D "babel-core" "babel-eslint" "babel-jest" "chalk" "connect" "html-webpack-plugin" "mockjs" "runjs" "sass-loader" "script-ext-html-webpack-plugin" "script-loader" "serve-static" "svg-sprite-loader" "svgo" "vue-template-compiler"

• update scripts section in package.json for the new vue application ,by coping scripts section from package.json in vue-element-admin.

• After that copy remaining files -but not package.json- from vue-element-admin to the new vue application , i.e.

.editorconfig
.env.development
.env.production
.env.staging
.eslintignore
.eslintrc.js
.gitignore
.travis.yml
babel.config.js
jest.config.js
jsconfig.json
LICENSE

plopfile.js
postcss.config.js
README.es.md
README.ja.md
README.md
README.zh-CN.md
vue.config.js

Now the new vue application should work fine as "vue-element-admin"

[younasm]

Thank you for the help I did without it. there was some dependency problem need some @bublecore dependency and npm update now works. Thanks for the great work. Keep it up. Get Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ From: mrs01dev <notifications@github.com> Sent: Thursday, February 25, 2021 5:01:54 AM To: PanJiaChen/vue-element-admin <vue-element-admin@noreply.github.com> Cc: Muhammad Younas <younaslook@outlook.com>; Author <author@noreply.github.com> Subject: Re: [PanJiaChen/vue-element-admin] npm install dev show error (#3613) I suggest to create new vue application (vue create) from scratch , after that run npm run serve, if the new application works fine delete src and dist folders from the new application. From vue-element-admin app copy to the new vue application ,the following folders ( build mock node_modules plop-templates public src tests ) install missing dependencies to the new vue application , i.e. npm i "axios" "clipboard" "codemirror" "core-js" "driver.js" "dropzone" "echarts" "element-ui" "file-saver" "fuse.js" "js-cookie" "jsonlint" "jszip" "normalize.css" "nprogress" "path-to-regexp" "pinyin" "screenfull" "script-loader" "sortablejs" install missing devDependencies to the new vue application , i.e. npm i -D "autoprefixer" "babel-core" "babel-eslint" "babel-jest" "chalk" "connect" "html-webpack-plugin" "mockjs" "runjs" "sass-loader" "script-ext-html-webpack-plugin" "script-loader" "serve-static" "svg-sprite-loader" "svgo" "vue-template-compiler" update scripts section in package.json for the new vue application ,by coping scripts section from package.json in vue-element-admin. After that copy remaining files -but not package.json- from vue-element-admin to the new vue application , i.e. .editorconfig .env.development .env.production .env.staging .eslintignore .eslintrc.js .gitignore .travis.yml babel.config.js jest.config.js jsconfig.json LICENSE plopfile.js postcss.config.js README.es.md README.ja.md README.md README.zh-CN.md vue.config.js the new vue application should work now. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#3613 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ALBFWY446AKJUTTEWGP2URLTAVSMFANCNFSM4YDVEXEA>.

[aleksey002]

I suggest to create new vue application (vue create) from scratch , after that run npm run serve, if the new application works fine do the following,

• In the new vue application. delete all folders - but not node_modules Folder-
• From vue-element-admin app copy to the new vue application ,the following folders

(
build
mock

plop-templates
public
src
tests
)

• install missing dependencies to the new vue application , i.e.

npm i "axios" "clipboard" "codemirror" "core-js" "driver.js" "dropzone" "echarts" "element-ui" "file-saver" "fuse.js" "js-cookie" "jsonlint" "jszip" "normalize.css" "nprogress" "path-to-regexp" "pinyin" "screenfull" "script-loader" "sortablejs"

npm i "vue-count-to" "vue-loaders" "vue-particles" "vue-splitpane" "vuedraggable" "xlsx"

• install missing devDependencies to the new vue application , i.e.
  npm i -D autoprefixer@^9
  npm i -D "babel-core" "babel-eslint" "babel-jest" "chalk" "connect" "html-webpack-plugin" "mockjs" "runjs" "sass-loader" "script-ext-html-webpack-plugin" "script-loader" "serve-static" "svg-sprite-loader" "svgo" "vue-template-compiler"
• update scripts section in package.json for the new vue application ,by coping scripts section from package.json in vue-element-admin.
• After that copy remaining files -but not package.json- from vue-element-admin to the new vue application , i.e.

.editorconfig
.env.development
.env.production
.env.staging
.eslintignore
.eslintrc.js
.gitignore
.travis.yml
babel.config.js
jest.config.js
jsconfig.json
LICENSE

plopfile.js
postcss.config.js
README.es.md
README.ja.md
README.md
README.zh-CN.md
vue.config.js

Now the new vue application should work fine as "vue-element-admin"

AFTER ALL STEPS ABOVE
--------------------------> npm run dev ->

ERROR Failed to compile with 1 error 01:49:57

error in ./src/styles/element-variables.scss

Syntax Error: TypeError: this.getOptions is not a function

@ ./src/styles/element-variables.scss 4:14-237 15:3-20:5 16:22-245
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.20.173:9527&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'