Duplicate declaration "h"......

問題描述

vue項目編譯運行時：(@vue/cli>=4.5,using vue3.0)

npm run serve

爆出各種問題（缺少各種組件，安裝完后爆出：Duplicate declaration "h"......）：

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-plugin-transform-vue-jsx' from 'D:\Ps\moldingstar\trunk\pmesweb_car_local'
    at Function.module.exports [as sync] (D:\Ps\moldingstar\trunk\pmesweb_car_local\node_modules\resolve\lib\sync.js:58:15)
    at resolveStandardizedName (D:\Ps\moldingstar\trunk\pmesweb_car_local\node_modules\@babel\core\lib\config\files\plugins.js:101:31)
    at resolvePlugin (D:\Ps\moldingstar\trunk\pmesweb_car_local\node_modules\@babel\core\lib\config\files\plugins.js:54:10)
    at loadPlugin (D:\Ps\moldingstar\trunk\pmesweb_car_local\node_modules\@babel\core\lib\config\files\plugins.js:62:20)
    at createDescriptor (D:\Ps\moldingstar\trunk\pmesweb_car_local\node_modules\@babel\core\lib\config\config-descriptors.js:154:9)
    at D:\Ps\moldingstar\trunk\pmesweb_car_local\node_modules\@babel\core\lib\config\config-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (D:\Ps\moldingstar\trunk\pmesweb_car_local\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
    at createPluginDescriptors (D:\Ps\moldingstar\trunk\pmesweb_car_local\node_modules\@babel\core\lib\config\config-descriptors.js:105:10)
    at plugins (D:\Ps\moldingstar\trunk\pmesweb_car_local\node_modules\@babel\core\lib\config\config-descriptors.js:40:19)
    at mergeChainOpts (D:\Ps\moldingstar\trunk\pmesweb_car_local\node_modules\@babel\core\lib\config\config-chain.js:319:26)
    at D:\Ps\moldingstar\trunk\pmesweb_car_local\node_modules\@babel\core\lib\config\config-chain.js:283:7
    at buildRootChain (D:\Ps\moldingstar\trunk\pmesweb_car_local\node_modules\@babel\core\lib\config\config-chain.js:120:22)
    at loadPrivatePartialConfig (D:\Ps\moldingstar\trunk\pmesweb_car_local\node_modules\@babel\core\lib\config\partial.js:85:55)
    at Object.loadPartialConfig (D:\Ps\moldingstar\trunk\pmesweb_car_local\node_modules\@babel\core\lib\config\partial.js:110:18)
    at Object.<anonymous> (D:\Ps\moldingstar\trunk\pmesweb_car_local\node_modules\babel-loader\lib\index.js:140:26)

然后就一頓搜索，用如下命令安裝各種組件：

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev
npm install @babel/plugin-syntax-import-meta @babel/plugin-proposal-function-sent @babel/plugin-proposal-export-namespace-from @babel/plugin-proposal-numeric-separator @babel/plugin-proposal-throw-expressions --save-dev

npm install @babel/core @babel/preset-env

安裝完成后，出現同樣錯誤提示，分析問題應該出在@babel版本上。打開項目目錄，忽然發現目錄中出現一個.babelrc新文件（我升級過babel），然后想刪了這個babel升級記錄文件試試，索性連項目文件全部清除，在svn上重新獲取項目代碼，然后運行命令：

npm install

然后運行：npm run serve，發現成功了！

總結

如果發現有問題，請檢查關鍵三個組件：

1.如果發現npm版本問題，請重新安裝node.js，因為npm是依賴於node.js的，重新安裝node.js時記得刪除npm及npm-cache文件夾。在windows下用以下命令查看npm的所在路徑：

where npm

卸載后，刪除npm所在文件夾，再重新安裝。

2.安裝特定版本的@vue/cli，例如，我需要4.5.8，則命令如下（全局安裝）：

npm install -g @vue/cli@4.5.8

安裝完成后，用命令：vue -V查看是否正常。如果想卸載舊版本的vue/cli，需要where vue查看，並執行命令卸載：

npm uninstall vue-cli -g;

並刪除舊版vue所在文件夾，然后重新安裝。直到執行命令vue -V出現錯誤提示。

3.還原項目的原有代碼，重新執行命令npm install.

一般執行上面3個步驟后，問題即可得到解決。