İonic 4 Doesnt work

I was update ionic 4.5.0 so latest version I get this errors.

 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\Feaxer\Desktop\myApp\node_modules\browserslist\index.js:129:10)
[ng]     at C:\Users\Feaxer\Desktop\myApp\node_modules\browserslist\index.js:187:11
[ng]     at Array.reduce (<anonymous>)
[ng]     at resolve (C:\Users\Feaxer\Desktop\myApp\node_modules\browserslist\index.js:136:18)
[ng]     at browserslist (C:\Users\Feaxer\Desktop\myApp\node_modules\browserslist\index.js:252:16)
[ng]     at Browsers.parse (C:\Users\Feaxer\Desktop\myApp\node_modules\autoprefixer\lib\browsers.js:66:12)
[ng]     at new Browsers (C:\Users\Feaxer\Desktop\myApp\node_modules\autoprefixer\lib\browsers.js:48:26)
[ng]     at loadPrefixes (C:\Users\Feaxer\Desktop\myApp\node_modules\autoprefixer\lib\autoprefixer.js:85:20)
[ng]     at plugin (C:\Users\Feaxer\Desktop\myApp\node_modules\autoprefixer\lib\autoprefixer.js:96:20)
[ng]     at LazyResult.run (C:\Users\Feaxer\Desktop\myApp\node_modules\postcss\lib\lazy-result.js:295:14)
[ng]     at LazyResult.asyncTick (C:\Users\Feaxer\Desktop\myApp\node_modules\postcss\lib\lazy-result.js:208:26)
[ng]     at LazyResult.asyncTick (C:\Users\Feaxer\Desktop\myApp\node_modules\postcss\lib\lazy-result.js:221:14)
[ng]     at C:\Users\Feaxer\Desktop\myApp\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\Feaxer\Desktop\myApp\node_modules\browserslist\index.js:129:10)
[ng]     at C:\Users\Feaxer\Desktop\myApp\node_modules\browserslist\index.js:187:11
[ng]     at Array.reduce (<anonymous>)
[ng]     at resolve (C:\Users\Feaxer\Desktop\myApp\node_modules\browserslist\index.js:136:18)
[ng]     at browserslist (C:\Users\Feaxer\Desktop\myApp\node_modules\browserslist\index.js:252:16)
[ng]     at Browsers.parse (C:\Users\Feaxer\Desktop\myApp\node_modules\autoprefixer\lib\browsers.js:66:12)
[ng]     at new Browsers (C:\Users\Feaxer\Desktop\myApp\node_modules\autoprefixer\lib\browsers.js:48:26)
[ng]     at loadPrefixes (C:\Users\Feaxer\Desktop\myApp\node_modules\autoprefixer\lib\autoprefixer.js:85:20)
[ng]     at plugin (C:\Users\Feaxer\Desktop\myApp\node_modules\autoprefixer\lib\autoprefixer.js:96:20)
[ng]     at LazyResult.run (C:\Users\Feaxer\Desktop\myApp\node_modules\postcss\lib\lazy-result.js:295:14)
[ng]     at LazyResult.asyncTick (C:\Users\Feaxer\Desktop\myApp\node_modules\postcss\lib\lazy-result.js:208:26)
[ng]     at LazyResult.asyncTick (C:\Users\Feaxer\Desktop\myApp\node_modules\postcss\lib\lazy-result.js:221:14)
[ng]     at C:\Users\Feaxer\Desktop\myApp\node_modules\postcss\lib\lazy-result.js:213:17
[ng] ERROR in ./src/app/home/home.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\Feaxer\Desktop\myApp\node_modules\browserslist\index.js:129:10)
[ng]     at C:\Users\Feaxer\Desktop\myApp\node_modules\browserslist\index.js:187:11
[ng]     at Array.reduce (<anonymous>)
[ng]     at resolve (C:\Users\Feaxer\Desktop\myApp\node_modules\browserslist\index.js:136:18)
[ng]     at browserslist (C:\Users\Feaxer\Desktop\myApp\node_modules\browserslist\index.js:252:16)
[ng]     at Browsers.parse (C:\Users\Feaxer\Desktop\myApp\node_modules\autoprefixer\lib\browsers.js:66:12)
[ng]     at new Browsers (C:\Users\Feaxer\Desktop\myApp\node_modules\autoprefixer\lib\browsers.js:48:26)
[ng]     at loadPrefixes (C:\Users\Feaxer\Desktop\myApp\node_modules\autoprefixer\lib\autoprefixer.js:85:20)
[ng]     at plugin (C:\Users\Feaxer\Desktop\myApp\node_modules\autoprefixer\lib\autoprefixer.js:96:20)
[ng]     at LazyResult.run (C:\Users\Feaxer\Desktop\myApp\node_modules\postcss\lib\lazy-result.js:295:14)
[ng]     at LazyResult.asyncTick (C:\Users\Feaxer\Desktop\myApp\node_modules\postcss\lib\lazy-result.js:208:26)
[ng]     at LazyResult.asyncTick (C:\Users\Feaxer\Desktop\myApp\node_modules\postcss\lib\lazy-result.js:221:14)
[ng]     at C:\Users\Feaxer\Desktop\myApp\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] |

