導入/導出錯誤：請求的模塊未提供名為“pageFlip”的導出

Question

我最近切換到 Laravel 的新 Vite 編譯器。 我注意到它不知何故不再接受我的 window object。 我想沒問題，我只會使用導入/導出。 但是，我只是不斷收到同樣的錯誤：

The requested module '../../../../../js/plugins/pageflip.js' does not provide an export named 'pageFlip'

我在整個互聯網上進行了搜索，但它一直告訴我不要將命名導出/導入與默認導出/導入混淆。 但是，我認為我的代碼沒有任何問題。 有人可以幫我嗎？

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

我的腳本文件：

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 }

vite 配置文件：

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',
    ]),
],
});

從錯誤來看，我有點困惑。 我真的提供了一個名為“pageFlip”的導出，對嗎？ 還是我可能缺少一些 vite 配置？

我正在使用 Nodlik 提供的 StPageFlip package。

Answer 1

p 應該在show.blade.php文件中的PageFlip中大寫。 所以替換import {pageFlip} from "../../../../../js/plugins/pageflip.js"; import {PageFlip} from "../../../../../js/plugins/pageflip.js";