[BUG] ESM dependencies are not resolved correctly during build

[jbarriospd]

Describe the bug
I'm using Astro framework. When run the project in dev mode no problem but I trying to build the project I have error.
This error occurs during build when multi-distribution (CJS, ESM) packages are imported.

Version of Package
v5.9.0

To Reproduce
npm run build in https://github.com/jbarriospd/Encuesta-Colombia-Dev)

Expected behavior
It should build the application without error of package

Screenshots
I have this log when I try to build:

generating static routes 
▶ src/pages/index.astro
  └─ /index.html (+3ms)
▶ src/pages/[...slug].astro
 error   Named export 'Tooltip' not found. The requested module 'react-tooltip' 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 'react-tooltip';
  const { Tooltip } = pkg;
  
  File:
    src/pages/[...slug].astro
  Stacktrace:
file:///Users/modyooperaciones/Personal/Encuesta-Colombia-Dev/dist/chunks/demografia.257a7745.mjs:5
import { Tooltip } from 'react-tooltip';
         ^^^^^^^
SyntaxError: Named export 'Tooltip' not found. The requested module 'react-tooltip' 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 'react-tooltip';
const { Tooltip } = pkg;

   at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async render (file:///Users/Mjbarr09/Personal/Encuesta-Colombia-Dev/dist/chunks/astro.14382f6a.mjs:2097:15)
    at async file:///Users/Mjbarr09/Personal/Encuesta-Colombia-Dev/dist/chunks/pages/all.9e8f938f.mjs:469:33
    at async renderPage (file:///Users/Mjbarr09/Personal/Encuesta-Colombia-Dev/node_modules/astro/dist/runtime/server/render/page.js:91:30)
    at async renderPage (file:///Users/Mjbarr09/Personal/Encuesta-Colombia-Dev/node_modules/astro/dist/core/render/core.js:81:20)
    at async generatePath (file:///Users/Mjbarr09/Personal/Encuesta-Colombia-Dev/node_modules/astro/dist/core/build/generate.js:313:18)
    at async generatePage (file:///Users/Mjbarr09/Personal/Encuesta-Colombia-Dev/node_modules/astro/dist/core/build/generate.js:140:5)
    at async generatePages (file:///Users/Mjbarr09/Personal/Encuesta-Colombia-Dev/node_modules/astro/dist/core/build/generate.js:74:7)
    at async staticBuild (file:///Users/Mjbarr09/Personal/Encuesta-Colombia-Dev/node_modules/astro/dist/core/build/static-build.js:78:7)
    at async AstroBuilder.build (file:///Users/Mjbarr09/Personal/Encuesta-Colombia-Dev/node_modules/astro/dist/core/build/index.js:122:5)
    at async AstroBuilder.run (file:///Users/Mjbarr09/Personal/Encuesta-Colombia-Dev/node_modules/astro/dist/core/build/index.js:153:7)
    at async build (file:///Users/Mjbarr09/Personal/Encuesta-Colombia-Dev/node_modules/astro/dist/core/build/index.js:37:3)
    at async runCommand (file:///Users/Mjbarr09/Personal/Encuesta-Colombia-Dev/node_modules/astro/dist/cli/index.js:168:14)
    at async cli (file:///Users/Mjbarr09/Personal/Encuesta-Colombia-Dev/node_modules/astro/dist/cli/index.js:203:5)

Desktop (please complete the following information if possible or delete this section):

• MacOS
• Chrome
• Node 16.19.0
• Astro 2.1.2

Thanks 💚

[GerkinDev]

My 2 cents on this: I noticed react-tooltip does not declare an export field, Yet, more and more bundlers rely on this to try to use ESM when possible to leverage tree shaking. I'm not sure it would solve the issue, but it might be worth giving it a try

[danielbarion]

Hi, can you try this beta version and let me know if it worked, please?

react-tooltip@5.10.1-beta.4

[jbarriospd]

Hi, it doesn't work yet:

 generating static routes 
▶ src/pages/index.astro
  └─ /index.html (+8ms)
▶ src/pages/[...slug].astro
 error   Named export 'Tooltip' not found. The requested module 'react-tooltip' 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 'react-tooltip';
  const { Tooltip } = pkg;
  
  File:
    src/pages/[...slug].astro
  Stacktrace:
file:///Users/josebarrios/Documents/projects/Encuesta-Colombia-Dev/dist/chunks/demografia.b0f766be.mjs:5
import { Tooltip } from 'react-tooltip';
         ^^^^^^^
SyntaxError: Named export 'Tooltip' not found. The requested module 'react-tooltip' 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 'react-tooltip';
const { Tooltip } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

[GerkinDev]

I can confirm the repro locally, I'm gonna try some things

[GerkinDev]

FYI, the bug does not appear in v5.8.3, but does since 5.9.0.

I got it to work by renaming the ESM dist file with .mjs extension in place of .esm.js: this explicitly indicates to the loader that it should expect an ESM-formatted file. This did the trick using exports conditions.
More in-depth indications will be commented on #982

[gabrieljablonski]

Hey @jbarriospd, sorry for the delay.

Can you let us know if react-tooltip@5.10.2-beta.4 fixes this issue? We rolled back from using esbuild back to rollup, so it should work, but I wanted to confirm.

[jbarriospd]

thanks, it works!

[gabrieljablonski]

Fix available on official release react-tooltip@5.10.5.