Skip to content

optimizeDeps.exclude removes default property from exports #10258

@sagargurtu

Description

@sagargurtu

Describe the bug

When a dependency is added in optimizeDeps.exclude, it injects __reExport during dependency pre-bundling (link) which removes default property.

Steps to reproduce:

  • Copy the project from https://stackblitz.com/edit/vitejs-vite-u5bre3 to a local dev environment since StackBlitz doesn't show node_modules/ directory.
  • The vite configuration is doing two things:
    • Excluding react from optimizeDeps.
    • Declaring a plugin that marks react imports as external and replaces them with external ESM URLs.
  • Start dev server and open the URL. It throws error in browser console.
  • Search node_modules/.vite/deps for a chunk file that contains // external:react. It has the following code snippet:
    // external:react
    var react_exports = {};
    import * as react_star from "react";
    var init_react = __esm({
      "external:react"() {
        __reExport(react_exports, react_star);
      }
    });
    
  • __reExport removes default property from react import:
    var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
    
  • Comment out lines 7-12 (both inclusive) in src/index.tsx. Refresh the webpage, it loads the UI without error.
  • Alternatively, comment out optimizeDeps and plugin implementation from vite config. Refresh the webpage, it loads the UI without error.
  • Issue: theming.esm.js is trying to access React.Component but it is undefined because react_exports does not contain "default" property.

Reproduction

https://stackblitz.com/edit/vitejs-vite-u5bre3

System Info

System:
  OS: Linux 5.0 undefined
  CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 0 Bytes / 0 Bytes
  Shell: 1.0 - /bin/jsh
Binaries:
  Node: 16.14.2 - /usr/local/bin/node
  Yarn: 1.22.10 - /usr/local/bin/yarn
  npm: 7.17.0 - /usr/local/bin/npm
npmPackages:
  @vitejs/plugin-react: ^2.1.0 => 2.1.0 
  vite: ^3.1.3 => 3.1.3

Used Package Manager

npm

Logs

Console Error:

Uncaught TypeError: Cannot read properties of undefined (reading 'Component')
    at createThemeProvider (theming.js?v=288fcf31:403:27)
    at createTheming (theming.js?v=288fcf31:443:20)
    at theming.js?v=288fcf31:447:22

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    feat: deps optimizerEsbuild Dependencies Optimizationp3-minor-bugAn edge case that only affects very specific usage (priority)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions