Ionic-framework: bug: Kesalahan ionik ionik/vue

Dibuat pada 27 Jun 2019  ·  46Komentar  ·  Sumber: ionic-team/ionic-framework

Laporan Bug

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:

  • ambil aplikasi vue yang ada yang berjalan dengan @ionic/ [email protected] dan ionicons 4.5.6
  • hapus folder node_modules
  • hapus paket-lock.json
  • instal npm

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
triage

Komentar yang paling membantu

Cukup tambahkan [email protected] ke package.json Anda. Ini hanya mengesampingkan ketergantungan rekan dan dapat digunakan sebagai solusi.

Semua 46 komentar

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,

  • umum apa pun yang terkait dengan Ikon dalam file ini (ionic-vue.esm.js, file potongan yang ditampilkan di konsol)

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 ) .

Screenshot_15
Screenshot_16
Screenshot_17
Screenshot_18

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.

Screenshot_13

Screenshot_11

@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".
image

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 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".
image

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
Screenshot from 2019-06-30 20-25-49

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 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".
image

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 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".
image
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:
image
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 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".
image
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.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

daveshirman picture daveshirman  ·  3Komentar

alexbainbridge picture alexbainbridge  ·  3Komentar

GeorgeAnanthSoosai picture GeorgeAnanthSoosai  ·  3Komentar

alan-agius4 picture alan-agius4  ·  3Komentar

MrBokeh picture MrBokeh  ·  3Komentar