Mafs integration with Astro?

[hoxiea]

Hey, everyone! I discovered Mafs yesterday, and I was really excited to start playing with it today for a Calculus resource that I'm prototyping in Astro. Unfortunately, though, I'm having a hard time getting Mafs and Astro to work together. Can someone please help me troubleshoot this or understand why this won't work, maybe due to a limitation of Vite (which Astro uses under the hood) or SSGs in general?

I made a toy repo of Astro + Mafs here.

This toy example was created by using the Astro installer to create a new basic project, adding React, and then following the Mafs Installation instructions. HelloFx is in src/components/demo.jsx, and then I'm using this React component in src/pages/index.astro.

When I use the provided HelloFx code directly, I get the following error in my browser:

[ERROR] [vite] Named export 'Coordinates' not found. The requested module 'mafs' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'mafs';
const {Mafs, Coordinates} = pkg;

When I replace the HelloFx example import statement (import { Mafs, Coordinates } from "mafs";) with the lines suggested in the ERROR message, I get an empty Mafs frame and an error message in my browser console (screenshot attached).

Can Mafs and Astro play nicely together?

[blackmann]

You can do:

import { Circle, Coordinates, Mafs, Vector } from "mafs/build/index.mjs";

That works, but you lose type benefits

[hoxiea]

Thanks for the suggestion, @blackmann! Sure enough, I'm getting a pan-able coordinate axis now, which is exciting - gives me hope that Astro and Mafs can work together.

It'd be really nice to have type support though...

[blackmann]

Hi @hoxiea,

I looked into this again and you can get type benefits by doing this instead:

Inside astro.config.[m]js, add the following to your config.

...
vite: {
  ssr: { noExternal: ['mafs'] }
}

Then you can directly import from mafs instead of mafs/build/index.mjs

[hoxiea]

Awesome, @blackmann - thank you so much for the prompt, helpful replies. I updated my GitHub repo with instructions and will leave it out there in case it helps anyone who finds it in the future.

[jorenbroekema]

Ehh it seems to me that the correct fix was to publish the CJS output using the .cjs extension to mark it as CJS explicitly, not removing the "type": "module" field, that part was definitely correct: the source is written in ESM and it's published as ESM. It just so happens to dual publish a CJS bundle but that's secondary.

Could we consider reopening this and fixing it giving the CJS output the .cjs extension? I don't have a minimal reproduction just yet but NextJS is complaining that this package cannot be imported as ESM right now and putting back the "type": "module" fixes it 😅