I have a mobile app on ios and android using ion-slides/ion-slide
it is used to configure data for a sever based app. it was originally built on Ionic v1 in angular, and ported to Vue in v2, and migrated along the way to today. I provide my own navigation buttons, and also expect the normal touch screen swipe to work. the slides (only 4) are not wrap around…
the main page is the definition of the slides and slide (v-for)
and then I have a custom component that is the content in the slide, and it uses custom components
for the header/content/footer of the content IN the slide component
the content component dynamically constructs the UI fields and labels based on the data passed as parameters from the v-for loop at the top , the header and footer are customized by the data type being presented (passed in component props)
using this migration guide
here I have replaced the ion-slides and ion-slide with the swiper tags, and imported the documented
elements , but have NOT defined any ‘modules’ (as I don’t know what that means yet)
(it might not operate, but it should compile and run, imho)
there is no ion-page, and the ion-content isn’t present until the content component
the build (ionic capacitor sync ios) fails with a generic error
Cannot read properties of null (reading 'content')
what is the next step in debugging the build problem… the --verbose output doesn’t call out any particular error
the source for the slides component reported in the error
<template>
<swiper ref="slides1" style="height:100%">
<swiper-slide style="display:block;" v-for="(slideDefinition, i) in slideFieldDefinitions" :key="i"
@props_data="data_refreshed(x)"> <!-- -->
<Slide
:info="slideDefinition"
@changepage="changepage"
@props_data="data_refreshed(x)"
></Slide>
</swiper-slide>
</swiper>
</template>
<script>
import Slide from "../components/SlideComponent.vue";
import Store from "@/store/datastore.js";
import { Swiper, SwiperSlide } from 'swiper/vue';
import { defineComponent } from 'vue';
import 'swiper/css';
import '@ionic/vue/css/ionic-swiper.css';
export default defineComponent({
name: "SlidesComponent",
components: {,
Swiper,
SwiperSlide,
Slide,
},
methods: {
changepage(direction) {
console.log("changing slide direction=" + direction);
if (direction) {
this.$refs.slides1.$el.slideNext();
console.log("next event");
} else {
this.$refs.slides1.$el.slidePrev();
console.log("prev event");
}
},
},
created() {
console.log("in slides create")
Store().getServerAddress().then(address => {
console.log("slides got adddress=" + address)
if (address != null) {
Store().init(address, this.datatypes)
console.log("init complete")
}
}).catch(error => {
console.log("get address failed=" + error)
})
},
setup() {
// default data
const tempdata = {
Viewers: [
{
Name: "viewer1",
_id: 1,
Advance: 5,
Tags: [12, 22, 32],
ImageRefreshRate: 10,
Active: true
},
{
Name: "viewer2",
_id: 2,
Advance: 5,
Tags: [42, 52, 62],
ImageRefreshRate: 10,
Active: false
}
],
DataSources: [
{
Name: "datasource name",
Type: { Type: " File" },
Active: true,
Root: "/",
_id: 9
},
{
Name: "datasource name2",
Type: { Type: " File" },
Active: false,
Root: "/",
_id: 65
}
],
Images: [
{
Name: "image",
_id: 11,
Tags: [42, 62],
DataSource: 9,
PathFromSource: "/somepath"
}
],
Tags: [
{ value: "tag1", _id: 12, description: "tag 1" },
{ value: "tag2", _id: 22, description: "tag 22" },
{ value: "tag3", _id: 32, description: "tag 32" },
{ value: "tag4", _id: 42, description: "tag 42" },
{ value: "tag5", _id: 52, description: "tag 52" },
{ value: "tag6", _id: 62, description: "tag 62" }
]
};
// description of the form fields, used by all the display functions and dialogs
const viewerFields = {
Type: "Viewer",
Fields: [
{ Name: "Name", width: 3 ,type:"string"},
{ Name: "Tags", width: 3, type: "Tags" },
{ Name: "Advance", width: 2, type: "number" },
{ Name: "ImageRefreshRate", width: 2, type: "number"},
{ Name: "Active", width: 2, type: "boolean" }
]
};
const dataSourceFields = {
Type: "DataSource",
Fields: [
{ Name: "Name", width: 3, type: "string" },
{ Name: "Type", width: 2, type: "Type" },
{ Name: "Active", width: 2, type: "boolean" },
{ Name: "Root", width: 5, type: "string" }
]
};
const imageFields = {
Type: "Image",
Fields: [
{ Name: "Name", width: 3, type: "string" },
{ Name: "Tags", width: 3, type: "Tags" },
{ Name: "DataSource", width: 3, type: "DataSource" },
{ Name: "PathFromSource", width: 3, type: "string" }
]
};
const tagFields = {
Type: "Tag",
Fields: [{ Name: "value", width: 4 }, { Name: "description", width: 8 }]
};
const datatypes = ["Tags", "DataSources", "Viewers", "Images"];
const slideFieldDefinitions = [viewerFields, dataSourceFields, imageFields, tagFields];
const slideOps = { loop: true };
return { tempdata, slideFieldDefinitions, slideOps, datatypes/*, ...vars*/};
}
};
</script>
<style>
body {
display: flex;
flex-direction: column;
}
</style>
build error
vue-cli-service build
All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.
⠹ Building for production...
ERROR Failed to compile with 1 error 8:48:04 PM
error in ./src/views/Slides.vue?vue&type=script&lang=js
Syntax Error: Thread Loader (Worker 3)
Cannot read properties of null (reading 'content')
ERROR Error: Build failed with errors.
Error: Build failed with errors.
at /Users/sam/ionic/Config2.vue/node_modules/@vue/cli-service/lib/commands/build/index.js:207:23
at /Users/sam/ionic/Config2.vue/node_modules/webpack/lib/webpack.js:168:8
at /Users/sam/ionic/Config2.vue/node_modules/webpack/lib/HookWebpackError.js:67:2
at Hook.eval [as callAsync] (eval at create (/Users/sam/ionic/Config2.vue/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/sam/ionic/Config2.vue/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
at Cache.shutdown (/Users/sam/ionic/Config2.vue/node_modules/webpack/lib/Cache.js:154:23)
at /Users/sam/ionic/Config2.vue/node_modules/webpack/lib/Compiler.js:1377:15
at Hook.eval [as callAsync] (eval at create (/Users/sam/ionic/Config2.vue/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/sam/ionic/Config2.vue/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
at Compiler.close (/Users/sam/ionic/Config2.vue/node_modules/webpack/lib/Compiler.js:1370:23)
at /Users/sam/ionic/Config2.vue/node_modules/webpack/lib/webpack.js:167:16
at finalCallback (/Users/sam/ionic/Config2.vue/node_modules/webpack/lib/Compiler.js:498:32)
at /Users/sam/ionic/Config2.vue/node_modules/webpack/lib/Compiler.js:522:13
at Hook.eval [as callAsync] (eval at create (/Users/sam/ionic/Config2.vue/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:33:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/sam/ionic/Config2.vue/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
at onCompiled (/Users/sam/ionic/Config2.vue/node_modules/webpack/lib/Compiler.js:520:21)
at /Users/sam/ionic/Config2.vue/node_modules/webpack/lib/Compiler.js:1348:17
at eval (eval at create (/Users/sam/ionic/Config2.vue/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[ERROR] An error occurred while running subprocess vue-cli-service.
my ionic info
Ionic:
Ionic CLI : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 8.3.1
Capacitor:
Capacitor CLI : 6.1.2
@capacitor/android : 6.1.2
@capacitor/core : 6.1.2
@capacitor/ios : 6.1.2
Utility:
cordova-res : not installed globally
native-run : 2.0.1
System:
NodeJS : v20.17.0 (/usr/local/bin/node)
npm : 10.8.2
OS : macOS Unknown