Search code examples
javascriptiosionic-frameworkcapacitor

Attempted import error: 'reorder' is not exported from 'ionicons/icons' when running ionic serve

I am experiencing error every time I run the command ionic serve. I have tried removing node_modules and reinstalling all packages using yarn, but this problem still exists.

Here is the error

Failed to compile

./node_modules/@ionic/react/dist/index.esm.js
Attempted import error: 'reorder' is not exported from 'ionicons/icons'.

This error occurred during the build time and cannot be dismissed.

And here is my package.json

{
  "name": "XXXXXXXXXX",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@capacitor/android": "^1.3.0",
    "@capacitor/core": "1.3.0",
    "@capacitor/ios": "^1.3.0",
    "@ionic-native/core": "^5.19.0",
    "@ionic-native/http": "^5.19.0",
    "@ionic-native/image-picker": "^5.19.1",
    "@ionic-native/in-app-browser": "^5.19.0",
    "@ionic-native/in-app-purchase": "^5.23.0",
    "@ionic-native/in-app-purchase-2": "^5.21.6",
    "@ionic-native/screen-orientation": "^5.20.0",
    "@ionic-native/sqlite": "^5.20.0",
    "@ionic/react": "^4.11.10",
    "@ionic/react-router": "^4.11.7",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.7.12",
    "@types/react": "^16.9.5",
    "@types/react-dom": "^16.9.1",
    "@types/react-router": "^5.1.1",
    "@types/react-router-dom": "^5.1.0",
    "cc.fovea.cordova.purchase": "^8.1.1",
    "chart.js": "^2.9.3",
    "cordova-plugin-advanced-http": "^2.3.1",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-inappbrowser": "^3.1.0",
    "cordova-plugin-inapppurchase": "^1.2.0",
    "cordova-plugin-screen-orientation": "^3.0.2",
    "cordova-plugin-telerik-imagepicker": "^2.3.3",
    "cordova-sqlite-storage": "^4.0.0",
    "es6-promise-plugin": "^4.2.2",
    "ionic-native": "^2.9.0",
    "ionicons": "^5.0.1",
    "react": "^16.10.2",
    "react-chartjs-2": "^2.8.0",
    "react-click-n-hold": "^1.0.7",
    "react-dom": "^16.10.2",
    "react-router": "^5.1.0",
    "react-router-dom": "^5.1.0",
    "react-shimmer": "^2.0.1",
    "typescript": "3.6.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "description": "An Ionic project",
  "devDependencies": {
    "@capacitor/cli": "1.3.0",
    "react-scripts": "^3.4.0"
  }
}

Due to this error, I have not been able to run my ionic application on the browser. This impacts the work time needed to debug and test the code as I need to build to native code all of the time.

Solution

  • Resolved it by removing ionicons package. Try running

    npm uninstall ionicons

    or

    yarn remove ionicons