İonic 4 Doesnt work

feaxer · December 15, 2018, 11:02pm

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

Screenshot_1

 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 ?

doug1e · December 16, 2018, 11:18am

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

feaxer · December 16, 2018, 1:25pm

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

Ludolefrenchy · December 16, 2018, 5:32pm

essayez de recharger node

mhartington · December 16, 2018, 6:20pm

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.

feaxer · December 24, 2018, 1:03pm

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

nickgalko · April 10, 2019, 5:02pm

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

manzooralam · July 1, 2019, 6:44am

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

manzooralam · July 1, 2019, 7:13am

 // 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;
}

ridbay · July 12, 2020, 8:32am

Did you get any solution to this?
I am getting same errors.

Topic		Replies	Views
ERROR in ./src/global.scss Ionic Native	0	1470	July 30, 2019
Error: Failed to find '@ionic/angular/css/display.css' Ionic Framework	1	4848	February 19, 2020
Ionic 4 - ionic serve not compiling sass Ionic Framework	5	5358	May 23, 2019
I get an error in the ionic serve(ng build) ionic-v3	0	1008	January 29, 2020
5.2.1 Compile error Ionic Framework	4	1362	July 20, 2019

İonic 4 Doesnt work

Related topics