I am new in svelte.js. help me please to fix it

Here, when I import the swiper carousel at my .svelte file. it shows me this error which is

[rollup-plugin-svelte] The following packages did not export their package.json file so we could not check the "svelte" field. If you had difficulties importing svelte ponents from a package, then please contact the author and ask them to export the package.json file.

Screenshot of Terminal Error. Please check this

This is my code file. here is another ponent of a carousel slider. but I am seeing this picture when I import the swiper carousel.

<script>
    import { Swiper, SwiperSlide } from "swiper/svelte";
    import PorfolioCard from "./../ponents/porfolio-card.svelte";
    import SectionTitle from "./../ponents/sectionTitle.svelte";
    import "swiper/css";
</script>

<section id="portfolio">
    <SectionTitle title="My Portfolio" subtitle="Visit My Portfolio And Keep your feedback" />

    <div class="mt-4 px-1 px-md-3 px-lg-5">
        <Swiper>
            <SwiperSlide>
                <PorfolioCard />
            </SwiperSlide>

            <SwiperSlide>
                <PorfolioCard />
            </SwiperSlide>

            <SwiperSlide>
                <PorfolioCard />
            </SwiperSlide>

            <SwiperSlide>
                <PorfolioCard />
            </SwiperSlide>

            <SwiperSlide>
                <PorfolioCard />
            </SwiperSlide>
            
        </Swiper>
    </div>
</section>

I am new in svelte.js. help me please to fix it

Here, when I import the swiper carousel at my .svelte file. it shows me this error which is

[rollup-plugin-svelte] The following packages did not export their package.json file so we could not check the "svelte" field. If you had difficulties importing svelte ponents from a package, then please contact the author and ask them to export the package.json file.

Screenshot of Terminal Error. Please check this

This is my code file. here is another ponent of a carousel slider. but I am seeing this picture when I import the swiper carousel.

<script>
    import { Swiper, SwiperSlide } from "swiper/svelte";
    import PorfolioCard from "./../ponents/porfolio-card.svelte";
    import SectionTitle from "./../ponents/sectionTitle.svelte";
    import "swiper/css";
</script>

<section id="portfolio">
    <SectionTitle title="My Portfolio" subtitle="Visit My Portfolio And Keep your feedback" />

    <div class="mt-4 px-1 px-md-3 px-lg-5">
        <Swiper>
            <SwiperSlide>
                <PorfolioCard />
            </SwiperSlide>

            <SwiperSlide>
                <PorfolioCard />
            </SwiperSlide>

            <SwiperSlide>
                <PorfolioCard />
            </SwiperSlide>

            <SwiperSlide>
                <PorfolioCard />
            </SwiperSlide>

            <SwiperSlide>
                <PorfolioCard />
            </SwiperSlide>
            
        </Swiper>
    </div>
</section>

• javascript
• import
• svelte
• swiper.js
• rollup

2 Answers 2

There is not currently a way to silence this warning. There is however an open issue on the GitHub repo regarding it.

https://github./sveltejs/rollup-plugin-svelte/issues/181

Update:

Evidently this has since been addressed here and the open issue mentioned previously has be closed as a result.

TL;DR

This error can be safely ignored if it's ing from modules that don't export svelte ponents (eg. stream, util, is-odd; modules that export Javascript files). You can even hide it via overriding onwarn in rollup.config.js:

const onwarn = (message, warn) => {
    const ignored = {
        PLUGIN_WARNING: ['`package.json`'],
    };
    const ignoredKeys = Object.keys(ignored);
    const ignoredValues = Object.values(ignored);

    for (let i = 0, l = ignoredKeys.length; i < l; ++i) {
        const ignoredKey = ignoredKeys[i];
        const ignoredValue = ignoredValues[i];

        for (const ignoredValuePart of ignoredValue) {
            if (message.code !== ignoredKey
                || !message.toString().includes(ignoredValuePart)) {
                continue;
            }

            return;
        }
    }

    warn(message);
};

export default {
    output: {
        format: 'esm',
        name: 'app',
        dir: 'public',
    },
    onwarn,
    plugins: [
        // your plugins, eg. `svelte()`
    ],
}

Mini-explanation

It's emitted because some modules specify the files they're exporting in package.json using the exports field, but they don't include package.json itself in the field. This messes with how rollup-plugin-svelte identifies modules which export svelte ponents — by reading package.json (it can't import what's specifically not exported!). Here's some more technical explanation on the plugin's Github page, regarding why the plugin does things like that & the benefits of it.