ionic 4 error when running ionic serve on new app created

I have been using ionic 2 and 3 quite successfully from a long time now, shifting to ionic 4 and encountered the following errors:

When i have create a new project in ionic 4 and enter ionic serve i get the following error every time: (I have tried a lot but could not resolve the issue, kindly provide some support as quickly as possible)

[ng] ERROR in ./src/theme/variables.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref–14-3!./src/theme/variables.scss) [ng] Module build failed (from ./node_modules/postcss-loader/src/index.js): [ng] BrowserslistError: Unknown browser query basedir=$(dirname "$(echo "$0" | sed -e 's. Maybe you are using old Browserslist or made typo in query. [ng] at unknownQuery (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:137:10) [ng] at C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:217:11 [ng] at Array.reduce (<anonymous>) [ng] at resolve (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:158:18) [ng] at browserslist (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:278:16) [ng] at Browsers.parse (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\browsers.js:66:12) [ng] at new Browsers (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\browsers.js:48:26) [ng] at loadPrefixes (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\autoprefixer.js:85:20) [ng] at plugin (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\autoprefixer.js:96:20) [ng] at LazyResult.run (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:295:14) [ng] at LazyResult.asyncTick (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:208:26) [ng] at LazyResult.asyncTick (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:221:14) [ng] at C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:213:17 [ng] ERROR in ./src/app/tab1/tab1.page.scss [ng] Module build failed (from ./node_modules/postcss-loader/src/index.js): [ng] BrowserslistError: Unknown browser query basedir=$(dirname "$(echo "$0" | sed -e 's. Maybe you are using old Browserslist or made typo in query. [ng] at unknownQuery (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:137:10) [ng] at C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:217:11 [ng] at Array.reduce (<anonymous>) [ng] at resolve (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:158:18) [ng] at browserslist (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:278:16) [ng] at Browsers.parse (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\browsers.js:66:12) [ng] at new Browsers (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\browsers.js:48:26) [ng] at loadPrefixes (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\autoprefixer.js:85:20) [ng] at plugin (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\autoprefixer.js:96:20) [ng] at LazyResult.run (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:295:14) [ng] at LazyResult.asyncTick (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:208:26) [ng] at LazyResult.asyncTick (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:221:14) [ng] at C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:213:17 [ng] ERROR in ./src/global.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref–14-3!./src/global.scss) [ng] Module build failed (from ./node_modules/postcss-loader/src/index.js): [ng] BrowserslistError: Unknown browser query basedir=$(dirname "$(echo "$0" | sed -e 's. Maybe you are using old Browserslist or made typo in query. [ng] at unknownQuery (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:137:10) [ng] at C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:217:11 [ng] at Array.reduce (<anonymous>) [ng] at resolve (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:158:18) [ng] at browserslist (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:278:16) [ng] at Browsers.parse (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\browsers.js:66:12) [ng] at new Browsers (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\browsers.js:48:26) [ng] at loadPrefixes (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\autoprefixer.js:85:20) [ng] at plugin (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\autoprefixer.js:96:20) [ng] at LazyResult.run (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:295:14) [ng] at LazyResult.asyncTick (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:208:26) [ng] at LazyResult.asyncTick (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:221:14) [ng] at C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:213:17 [ng] ERROR in ./src/app/tabs/tabs.page.scss [ng] Module build failed (from ./node_modules/postcss-loader/src/index.js): [ng] BrowserslistError: Unknown browser query basedir=$(dirname "$(echo "$0" | sed -e 's. Maybe you are using old Browserslist or made typo in query. [ng] at unknownQuery (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:137:10) [ng] at C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:217:11 [ng] at Array.reduce (<anonymous>) [ng] at resolve (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:158:18) [ng] at browserslist (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:278:16) [ng] at Browsers.parse (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\browsers.js:66:12) [ng] at new Browsers (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\browsers.js:48:26) [ng] at loadPrefixes (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\autoprefixer.js:85:20) [ng] at plugin (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\autoprefixer.js:96:20) [ng] at LazyResult.run (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:295:14) [ng] at LazyResult.asyncTick (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:208:26) [ng] at LazyResult.asyncTick (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:221:14) [ng] at C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:213:17 [ng] at process._tickCallback (internal/process/next_tick.js:68:7) [ng] ERROR in ./src/app/tab2/tab2.page.scss [ng] Module build failed (from ./node_modules/postcss-loader/src/index.js): [ng] BrowserslistError: Unknown browser query basedir=$(dirname "$(echo "$0" | sed -e 's. Maybe you are using old Browserslist or made typo in query. [ng] at unknownQuery (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:137:10) [ng] at C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:217:11 [ng] at Array.reduce (<anonymous>) [ng] at resolve (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:158:18) [ng] at browserslist (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:278:16) [ng] at Browsers.parse (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\browsers.js:66:12) [ng] at new Browsers (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\browsers.js:48:26) [ng] at loadPrefixes (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\autoprefixer.js:85:20) [ng] at plugin (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\autoprefixer.js:96:20) [ng] at LazyResult.run (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:295:14) [ng] at LazyResult.asyncTick (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:208:26) [ng] at LazyResult.asyncTick (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:221:14) [ng] at C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:213:17 [ng] at process._tickCallback (internal/process/next_tick.js:68:7) [ng] ERROR in ./src/app/tab3/tab3.page.scss [ng] Module build failed (from ./node_modules/postcss-loader/src/index.js): [ng] BrowserslistError: Unknown browser query basedir=$(dirname "$(echo "$0" | sed -e 's. Maybe you are using old Browserslist or made typo in query. [ng] at unknownQuery (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:137:10) [ng] at C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:217:11 [ng] at Array.reduce (<anonymous>) [ng] at resolve (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:158:18) [ng] at browserslist (C:\Users\agarw\Projects\VideoApp\node_modules\browserslist\index.js:278:16) [ng] at Browsers.parse (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\browsers.js:66:12) [ng] at new Browsers (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\browsers.js:48:26) [ng] at loadPrefixes (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\autoprefixer.js:85:20) [ng] at plugin (C:\Users\agarw\Projects\VideoApp\node_modules\autoprefixer\lib\autoprefixer.js:96:20) [ng] at LazyResult.run (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:295:14) [ng] at LazyResult.asyncTick (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:208:26) [ng] at LazyResult.asyncTick (C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:221:14) [ng] at C:\Users\agarw\Projects\VideoApp\node_modules\postcss\lib\lazy-result.js:213:17 [ng] at process._tickCallback (internal/process/next_tick.js:68:7) [ng] ERROR in ./ansi-html 1:0 [ng] Module parse failed: Unexpected character ‘#’ (1:0) [ng] You may need an appropriate loader to handle this file type. [ng] > #!/bin/sh [ng] | basedir=$(dirname “$(echo “$0” | sed -e ‘s,\,/,g’)”) [ng] | [ng] chunk {common} common.js, common.js.map (common) 18.5 kB [rendered] [ng] chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered] [ng] chunk {main} main.js, main.js.map (main) 32.4 kB [initial] [rendered] [ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered] [ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 8.9 kB [entry] [rendered] [ng] chunk {styles} styles.js, styles.js.map (styles) 21.5 kB [initial] [rendered] [ng] chunk {tab1-tab1-module} tab1-tab1-module.js, tab1-tab1-module.js.map (tab1-tab1-module) 7.36 kB [rendered] [ng] chunk {tab2-tab2-module} tab2-tab2-module.js, tab2-tab2-module.js.map (tab2-tab2-module) 5.93 kB [rendered] [ng] chunk {tab3-tab3-module} tab3-tab3-module.js, tab3-tab3-module.js.map (tab3-tab3-module) 5.93 kB [rendered] [ng] chunk {tabs-tabs-module} tabs-tabs-module.js, tabs-tabs-module.js.map (tabs-tabs-module) 8.97 kB [rendered] [ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.35 MB [initial] [rendered] [ng] i ｢wdm｣: Failed to compile.

[Nykz]

Yes after removing cli executable files, it’s working. Thanks @liamdebeasi.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.