Dynamic import of a peer dependency causes inconsistencies between dev and prod

[wijionejs]

Describe the bug

Issue

I've carefully read plenty of similar issues, but most of them had been already fixed and none of them had my exact structure. Any help is appreciated.

I have a couple of components in my architecture:

• a library called library-with-dynamic-import;
• a library's peer dependency markdown-to-text (was taken just as an example);
• an actual application.

The library-with-dynamic-import library adds markdown-to-text as a peer dependency to its package.json and imports it using dynamic import:

import('markdown-to-text').then(mod => console.log(mod));

Then, the library's source code is built using vite library mode (the config can be found in the library's source code here) and published to the public npm registry.

The application, in its turn, installs library-with-dynamic-import and its peer dependency markdown-to-text.

In prod build everything is fine and here what I'm seeing in the console:

However, whenever I run the development mode, the issue arises:

As you can see from the screenshot above, there is an extra nested default in the module's object, which of course creates inconsistencies between the development and prod modes and breaks the application.

Note

If I move markdown-to-text from peerDependencies to dependencies, everything works fine in both the development and prod modes.

In a separate branch I've created a reproduction of when markdown-to-text is removed from peerDependencies and added to dependencies and built inside library-with-dynamic-import. You can verify that in this case everything is fine: https://github.com/wijionejs/vite-bug-reproduction/tree/branch_without_peer_deps

My findings

Here some of my findings that might be helpful (or not) for debugging!

Finding 1

If dynamic import of markdown-to-text is only present in library-with-dynamic-import, when library-with-dynamic-import is optimized, its dynamic import is not modified except for the path (see screenshots below).

Application main.js file:

Optimized library-with-dynamic-import:

Finding 2

If I also add dynamic import of markdown-to-text to the application source code, both the application's dynamic import and library-with-dynamic-import is modified with some additional logic.

Application main.js file:

Optimized library-with-dynamic-import:

Reproduction

https://github.com/wijionejs/vite-bug-reproduction

Steps to reproduce

1. Clone the repository.
2. Install the dependencies with pnpm install.
3. Build the project with pnpm build.
4. Run the preview mode with pnpm preview.
   4.1. Open the console and see the output.
5. Run the development mode with pnpm dev.
   5.1. Open the console and see the output

Actual result: Everything works as expected in the prod build. However, there is an extra nested default in the development mode.

Expected result: Both the development and prod modes have the same output in the console.

System Info

System:
    OS: macOS 13.6.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 234.35 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.3.1 - ~/.asdf/installs/nodejs/20.3.1/bin/node
    Yarn: 1.22.21 - ~/.asdf/installs/nodejs/20.3.1/.npm/bin/yarn
    npm: 9.6.7 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 8.6.11 - ~/.asdf/installs/nodejs/20.3.1/.npm/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.62
    Safari: 16.6
  npmPackages:
    vite: ^5.2.0 => 5.2.0

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[wijionejs]

I'm not sure whether it is a workaround for the bug or a real solution, but if I explicitly add markdown-to-text to optimizeDeps, it starts working correctly.

// vite.config.js
import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    include: ['markdown-to-text']
  }
});

Shouldn't it be optimized by default, given that markdown-to-text is a dependency written in commonjs?

[hi-ogawa]

Thanks for investigating. I was also checking your reproduction and made something simpler on my own https://github.com/hi-ogawa/reproductions/tree/main/vite-17529-transitive-dynamic-cjs

I think the issue a bit more nuanced and it appears that when you have dynamic import of cjs dep inside your direct dependency, such cjs dep misses "interop" step. The comment around the code below indicates this behavior is intended, but it looks like a source of inconsistency nonetheless, so probably it's fair to say this is a bug.
(I was wondering if such inconsistency can be reproduced on esbuild alone, but haven't check that yet.)

vite/packages/vite/src/node/plugins/importAnalysis.ts

Lines 570 to 573 in ec16a5e

	if (needsInterop === undefined) {
	// Non-entry dynamic imports from dependencies will reach here as there isn't
	// optimize info for them, but they don't need es interop. If the request isn't
	// a dynamic import, then it is an internal Vite error