[Build Error] The requested module 'x' does not provide an export named 'default'

[raulfdm]

Astro Info

Astro                    v3.1.2
Node                     v18.15.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

Not relevant

Describe the Bug

I'm trying to create an Astro project that uses three.js and its ecosystem, and when I tried to import a lib called lil-gui, while in dev, it works fine, it gets broken running a build:

 error   The requested module 'lil-gui' does not provide an export named 'default'
file:///Users/raulmelo/development/sandbox/test-lil-gui/dist/chunks/pages/script_d5fa1c97.mjs:1
import GUI from 'lil-gui';
       ^^^
SyntaxError: The requested module 'lil-gui' does not provide an export named 'default'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

I noticed that if I edit the dependency package.json adding a "exports" property, it works fine:

  "exports":{
    ".":{
      "import": "./dist/lil-gui.esm.js",
      "require": "./dist/lil-gui.umd.js"
    }
  }

My question here is: is there anything we need to do on Astro's/Vite's config to fix that?

What's the expected result?

To build without error.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-geagbm?file=README.md

Participation

• [ ] I am willing to submit a pull request for this issue.

[raulfdm]

https://github.com/georgealways/lil-gui/assets/12464600/b4b4aa40-9790-469a-a36b-e87cfda3b424

[bluwy]

Sorry you're hitting this. Unfortunately it's a Vite bug, see https://github.com/vitejs/vite/issues/10712 and https://github.com/vitejs/vite/issues/14332 (and probably more). I'm planning to fix this in Vite 5, but for now there's not much Astro can do.

As a workaround, you can import it like this:

import * as _GUI from 'lil-gui'
const GUI = GUI.default
// or (not sure if the above is enough)
const GUI = GUI.default || GUI

[raulfdm]

Oh.. nice @bluwy ... thanks getting me back and for the workaround 🙏

[raulfdm]

For further reference:

I noticed that in one if the open issues, a guy posted this: https://vite-plugin-ssr.com/broken-npm-package

I tried the following vite-config:

import { defineConfig } from "astro/config";

// https://astro.build/config
export default defineConfig({
  vite: {
    ssr: {
      // Add npm packages containing invalid code here
      noExternal: ["lil-gui"],
    },
  },
});

and the build succeeded:

Also running a live server on dist, it worked fine.

[kitschpatrol]

Thanks for this tip. For some reason I just ran into this error in for the first time after upgrading from Astro 4.6.3 → 4.8.3.

It's happening in production builds only, with complaints about a missing a default export on nanoid, which I'm only importing in Svelte components.

Here's the stack trace from the failed build:

15:48:11 [vite] ✓ built in 2.31s

 generating static routes 
2024-05-13T19:48:11.245Z astro:telemetry {
  context: {
    isGit: true,
    anonymousProjectId: '75d034b7c4fdc0dd0c1a22fcc8e69f50a50246f53fd192f5439f041340098812',
    packageManager: 'pnpm',
    packageManagerVersion: '9.1.1',
    anonymousId: 'a027c6f6f986bd6de11997d886abe7d1516be0d79855f6aa6df802f6fe46a496',
    anonymousSessionId: 'aaa25d967446653ca4eeab4994b492146a9b3d0c60d9dc0c777008fb12890b2d'
  },
  meta: {
    nodeVersion: '20.13.1',
    viteVersion: '5.2.11',
    astroVersion: '4.8.3',
    systemPlatform: 'darwin',
    systemRelease: '23.4.0',
    systemArchitecture: 'arm64',
    cpuCount: 14,
    cpuModel: 'Apple M3 Max',
    cpuSpeed: 2400,
    memoryInMb: 36864,
    isDocker: false,
    isTTY: undefined,
    isWSL: false,
    isCI: false,
    ciName: null
  }
}
2024-05-13T19:48:11.245Z astro:telemetry [
  {
    "eventName": "ASTRO_CLI_ERROR",
    "payload": {
      "name": "SyntaxError",
      "cliCommand": "build",
      "isFatal": true,
      "anonymousMessageHint": "The requested module"
    }
  }
]
The requested module 'nanoid/non-secure' does not provide an export named 'default'
  Stack trace:
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async generatePages (file:///Users/mika/Code/svelte-tweakpane-ui/node_modules/.pnpm/astro@4.8.3_@types+node@20.12.11_lightningcss@1.24.1_terser@5.31.0_typescript@5.5.0-beta/node_modules/astro/dist/core/build/generate.js:120:7)
    at async AstroBuilder.build (file:///Users/mika/Code/svelte-tweakpane-ui/node_modules/.pnpm/astro@4.8.3_@types+node@20.12.11_lightningcss@1.24.1_terser@5.31.0_typescript@5.5.0-beta/node_modules/astro/dist/core/build/index.js:133:5)
    at async build (file:///Users/mika/Code/svelte-tweakpane-ui/node_modules/.pnpm/astro@4.8.3_@types+node@20.12.11_lightningcss@1.24.1_terser@5.31.0_typescript@5.5.0-beta/node_modules/astro/dist/core/build/index.js:45:3)
    at async runCommand (file:///Users/mika/Code/svelte-tweakpane-ui/node_modules/.pnpm/astro@4.8.3_@types+node@20.12.11_lightningcss@1.24.1_terser@5.31.0_typescript@5.5.0-beta/node_modules/astro/dist/cli/index.js:140:7)
 ELIFECYCLE  Command failed with exit code 1.

Adding the following to my Astro config fixed it:

vite: {
  ssr: {
    noExternal: ['nanoid']
  }
}