Vue-cli: BrowserslistError: project contains both browserslist and package.json with browsers

[memoadian]

Hello I installed vue pwa with vue cli and all is fine, but when run dev, I get this error in terminal and in the browser show Error cannot GET, thanks for any help.

Version

2.9.3

Steps to reproduce

npm install -g vue-cli
vue init pwa project
cd project
npm install
npm run dev

What is expected?

run app on localhost

What is actually happening?

Error Cannot GET /
BrowserslistError: project contains both browserslist and package.json with browsers

[elevatebart]

What options did you choose?
I think it would really help if you put together a quick repo to illustrate your issue.
Reproduction is a key to fixing those bugs fast.

I just tried your steps choosing every default option when prompted and did not have the error.
I looked at the pwa template, I did not find a .browserlistrc file.

Hope to hear from you soon and we can help.

[memoadian]

thank you for your interest. I think that the best way to show the error is with a video.

Video

thanks again.

[memoadian]

Sorry this is the repo https://github.com/memoadian/pwa-vue

UPDATE: I ran vue pwa on ubuntu and works fine :/, I think the problem is windows.

[elevatebart]

OK kool, I'll kick on my Windows tomorow.
But it seem like your npm install did not happen with updated packages. (CF Video at 0:35)

See you tomorow.
Thank you for the repo.

[elevatebart]

It sounds connected to this issue with the package-lock.json not being peachy.

[elevatebart]

In the meantime try updating your version of npm see if it fixes it.

npm install --global npm

This looks like the same behaviour as what you see
https://github.com/typings/typings/issues/713

[memoadian]

Hi thanks for the info, I updated npm, and I cleared cache, and when I install npm all is fine, "warn registry" not show, but, browserslisterror still show.

I even tried npm i -f and nothing.

[elevatebart]

First, I tried running vue init pwa project on a windows machine.
... it works fine.
The big difference between my install and yours is the
It looks like the contents of your node_modules/.bin/ folder is entirely pushed to your root folder.
It might have to do with something installed on your computer, a config of npm or an antivirus.

[LinusBorg]

This should probably be an isssue in the pwa template's repository, anyway.

[aleksandrguru]

The same problem is one in one

[aleksandrguru]

C:\MyApp\Vuejsproject>npm run dev

[email protected] dev C:\MyApp\Vuejsproject
node build/dev-server.js

Starting dev server...
{ BrowserslistError: C:\MyApp\Vuejsproject contains both browserslist and package.json with browsers
at C:\MyApp\Vuejsproject\node_modulesbrowserslist\node.js:189:15
at eachParent (C:\MyApp\Vuejsproject\node_modulesbrowserslist\node.js:43:18)
at Object.findConfig (C:\MyApp\Vuejsproject\node_modulesbrowserslist\node.js:172:20)
at Object.loadConfig (C:\MyApp\Vuejsproject\node_modulesbrowserslist\node.js:126:37)
at browserslist (C:\MyApp\Vuejsproject\node_modulesbrowserslist\index.js:194:22)
at Browsers.parse (C:\MyApp\Vuejsproject\node_modulesautoprefixer\libbrowsers.js:61:16)
at new Browsers (C:\MyApp\Vuejsproject\node_modulesautoprefixer\libbrowsers.js:52:30)
at loadPrefixes (C:\MyApp\Vuejsproject\node_modulesautoprefixer\libautoprefixer.js:70:24)
at plugin (C:\MyApp\Vuejsproject\node_modulesautoprefixer\libautoprefixer.js:81:24)
at LazyResult.run (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:192:32)
at processing.Promise.then._this2.processed (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:231:20)
at new Promise ()
at LazyResult.async (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:228:27)
at LazyResult.then (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:134:21)
at loadPostcssConfig.then.config (C:\MyApp\Vuejsproject\node_modules\vue-loader\lib\style-compiler\index.js:62:10)
name: 'BrowserslistError',
message: 'C:\MyApp\Vuejs\project contains both browserslist and package.json with browsers',
browserslist: true }
{ BrowserslistError: C:\MyApp\Vuejsproject contains both browserslist and package.json with browsers
at C:\MyApp\Vuejsproject\node_modulesbrowserslist\node.js:189:15
at eachParent (C:\MyApp\Vuejsproject\node_modulesbrowserslist\node.js:43:18)
at Object.findConfig (C:\MyApp\Vuejsproject\node_modulesbrowserslist\node.js:172:20)
at Object.loadConfig (C:\MyApp\Vuejsproject\node_modulesbrowserslist\node.js:126:37)
at browserslist (C:\MyApp\Vuejsproject\node_modulesbrowserslist\index.js:194:22)
at Browsers.parse (C:\MyApp\Vuejsproject\node_modulesautoprefixer\libbrowsers.js:61:16)
at new Browsers (C:\MyApp\Vuejsproject\node_modulesautoprefixer\libbrowsers.js:52:30)
at loadPrefixes (C:\MyApp\Vuejsproject\node_modulesautoprefixer\libautoprefixer.js:70:24)
at plugin (C:\MyApp\Vuejsproject\node_modulesautoprefixer\libautoprefixer.js:81:24)
at LazyResult.run (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:192:32)
at processing.Promise.then._this2.processed (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:231:20)
at new Promise ()
at LazyResult.async (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:228:27)
at LazyResult.then (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:134:21)
at loadPostcssConfig.then.config (C:\MyApp\Vuejsproject\node_modules\vue-loader\lib\style-compiler\index.js:62:10)
name: 'BrowserslistError',
message: 'C:\MyApp\Vuejs\project contains both browserslist and package.json with browsers',
browserslist: true }

