"export 'ICON_PATHS' was not found in 'ionicons/icons'

Ionic Framework
1

Hello. Please help! I’m a beginner. I’ve been trying to fix this, but I can’t figure it out… I’m trying to create my first Ionic Vue project, but I’m running into some trouble with Ionic.

It’s probably something really silly, but here it goes…

Creating a Vue project was smooth, with no errors.
Adding Ionic to that Vue project returns the following warning:

warning in ./node_modules/@ionic/vue/dist/ionic-vue.esm.js
export ‘ICON_PATHS’ was not found in ‘ionicons/icons’

This is what’s in the >main.js file:

import ‘@ionic/core/css/core.css’;

import ‘@ionic/core/css/ionic.bundle.css’;

import Vue from ‘vue’

import IonicVue from ‘@ionic/vue’;

import App from ‘./App.vue’

Vue.config.productionTip = false;

Vue.use(IonicVue);

new Vue({

render: h => h(App),

}).$mount(‘#app’)

Only when I add the code for Ionic in the main.js file does the error occur. Also note, the Vue ‘Welcome to Your Vue.js App’ template App goes blank.

Any help with this is greatly appreciated. Gratitude

ionic info:

[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

Ionic CLI : 5.2.0

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v10.16.0
npm : 6.9.0
OS : macOS Mojave

package.json:

{
“name”: “vue-ionic-tester”,
“version”: “0.1.0”,
“private”: true,
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”
},
“dependencies”: {
“@ionic/core”: “^4.6.0”,
“@ionic/vue”: “0.0.4”,
“core-js”: “^2.6.5”,
“vue”: “^2.6.10”,
“vue-router”: “^3.0.3”
},
“devDependencies”: {
“@vue/cli-plugin-babel”: “^3.8.0”,
“@vue/cli-plugin-eslint”: “^3.8.0”,
“@vue/cli-service”: “^3.8.0”,
“babel-eslint”: “^10.0.1”,
“eslint”: “^5.16.0”,
“eslint-plugin-vue”: “^5.0.0”,
“vue-template-compiler”: “^2.6.10”
},
“eslintConfig”: {
“root”: true,
“env”: {
“node”: true
},
“extends”: [
“plugin:vue/essential”,
“eslint:recommended”
],
“rules”: {},
“parserOptions”: {
“parser”: “babel-eslint”
}
},
“postcss”: {
“plugins”: {
“autoprefixer”: {}
}
},
“browserslist”: [
“> 1%”,
“last 2 versions”
]
}

2

Do you have a yarn.lock file in your project.
If so:
delete the folder: node_modules
delete the file: package-lock.json (created by running npm install)
run in terminal: yarn install

When you have a yarn.lock file you no longer want to ever call npm install, but instead yarn install. Gives weird results.

If you don’t have a yarn.lock file, consider deleting node_modules and running yarn install instead of npm install to see if the error goes away.

I just got the same error message you did because I ran npm install instead of yarn install.

Does that help?

3

Yes, it helped! No errors this time. Looks like I’ll be using yarn. :slight_smile:

Thank you so much.

4

Awesome!

When using yarn for package management you can delete package_lock.json. that is npm equivalent to yarn.lock.

Also, use “yarn add package” instead of “npm install package”. And yarn remove instead of npm uninstall.

I find that yarn just works better and faster overall. And is less noisy in the terminal window.

5

I’m getting the same error, with the template not loading. However I’m not using yarn/don’t have the yarn.lock file.

Edit: Tried using yarn instead of npm. I never had the package_lock.json file though.

chunk-ea2b3dce.js?d602:13 Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys ()
at addIcons (chunk-ea2b3dce.js?d602:13)
at appInitialize (ionic-vue.esm.js?481b:279)
at Object.install (ionic-vue.esm.js?481b:619)
at Function.Vue.use (vue.runtime.esm.js?2b0e:5101)
at eval (main.js?56d7:7)
at Module…/src/main.js (app.js:10261)
at webpack_require (app.js:767)
at fn (app.js:130)
at Object.1 (app.js:10323)

Any thoughts?

1 Like
6

I am having the same issue. Using yarn did not help.

7

You’re right. I just tried to create a new project and the error appeared.

As soon as I add this: yarn add @ionic/vue
And update the main.js file.
The error appears.

I don’t know what to do.

8

This worked for me:

npm install ionicons@4.5.9-1 --save-dev
10 Likes
9

I get an error with your solution, but thanks for sharing.

Here’s the error:

error  in ./node_modules/ionicons/icons/index.mjs

Module build failed: Error: ENOENT: no such file or directory
10

npm install ionicons@4.5.9-1 --save-dev

Solve error missing icons and blank webpage problem. Thanks

1 Like
11

Thank you!!! Sorry for the delay… I used:

yarn add ionicons@4.5.9-1 --save-dev

Works great!

12

If this does not work, you can always try npm install ionicons@4.5 --save-dev.
This has worked for me. Happy Coding guys