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个步骤后，问题即可得到解决。