Vuepic/vue3-date-time-picker

t.set is not a function in Browser mode

cpkuo opened this issue · 5 comments

cpkuo commented

Hello,

I'm trying to get a simple example working using browser installation mode. I see several warnings and an error: t.set is not a function after a date is selected. Is there anything else I need to configure to make this work?

index.html

<html>

<head>
<link rel="stylesheet" href="https://unpkg.com/vue3-date-time-picker@latest/dist/main.css">
</head>

<body>

<div id="app"></div>

<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></script>
<script src="https://unpkg.com/vue3-date-time-picker@latest/dist/vue3-date-time-picker.min.js"></script>
<script src="index.js" type="module"></script>

</body>

</html>

index.js

Vue.createApp({
	components: { Datepicker: Vue3DatePicker },
	template: `<Datepicker v-model="date"></Datepicker>`,
	setup() {
		const { ref } = Vue;
		const date = ref();
            
            return {
                date
            }
	}	
}).mount("#app");

And here is the console:
vuedatetimeerror

Jasenkoo commented

Try adding <script src="https://unpkg.com/date-fns@2.28.0/index.js"></script> instead of <script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></script> and let me know if this fixes the issue

cpkuo commented

Thanks for the reply. When I use the new dat-fns url, I now get this error:

Uncaught ReferenceError: exports is not defined at index.js:3 from that new url.

I'm on Chrome 96.0.4664.110

Jasenkoo commented

Ok, I'll check what is going on

Jasenkoo commented

FIxed bundle will be included in the next version, found out that date-fns is not working by itself in the browser, more info here

Jasenkoo commented

New version is now live, no need to add date-fns separately