Astro site upload to server error: Named export 'Splide' not found. The requested module '@splidejs/react-splide' is a CommonJS module, which may not support all module.exports as named exports.

[digitalfreelanceruk]

Checks

• [X] Not a duplicate.
• [X] Not a question, feature request, or anything other than a bug report directly related to React Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.7.12

Description

I'm using Splide React in an Astro website and have had issues with Splide regarding imports, modules, commonJS/ESM:

When running locally I got this error:

Cannot use import statement outside a module
project/node_modules/@splidejs/react-splide/dist/js/react-splide.esm.js:2574
import React2 from "react";
^^^^^^

And when pushing the site to my Cloudflare Pages instance (same occurred on Vercel) I got the following build error:

Named export 'Splide' not found. The requested module '@splidejs/react-splide' is a CommonJS module, which may not support all module.exports as named exports.

I have managed to fix the issue by updating the package.json for splide react with:

"type": "module",

And using pnpm patch to apply this change live as well as locally.

I'm not sure whether this is considered a bug or intentional, but I hope raising the issue and providing the fix that worked for me will help other Astro devs to use Splide.

Reproduction Link

No response

Steps to Reproduce

1. Set-up an Astro site
2. Add the Astro:React integration
3. Install the Splide React NPM package as per Splide's instructions
4. Create the React component as per Splide's instructions
5. Use the component somewhere with a client directive to hydrate the component
6. Run dev, run build & preview or commit to server to return errors ...

Expected Behaviour

I expected Splide to just work as intended with no errors as I hadn't deviated from the instructions provided by Splide or Astro.

[tojobg]

I had the same problem, fixed it by renaming the react-splide.esm.js file to react-splide.esm.mjs, you will also need to update the package.json.

[tsiotska]

I managed to solve it just wrapping imports in the script tag, thus browser treats it as module, while node found it ambiguous.

<script>
    import "@splidejs/splide/css";
    import Splide from "@splidejs/splide";

    document.addEventListener('DOMContentLoaded', function () {
        const main = new Splide('#main-carousel', {
            type: 'fade',
            rewind: true,
            pagination: false,
            arrows: true,
        });
        main.mount();
    });
</script>