Failed to Compile After Installing Vuetify with Vue CLI 3

I tried to create a new Vue app with Vuetify by using the command from Vuetify homepage.

Following is the command I used:

npm install @vue/cli -g
vue create my-app // all options are default settings when creating
cd my-app
vue add vuetify // all options are default settings when running

All commands above mentioned completed perfectly. However, after I launch the hot-reload developing environment by the following command.

npm run serve

An error would occur as the following standard output.

> my-app@0.1.0 serve /home/seanwu/my-app
> vue-cli-service serve

INFO  Starting development server...
94% after seal                                                                        

ERROR  Failed to compile with 1 errors                                                    3:05:24 PM

error  in ./src/main.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
BrowserslistError: [BABEL] /home/seanwu/my-app/src/main.js: /home/seanwu/my-app contains both .browserslistrc and package.json with browsers (While processing: "/home/seanwu/my-app/node_modules/@vue/babel-preset-app/index.js$0")
    at /home/seanwu/my-app/node_modules/browserslist/node.js:239:15
    at eachParent (/home/seanwu/my-app/node_modules/browserslist/node.js:46:18)
    at Object.findConfig (/home/seanwu/my-app/node_modules/browserslist/node.js:219:20)
    at Function.loadConfig (/home/seanwu/my-app/node_modules/browserslist/node.js:150:37)
    at browserslist (/home/seanwu/my-app/node_modules/browserslist/index.js:187:31)
    at getTargets (/home/seanwu/my-app/node_modules/@babel/preset-env/lib/targets-parser.js:133:50)
    at _default (/home/seanwu/my-app/node_modules/@babel/preset-env/lib/index.js:184:46)
    at /home/seanwu/my-app/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at loadDescriptor (/home/seanwu/my-app/node_modules/@babel/core/lib/config/full.js:163:14)
    at cachedFunction (/home/seanwu/my-app/node_modules/@babel/core/lib/config/caching.js:42:19)
    at loadPresetDescriptor (/home/seanwu/my-app/node_modules/@babel/core/lib/config/full.js:233:63)
    at config.presets.map.descriptor (/home/seanwu/my-app/node_modules/@babel/core/lib/config/full.js:68:19)
    at Array.map (<anonymous>)
    at recurseDescriptors (/home/seanwu/my-app/node_modules/@babel/core/lib/config/full.js:66:38)
    at recurseDescriptors (/home/seanwu/my-app/node_modules/@babel/core/lib/config/full.js:92:27)
    at loadFullConfig (/home/seanwu/my-app/node_modules/@babel/core/lib/config/full.js:106:6)

@ multi (webpack)-dev-server/client?http://192.168.1.76:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I have no idea why this would happen as being new to front-end development and following every instruction from the Quick Start web page. Maybe there are some stupid mistakes I made to cause this error.

Solution

What Node/npm version are you using? I'd assume the official tutorial works/worked at some point. I'd use nvm to install different Node.js versions. That also changes the npm version. Then try npm install and npm start again.

Or you could delete .browserslistrc in /home/seanwu/my-app, so you don't have two conflicting files.