'react-lite-youtube-embed' does not provide an export named 'default' when running npm run build #34
Description
Hi
I have downloaded a copy today and have tried with both pnpm and npm.
Unfortunately, I get the following error when running npm run build after a successful npm install
18:55:44 ▶ src/pages/tags/index.astro
18:55:44 └─ /tags/index.html (+269ms)
18:55:45 ▶ src/pages/[regular].astro
18:55:45 ├─ /elements/index.htmlThe requested module 'react-lite-youtube-embed' does not provide an export named 'default'
Stack trace:
at ModuleJob._instantiate (node:internal/modules/esm/module_job:182:21)
at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:644:26)
at async file:///C:/Users/rnwol/workspace/bookworm-light-astro-main/dist/pages/_regular_.astro.mjs?time=1747158945213:18:23
Any suggestion on what I might do to resolve?
When I asked Gemini AI it suggested the following, but that did not work :(
typically means that your code is trying to import react-lite-youtube-embed using a default import (e.g., import LiteYouTubeEmbed from 'react-lite-youtube-embed';), but the build process believes that the module doesn't offer such a default export.
This is a bit puzzling because the react-lite-youtube-embed package is indeed designed to be imported this way, as it does provide a default export. The issue likely stems from how Astro's build process (which uses Vite and Node.js for server-side rendering/generation) is resolving or interpreting this module in the context of the generated file dist/pages/_regular_.astro.mjs.
Here's a common way to resolve such ESM import issues, along with other troubleshooting steps:
Recommended Solution: Modify the Import Statement
The most common fix for this type of issue is to change how you import the module. Instead of a direct default import, you can use a namespace import (import * as ...) and then access the default property explicitly.
You'll need to find where react-lite-youtube-embed is being imported in your project. This could be in:
src/pages/[regular].astro
An MDX file (e.g., src/content/some-page.mdx) that [regular].astro might be rendering.
A shared Astro component (.astro) or React component (.jsx/.tsx) that is used on the page.
Once you locate the import statement, try changing it as follows:
If your current import looks like this:
// In your .astro, .mdx frontmatter, .js, or .tsx file
import LiteYouTubeEmbed from 'react-lite-youtube-embed';
Change it to this:
// In your .astro, .mdx frontmatter, .js, or .tsx file
import * as LiteYouTubeEmbedPkg from 'react-lite-youtube-embed';
const LiteYouTubeEmbed = LiteYouTubeEmbedPkg.default;
// Optional: Add a check to ensure the import worked as expected, especially during debugging
if (!LiteYouTubeEmbed) {
console.error("Failed to import LiteYouTubeEmbed. LiteYouTubeEmbedPkg.default is undefined.");
// You might want to throw an error here or handle it gracefully
}
This approach explicitly tells JavaScript to load all exports from react-lite-youtube-embed into the LiteYouTubeEmbedPkg object and then assigns the default export to your LiteYouTubeEmbed variable. This can often bypass issues related to how bundlers or JavaScript runtimes handle default exports.