I encountered an issue on my Vue.js website hosted on Firebase where a blank white page was displayed on mobile devices. After some investigation, I traced the problem back to two objects declared in the data function of one of my components:
re: {
youtube: /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*)/,
id: /(?<=\?v=)\w*(?=[^#\&\?]*)/,
urlTimestamp: /(?<=&t=)((?:[0-9]{1,2})h)?((?:[0-9]{1,3})m)?((?:[0-9]{1,5})s)?/g,
timestamp: /^([0-9]{1,2}h)?([0-9]{1,3}m)?([0-9]{1,5}s)?$/g,
},
rules: {
name: [
v => !!v || 'Required'
],
url: [
v => !v || v && /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*)/.test(v) || 'Invalid URL',
v => !v || /(?<=\?v=)([^#\&\?]*)/.test(v) && v.match(/(?<=\?v=)([^#\&\?]*)/)[0].length === 11 || 'Video ID must be 11 characters'
],
timestamp: [
v => !v || v && (/^([0-9]{1,2}h)?([0-9]{1,3}m)?([0-9]{1,5}s)?$/g).test(v) || 'Invalid format',
],
},
(I have two timestamp regexes to extract timestamps from YouTube URLs and validate standalone timestamp strings)
Interestingly, removing both objects resolves the display issue, but deleting just one or the other still results in the white page problem. Additionally, using regex in the watch functions for this component triggers the same error. I am unsure about the root cause of this unexpected behavior.