Vite: default import fails on mailgun.js AMD web build

TL;DR

Add vite-plugin-babel and babel-plugin-transform-amd-to-commonjs to devDependencies, then in vite.config.ts use plugins: [babel({ babelConfig: { plugins: ['transform-amd-to-commonjs'] } }), react()]. What works: In a Vite project, import Mailgun from 'mailgun.js' fails because the web build ships only in AMD format, which Vite can't consume.

When to use

You are seeing this: What was reported: Issue mailgun/mailgun-js#415 (closed, 13 comments): In a Vite + React project, import Mailgun from 'mailgun.js' fails with SyntaxError: The requested module... does not provide an export named 'default'. Use this skill when you run into "Vite: default import fails on mailgun.js AMD web build".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Steps

1. What was reported:

Issue mailgun/mailgun-js#415 (closed, 13 comments): In a Vite + React project, import Mailgun from 'mailgun.js' fails with SyntaxError: The requested module ... does not provide an export named 'default'. The web build of mailgun.js ships only in AMD format, which Vite cannot consume directly.

2. What works:

In a Vite project, import Mailgun from 'mailgun.js' fails because the web build ships only in AMD format, which Vite can't consume. Workaround: convert the AMD build to CommonJS with the Babel plugin. Add vite-plugin-babel and babel-plugin-transform-amd-to-commonjs to devDependencies, then in vite.config.ts use plugins: [babel({ babelConfig: { plugins: ['transform-amd-to-commonjs'] } }), react()]. The commenter verified this works.

In the GitHub issue, the reporter asked: Vite: default import fails on mailgun.js AMD web build. The working answer that came out of the thread: In a Vite project, import Mailgun from 'mailgun.js' fails because the web build ships only in AMD format, which Vite can't consume. Workaround: convert the AMD build to CommonJS with the Babel plugin. Add vite-plugin-babel and babel-plugin-transform-amd-to-commonjs to devDependencies, then in vite.config.ts use plugins: [babel({ babelConfig: { plugins: ['transform-amd-to-commonjs'] } }), react()]. The commenter verified this works. Source: https://github.com/mailgun/mailgun-js/issues/415