Versi ionik:
[x] 4.x
@ionic/ [email protected] atau @ionic/ vue@next
Perilaku saat ini:
Saat memperbarui aplikasi vue yang dikembangkan dengan Ionic/[email protected] dan menjalankan
npm install
setelah menghapus folder node_modules, saya mendapatkan kesalahan berikut:
Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at addIcons (chunk-ea2b3dce.js?d602:13)
at appInitialize (ionic-vue.esm.js?481b:279)
at Object.install (ionic-vue.esm.js?481b:687)
at Function.Vue.use (vue.runtime.esm.js?2b0e:5101)
at eval (main.js?56d7:12)
at Module../src/main.js (app.js:10193)
at __webpack_require__ (app.js:767)
at fn (app.js:130)
at Object.1 (app.js:10267)
Perilaku yang diharapkan:
Harus dapat memuat ionicons. ini bekerja dengan sempurna ketika @ionic/ [email protected] dan [email protected] adalah dependensi. Sekarang ketika Anda menginstal ulang dari awal, dependensinya adalah @ionic/ [email protected] dan [email protected] dan gagal untuk @ionic/ [email protected] dan @ionic/ vue@next
Langkah-langkah untuk mereproduksi:
Kode terkait:
melihat
https://github.com/jepiqueau/vue-test-stencil-svgpaths-morphing
yang gagal
melihat
https://github.com/jepiqueau/vue-test-stencil-colorpicker
yang bekerja
insert short code snippets here
Informasi lainnya:
Informasi ionik:
Ionic:
Ionic CLI : 5.0.2
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v10.15.3
npm : 6.9.0
OS : macOS Mojave
Saya melihat masalah yang sama. Ini mungkin terkait dengan peringatan yang muncul saat menjalankan ionic serve
:
warning in ./node_modules/@ionic/vue/dist/ionic-vue.esm.js
"export 'ICON_PATHS' was not found in 'ionicons/icons'
Sama disini. Tidak dapat menayangkan aplikasi yang baru dibuat.
solusi yang saya temukan adalah menginstal terlebih dahulu
npm install @ionic/core<strong i="6">@one</strong>
npm install @ionic/[email protected]
memodifikasi file main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//import Ionic from "@ionic/vue"; // comment this line
import { defineCustomElements as ionic } from "@ionic/core/loader"; // add a direct link to @ionic/core
import { defineCustomElements as svgmorphing } from "stencil-svgpaths-morphing/dist/loader";
import "@ionic/core/css/ionic.bundle.css";
//Vue.config.ignoredElements = [/jeep-\w*/]; // comment this line
Vue.config.ignoredElements = [/^ion-/, /^jeep-/]; // add this line
//Vue.use(Ionic); // comment this line
ionic(window); // add this line
svgmorphing(window);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
dan simpan file router.js karena artinya masih menggunakan IonicVueRouter
dan itu bekerja dengan baik.
Sekarang jika Anda melihat package-lock.json ,
@ionic/core is version "4.6.0-dev.201906131724.645b9a9" requiring "ionicons": "4.5.9-1"
@ionic/vue is version 0.0.4 with dependencies @ionic/[email protected] requiring "ionicons": "4.5.10-2
Sebenarnya untuk melihat ikon main.js seharusnya :
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { defineCustomElements as ionic } from "@ionic/core/loader"; // added line
import { defineCustomElements as svgmorphing } from "stencil-svgpaths-morphing/dist/loader";
//import Ionic from "@ionic/vue"; // commented line
import { addIcons } from "ionicons"; // added line
import { ICON_PATHS } from "ionicons/icons"; // added line
import "@ionic/core/css/ionic.bundle.css";
//Vue.config.ignoredElements = [/jeep-\w*/]; // commented line
Vue.config.ignoredElements = [/^ion-/, /^jeep-/]; // added line
//Vue.use(Ionic); // commented line
ionic(window); // added line
svgmorphing(window);
addIcons(ICON_PATHS); // added line
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
Sekarang ikon ditampilkan
Ini dapat digunakan sebagai solusi hingga @ionic/vue diperbarui ke @ionic/ core@one
lihat untuk implementasi lengkap
https://github.com/jepiqueau/vue-test-stencil-svgpaths-morphing/tree/ionicone
Saya menghadapi masalah yang sama. Tidak dapat menayangkan aplikasi yang baru dibuat.
Sama disini
Untuk sementara,
Saya melakukan ini, dan aplikasi berfungsi untuk saya tetapi itu bukan solusi yang tepat, tetapi Anda dapat melakukan ini sekarang untuk dapat melanjutkan pekerjaan Anda
jika Anda tidak dapat menemukan file ini, buka direktori proyek dan dari komputer/lap cari kanan nama depan file. (jika Anda mencari ionic-vue.esm.js write -> ionic dan akan muncul semua file/folder yang dimulai dengan ionic lalu pilih file yang Anda cari dalam kasus ini (Anda harus memilih ionic-vue.esm.js ) .
Perbaikan temp Abdlrahmansaber berfungsi,
(Dia berarti "Komentar" bukan "Umum") Anda ingin mengomentari baris yang dia komentari di tangkapan layarnya.
Terima kasih Adrianmed :)
mungkin saya tahu alasan bug ini
alasannya karena jika Anda mencoba mengimpor {ICON_PATH} tidak menghasilkan apa-apa, coba cetak di konsol itu tidak akan menghasilkan apa-apa.
@Adrianmed @Abdlrahmansaber ya itu berfungsi tetapi matikan ikonnya jadi ini bukan solusi sementara untuk aplikasi yang dirilis :)
Saya telah menerapkan solusi @Abdlrahmansaber. Tapi itu tidak berfungsi dengan baik (peringatan kompilasi dan kesalahan konsol menghilang).
Saya mencoba mengikuti itu: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Tapi saat ini saya menambahkan
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';
Vue.use(Ionic);
ke main.js yang saya dapatkan hanyalah halaman "kosong".
Versi dependensi saat ini:
"ketergantungan": {
"@ionic/vue": "0.0.4",
"vue": "^2.6.10",
"vue-router": "^3.0.3"
},
"devDependencies": {
"@vue/cli-service": "^3.8.0",
"vue-template-compiler": "^2.6.10"
}
Saya telah menerapkan solusi @Abdlrahmansaber. Tapi itu tidak berfungsi dengan baik (peringatan kompilasi dan kesalahan konsol menghilang).
Saya mencoba mengikuti itu: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Tapi saat ini saya menambahkanimport Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic);
ke main.js yang saya dapatkan hanyalah halaman "kosong".
Versi dependensi saat ini:
"ketergantungan": {
"@ionic/vue": "0.0.4",
"vue": "^2.6.10",
"vue-router": "^3.0.3"
},
"devDependencies": {
"@vue/cli-service": "^3.8.0",
"vue-template-compiler": "^2.6.10"
}
edit: Ini berfungsi dengan baik untuk saya, bahkan dengan impor yang Anda kutip
Anda harus menggunakan yang saya sarankan dua hari lalu itu berfungsi dan Anda melihat ikonnya
@wannymiarelli Saya tahu itu mematikan ikon tetapi Anda dapat mengembangkan seluruh aplikasi tanpa ikon sampai memperbaiki bug
dan Anda benar itu bukan solusi untuk aplikasi yang dirilis
@mbilbao dapatkah Anda menunjukkan kepada saya konsolnya?
Saya menyelesaikan ini dengan mengubah versi ionicons di package-lock.json
Tapi sebenarnya itu harus bekerja dengan npm install baru
@mbilbao dapatkah Anda menunjukkan kepada saya konsolnya?
Hei, konsol itu jelas, tanpa kesalahan, peringatan, atau apa pun yang muncul saat Anda memeriksa mode verbose.
Saya sudah menurunkan paket ionicons seperti yang diposting
Terima kasih @Abdlrahmansaber .
Cukup tambahkan [email protected]
ke package.json Anda. Ini hanya mengesampingkan ketergantungan rekan dan dapat digunakan sebagai solusi.
masalah yang sama ... bagaimana cara memperbaikinya?
Saya telah menerapkan solusi @Abdlrahmansaber. Tapi itu tidak berfungsi dengan baik (peringatan kompilasi dan kesalahan konsol menghilang).
Saya mencoba mengikuti itu: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Tapi saat ini saya menambahkanimport Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic);
ke main.js yang saya dapatkan hanyalah halaman "kosong".
Versi dependensi saat ini:
"ketergantungan": {
"@ionic/vue": "0.0.4",
"vue": "^2.6.10",
"vue-router": "^3.0.3"
},
"devDependencies": {
"@vue/cli-service": "^3.8.0",
"vue-template-compiler": "^2.6.10"
}
@mbilbao Saya memiliki masalah yang sama. Apakah Anda menemukan perbaikan?
Saya memiliki masalah yang sama. Saya mencari beberapa jam di internet untuk menemukan solusi tetapi saya tidak menemukan cara yang tepat untuk menyelesaikan masalah ini. Dapatkah seseorang membantu saya?
Saya telah menerapkan solusi @Abdlrahmansaber. Tapi itu tidak berfungsi dengan baik (peringatan kompilasi dan kesalahan konsol menghilang).
Saya mencoba mengikuti itu: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Tapi saat ini saya menambahkanimport Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic);
ke main.js yang saya dapatkan hanyalah halaman "kosong".
Versi dependensi saat ini:
"ketergantungan": {
"@ionic/vue": "0.0.4",
"vue": "^2.6.10",
"vue-router": "^3.0.3"
},
"devDependencies": {
"@vue/cli-service": "^3.8.0",
"vue-template-compiler": "^2.6.10"
}@mbilbao Saya memiliki masalah yang sama. Apakah Anda menemukan perbaikan?
Ya, saya menerapkan solusi @daarioautumn hanya menurunkan paket ionicons ke 4.5.8
@yasin-mesut solusi bekerja untuk saya
Instal saja paket ionic: npm install [email protected] --save-dev
seperti yang disarankan @yasin-mesut
@jepiqueau solusi Anda berhasil untuk saya, tetapi sekarang saya memiliki konten yang ditambahkan ke akhir setiap item ion di aplikasi saya:
Apakah Anda mengalami masalah ini? Apakah Anda tahu bagaimana menyelesaikannya?
Saya baru saja pindah ke Ionic normal dengan Angular. Tapi saya masih ingin mengembangkan proyek saya dengan vue framework sad
Saya telah menerapkan solusi @Abdlrahmansaber. Tapi itu tidak berfungsi dengan baik (peringatan kompilasi dan kesalahan konsol menghilang).
Saya mencoba mengikuti itu: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Tapi saat ini saya menambahkanimport Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic);
ke main.js yang saya dapatkan hanyalah halaman "kosong".
Versi dependensi saat ini:
"ketergantungan": {
"@ionic/vue": "0.0.4",
"vue": "^2.6.10",
"vue-router": "^3.0.3"
},
"devDependencies": {
"@vue/cli-service": "^3.8.0",
"vue-template-compiler": "^2.6.10"
}@mbilbao Saya memiliki masalah yang sama. Apakah Anda menemukan perbaikan?
Ya, saya menerapkan solusi @daarioautumn hanya menurunkan paket ionicons ke 4.5.8
Saya menemukan gaya ini:
html:not(.hydrated) body {
display: none;
}
ini diselesaikan dengan menggunakan @ionic/ [email protected]. jadi saya menutup masalah ini
Bisakah mempublikasikan versi terbaru (@ionic/[email protected]) ke npm? sekarang di npm adalah v0.0.4.
Itu diterbitkan di npm do npm install --save @ionic/ vue@next
Solusi @jepiqueau bekerja dengan sempurna untuk saya. Terima kasih!!!
Ini berfungsi dengan baik di @ionic/ [email protected] tetapi hanya dengan ion yang ditambahkan di vue appInitialize, yaitu:
tutup, susun ulang, menu, panah maju, panah mundur, panah bawah, cari & tutup lingkaran.
Kapan kita bisa berharap memiliki akses penuh ke semua ikon?
Tentu saja seseorang dapat mengedit ionic-vue.esm.js tetapi tidak yakin ini adalah cara yang disarankan....
solusi untuk memiliki ikon lain adalah dengan menambahkannya di file main.js yaitu untuk ikon "bintang", "sampah", "buat" Anda melakukan ini
// after import Ionic from "@ionic/vue";
import { addIcons } from "ionicons";
import { star, trash, create } from "ionicons/icons";
// after Vue.use(Ionic);
addIcons({
"ios-star": star.ios,
"md-star": star.md,
"ios-trash": trash.ios,
"md-trash": trash.md,
"ios-create": create.ios,
"md-create": create.md
});
itu saja dan itu berfungsi jadi lakukan itu untuk ikon apa pun yang ingin Anda gunakan bahkan untuk ikon yang ingin Anda tambahkan dalam item ion
semoga membantu
Lihat cabang ionicone
dari
https://github.com/jepiqueau/vue-test-stencil-svgpaths-morphing
saya menambahkan tombol TestIcons di Home.Vue dan TestIcons.Vue menunjukkan ikon yang diinginkan
Ini bekerja dengan baik. Terima kasih untuk bantuannya. Apakah ini perbaikan sementara atau merupakan cara untuk mengakses ikon?
Saya tidak tahu rencana tim Ionic tetapi bagi saya logis untuk mengimpor hanya ikon yang Anda butuhkan di aplikasi Anda alih-alih semua ikon yang akan meningkatkan ukuran aplikasi Anda tanpa nilai
Perhatikan, saat mencoba mengimpor ikon dengan tanda hubung pada namanya, misalnya log-out
Anda dapat menggunakan logOut
sebagai gantinya.
import { addIcons } from "ionicons";
import { logOut } from "ionicons/icons";
addIcons({
"ios-log-out": logOut.ios,
"md-log-out": logOut.md
});
itu caranya
Apakah ini telah diselesaikan?
Untuk orang yang mengalami ini di masa depan, perbaikannya agak terkubur di atas. Cukup perbarui versi @ionic/vue Anda, misalnya:
$ npm install @ionic/[email protected]
@hunterloftis - terima kasih. Itu berhasil. Saya harap ini diperbarui secara resmi sebelum saya pergi ke prod, tetapi berfungsi untuk saat ini.
Terima kasih teman-teman, Anda benar-benar memudahkan saya
Terima kasih untuk masalah ini! Masalah ini sedang dikunci untuk mencegah komentar yang tidak relevan dengan masalah asli. Jika ini masih menjadi masalah dengan versi terbaru Ionic, harap buat masalah baru dan pastikan template terisi penuh.
Komentar yang paling membantu
Cukup tambahkan
[email protected]
ke package.json Anda. Ini hanya mengesampingkan ketergantungan rekan dan dapat digunakan sebagai solusi.