I recently switched over to the new Vite compiler for Laravel. I noticed that it somehow did not accept my window object anymore. No problem I thought, I'll just use imports/exports. However, I just keep getting the same error:
The requested module '../../../../../js/plugins/pageflip.js' does not provide an export named 'pageFlip'
I have searched all over the internet, but it keeps telling me not to confuse named exports/imports with default ones. However, I don't see anything wrong with my code. Could someone please help me with this?
show.blade.php
<div>
HTML HERE
</div>
@push('scripts')
<script type="module">
import {pageFlip} from "../../../../../js/plugins/pageflip.js";
@isset(condition here)
pageFlip.turnToPage({{ $tale->taleUser->progress }})
@endisset
@can(condition here)
pageFlip.on('flip', (e) => {
document.getElementById('pageProgress').value = pageFlip.getCurrentPageIndex();
document.getElementById('pageCount').innerHTML = pageFlip.getCurrentPageIndex();
});
@endcan
function turnPage(bool) {
if (bool) {
return pageFlip.turnToNextPage();
}
return pageFlip.turnToPrevPage();
}
</script>
@endpush
My script file:
import {PageFlip} from 'page-flip'
const pageFlip = new PageFlip(document.getElementById('book'),
{
width: 400,
height: 600,
size: ('stretch'),
minWidth: 200,
minHeight: 400,
maxWidth: 1000,
maxHeight: 1000,
autoSize: true,
disableFlipByClick: true,
showCover: false
}
);
pageFlip.loadFromHTML(document.querySelectorAll('.tale-page'));
export { pageFlip }
The vite config file:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
'resources/js/plugins/pageflip.js',
]),
],
});
Judging by the error, I am a bit confused. I really am providing an export named 'pageFlip', right? Or am I possibly missing some vite configuration?
I am using the StPageFlip package provided by Nodlik.
p should be capital in PageFlip in show.blade.php file. So replace import {pageFlip} from "../../../../../js/plugins/pageflip.js"; with import {PageFlip} from "../../../../../js/plugins/pageflip.js";