Deep import problem (Vite 2.0.0-beta.2)

[hmaurer]

Preface: this issue describes a bug with the firebase SDK version 7.24.0. This is an outdated version of the SDK (8.x now), but the 8.x version does not work with Vite either (though the issue appears different).

Describe the bug

Firebase's SDK involves deep imports, such as:

import "firebase/auth";

Without further action, they cause an error:

Deep import "firebase/auth" should be avoided because dependency "firebase" has been pre-optimized. Prefer importing directly from the module entry:

So far no problem. The trouble is that adding firebase/auth to optimizeDeps.include does not solve the issue. Strangely enough, for another package I used, rxjs/operators, adding it to optimizeDeps.include did solve the issue.

Reproduction

1. Start with a fresh Vite 2.0.0-beta.2 react app:

npm init @vitejs/app
cd the-app/
npm i && npm i firebase@7.24.0 --save

2. Add import "firebase/auth"; to src/App.jsx.

3. Modify vite.config.js to:

import reactRefresh from '@vitejs/plugin-react-refresh'

/**
 * @type { import('vite').UserConfig }
 */
export default {
  plugins: [reactRefresh()],
  optimizeDeps: {
    include: ["firebase/app"]
  }
}

4. Run npm run dev

You should observe the following output:

18:52:32 [vite] Internal server error:
  Plugin: vite:imports
  File: /Users/hmaurer/Developer/lab/hello-vite-2/src/App.jsx
  Error: Deep import "firebase/auth" should be avoided because dependency "firebase" has been pre-optimized. Prefer importing directly from the module entry:
  
  import { ... } from "firebase"
  
  If the used import is not exported from the package's main entry and can only be attained via deep import, you can explicitly add the deep import path to "optimizeDeps.include" in vite.config.js.
      at tryNodeResolve (/Users/hmaurer/Developer/lab/hello-vite-2/node_modules/vite/dist/node/chunks/dep-ff3dcb8d.js:48151:15)
      at Context.resolveId (/Users/hmaurer/Developer/lab/hello-vite-2/node_modules/vite/dist/node/chunks/dep-ff3dcb8d.js:48096:28)
      at Object.resolveId (/Users/hmaurer/Developer/lab/hello-vite-2/node_modules/vite/dist/node/chunks/dep-ff3dcb8d.js:60769:53)
      at processTicksAndRejections (internal/process/task_queues.js:97:5)
      at async TransformContext.resolve (/Users/hmaurer/Developer/lab/hello-vite-2/node_modules/vite/dist/node/chunks/dep-ff3dcb8d.js:60574:23)
      at async TransformContext.transform (/Users/hmaurer/Developer/lab/hello-vite-2/node_modules/vite/dist/node/chunks/dep-ff3dcb8d.js:54067:38)
      at async Object.transform (/Users/hmaurer/Developer/lab/hello-vite-2/node_modules/vite/dist/node/chunks/dep-ff3dcb8d.js:60830:30)
      at async transformRequest (/Users/hmaurer/Developer/lab/hello-vite-2/node_modules/vite/dist/node/chunks/dep-ff3dcb8d.js:66858:29)
      at async /Users/hmaurer/Developer/lab/hello-vite-2/node_modules/vite/dist/node/chunks/dep-ff3dcb8d.js:66945:32

System Info

• vite version: 2.0.0-beta.2
• Operating System: MacOS Catalina
• Node version: 12.18.4

[Ttou]

@yyx990803 这个问题在 2.0.0-beta3 里依然存在吧，我引入 element-plus/lib/theme-chalk/index.css 还是会报错：

4:34:25 PM [vite] Internal server error:
  Plugin: vite:imports
  File: /home/ttou/Projects/self/vite-demo/src/main.ts
  Error: Deep import "element-plus/lib/theme-chalk/index.css" should be avoided because dependency "element-plus" has been pre-optimized. Prefer importing directly from the module entry:
  
  import { ... } from "element-plus"

[yyx990803]

@Ttou 25adf1e