Open digitalfreelanceruk opened 5 months ago
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.
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>
Checks
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:
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
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.