Package.json

{
  "name": "myApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "@ionic-native/core": "5.0.0-beta.21",
    "@ionic-native/splash-screen": "5.0.0-beta.21",
    "@ionic-native/status-bar": "5.0.0-beta.21",
    "@ionic/angular": "4.0.0-beta.17",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.10.0",
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular-devkit/core": "~7.0.0",
    "@angular-devkit/schematics": "~7.0.0",
    "@angular/cli": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@ionic/angular-toolkit": "~1.2.0",
    "@types/node": "~10.12.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project"
}

ALL İNFO

Ionic:

ionic (Ionic CLI) : 4.5.0 (C:\Windows\System32\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.17
@angular-devkit/build-angular : 0.10.7
@angular-devkit/schematics : 7.0.7
@angular/cli : 7.0.7
@ionic/angular-toolkit : 1.2.0

System:

NodeJS : v10.14.2 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10

Why am I getting this errors ? does someone have the idea ?

1 Like

Hi,

I am not experienced enough to give you an exact pointer on this error but I would encourage you to copy your src to a new blank project and start adding functionalities. Sometimes upgrading from scratch is easier if you are not sure about the error message. Just my two cents…

Altough it is still in beta, ionic 4 works quite well tough.

Cheers,

Doug

I have created a new project, but I still get the same errors

essayez de recharger node

ERROR in ./src/theme/variables.scss

Can you post the content of that file?

Looks like something internal to Angular’s build tools, not related to Ionic.

I solved.

I removed nodejs v10.14.2 then I install Nodejs v8.11.2

Now

Ionic:

ionic (Ionic CLI) : 4.5.0

System:

NodeJS : v8.11.2
npm : 5.6.0
OS : Windows 10

Actual.
Somebody fixed it? (I tryed with all nodejs versions)

Same issue, coming

My Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\Windows\System32\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.16
   @angular-devkit/build-angular : 0.10.6
   @angular-devkit/schematics    : 7.0.6
   @angular/cli                  : 7.0.6
   @ionic/angular-toolkit        : 1.2.0

System:

   NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10
 // Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/

/** Ionic CSS Variables **/
:root {
  /** primary **/
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;

  /** secondary **/
  --ion-color-secondary: #0cd1e8;
  --ion-color-secondary-rgb: 12, 209, 232;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #0bb8cc;
  --ion-color-secondary-tint: #24d6ea;

  /** tertiary **/
  --ion-color-tertiary: #7044ff;
  --ion-color-tertiary-rgb: 112, 68, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #633ce0;
  --ion-color-tertiary-tint: #7e57ff;

  /** success **/
  --ion-color-success: #10dc60;
  --ion-color-success-rgb: 16, 220, 96;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #0ec254;
  --ion-color-success-tint: #28e070;

  /** warning **/
  --ion-color-warning: #ffce00;
  --ion-color-warning-rgb: 255, 206, 0;
  --ion-color-warning-contrast: #ffffff;
  --ion-color-warning-contrast-rgb: 255, 255, 255;
  --ion-color-warning-shade: #e0b500;
  --ion-color-warning-tint: #ffd31a;

  /** danger **/
  --ion-color-danger: #f04141;
  --ion-color-danger-rgb: 245, 61, 61;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #d33939;
  --ion-color-danger-tint: #f25454;

  /** dark **/
  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 34, 34;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;

  /** medium **/
  --ion-color-medium: #989aa2;
  --ion-color-medium-rgb: 152, 154, 162;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #86888f;
  --ion-color-medium-tint: #a2a4ab;

  /** light **/
  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 244, 244;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;
}