ERROR Failed to compile with 2 errors 13:47:26

error in ./src/App.vue

Module build failed: BrowserslistError: C:\MyApp\Vuejsproject contains both browserslist and package.json with browsers
at C:\MyApp\Vuejsproject\node_modulesbrowserslist\node.js:189:15
at eachParent (C:\MyApp\Vuejsproject\node_modulesbrowserslist\node.js:43:18)
at Object.findConfig (C:\MyApp\Vuejsproject\node_modulesbrowserslist\node.js:172:20)
at Object.loadConfig (C:\MyApp\Vuejsproject\node_modulesbrowserslist\node.js:126:37)
at browserslist (C:\MyApp\Vuejsproject\node_modulesbrowserslist\index.js:194:22)
at Browsers.parse (C:\MyApp\Vuejsproject\node_modulesautoprefixer\libbrowsers.js:61:16)
at new Browsers (C:\MyApp\Vuejsproject\node_modulesautoprefixer\libbrowsers.js:52:30)
at loadPrefixes (C:\MyApp\Vuejsproject\node_modulesautoprefixer\libautoprefixer.js:70:24)
at plugin (C:\MyApp\Vuejsproject\node_modulesautoprefixer\libautoprefixer.js:81:24)
at LazyResult.run (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:192:32)
at processing.Promise.then._this2.processed (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:231:20)
at new Promise ()
at LazyResult.async (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:228:27)
at LazyResult.then (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:134:21)
at loadPostcssConfig.then.config (C:\MyApp\Vuejsproject\node_modules\vue-loader\lib\style-compiler\index.js:62:10)

@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"minimize":false,"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-316 13:3-17:5 14:22-324
@ ./src/App.vue
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

error in ./src/components/Hello.vue

Module build failed: BrowserslistError: C:\MyApp\Vuejsproject contains both browserslist and package.json with browsers
at C:\MyApp\Vuejsproject\node_modulesbrowserslist\node.js:189:15
at eachParent (C:\MyApp\Vuejsproject\node_modulesbrowserslist\node.js:43:18)
at Object.findConfig (C:\MyApp\Vuejsproject\node_modulesbrowserslist\node.js:172:20)
at Object.loadConfig (C:\MyApp\Vuejsproject\node_modulesbrowserslist\node.js:126:37)
at browserslist (C:\MyApp\Vuejsproject\node_modulesbrowserslist\index.js:194:22)
at Browsers.parse (C:\MyApp\Vuejsproject\node_modulesautoprefixer\libbrowsers.js:61:16)
at new Browsers (C:\MyApp\Vuejsproject\node_modulesautoprefixer\libbrowsers.js:52:30)
at loadPrefixes (C:\MyApp\Vuejsproject\node_modulesautoprefixer\libautoprefixer.js:70:24)
at plugin (C:\MyApp\Vuejsproject\node_modulesautoprefixer\libautoprefixer.js:81:24)
at LazyResult.run (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:192:32)
at processing.Promise.then._this2.processed (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:231:20)
at new Promise ()
at LazyResult.async (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:228:27)
at LazyResult.then (C:\MyApp\Vuejsproject\node_modules\postcss\lib\lazy-result.js:134:21)
at loadPostcssConfig.then.config (C:\MyApp\Vuejsproject\node_modules\vue-loader\lib\style-compiler\index.js:62:10)

@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"minimize":false,"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-361a4bd2","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Hello.vue 4:14-327 13:3-17:5 14:22-335
@ ./src/components/Hello.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

Listening at http://localhost:8080

[analuisamartins]

Got the same error, deleting the file .browserslistrc worked for me.

[aleksandrguru]

Thanks a friend this works !!

[jhekz]

that's works, thanks

[King-Of-Plague1]

Also, I had the same problem and I find that I have no .browserslistrc file, so I renamed browserslist file in project folder to .browserslistrc and that worked.

[itm-platform]

I didn't have a .browserlistrc file to delete, so I got rid of this in package.json

  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]

It worked. Can't wait to see the side effect...

[SniraJavas]

I had a similar issue I was working with Angular 10.x.x PWA , @analuisamartins analuisamartins answer at the to helped me , I removed both files and it worked but my App is no longer a PWA.

[CPERDOM]

Hi guys. Got the same error, deleting the file .browserslistrc worked for me.

[AcuitySoftwareDev]

delete your browserlist file and presto

[ryanwellsdotcom]

You either have to use a .browserslistrc file or have the entry in your package.json. You can't have both. Vue puts it in the package.json by default.