Transitive dependencies are not pre-bundled

[just-boris]

⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.

• Read the docs.
• Use Vite >=2.0. (1.x is no longer supported)
• If the issue is related to 1.x -> 2.0 upgrade, read the Migration Guide first.

Describe the bug

When a package has a commonjs dependency, it is loaded into browser without pre-bundling

Reproduction

I put up a demo here: https://github.com/just-boris/vite-awsui

When install and run it in browser, you will see the following error:

Uncaught SyntaxError: The requested module '/node_modules/balanced-match/index.js?v=52ac5a1f' does not provide an export named 'default'

This is happening, because I am using a module, which depends on balanced-match. Since it is not in my dependencies list, it is not getting pre-bundled

System Info

• vite version: 2.0.0-beta.45
• Operating System: Mac
• Node version: v15.6.0
• Package manager (npm/yarn/pnpm) and version: 7.4.0

[nrayburn-tech]

I believe you should be using include, not exclude for your optimizeDeps setting.

[just-boris]

@nrayburn-tech thanks for the comment. I added that line to get around this warning:

Deep import "@awsui/components-react/container" should be avoided because dependency "@awsui/components-react" has been pre-optimized. Prefer importing directly from the module entry

I updated the demo, and now I have even more weird error:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

This is my source App.tsx

import React from "react";
import { Container } from "@awsui/components-react";
import "@awsui/global-styles/index.css";

function App() {
  return <Container>Test content</Container>;
}

export default App;

this is what I receive in the browser:

import __vite__cjsImport0_react from "/node_modules/.vite/react/index.js?v=82aa6671"
const React = __vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react.default : __vite__cjsImport0_react;
import __vite__cjsImport1__awsui_componentsReact from "/node_modules/.vite/react/index.js?v=82aa6671"
const Container = __vite__cjsImport1__awsui_componentsReact["Container"];
import "/node_modules/@awsui/global-styles/index.css?v=82aa6671";
function App() {
  return /* @__PURE__ */ React.createElement(Container, null, "Test content");
}
export default App;

Note the line import __vite__cjsImport1__awsui_componentsReact from "/node_modules/.vite/react/index.js?v=82aa6671"

For some reason the import was mapped to react and not the UI-library. Perhaps it is caused by both paths ending with react? This is strange

[nrayburn-tech]

I submitted a PR against your repo to get it working. Currently, the optimizeDeps.include option only supports specific files. So you have to specify @awsui/components-react/container and not just , @awsui/components-react. There is an open issue to support glob patterns for this, #1545.

When trying to import in what would be the ideal way, import { Container } from "@awsui/components-react";', Container is undefined. I just assumed this was an issue with the library not exporting correctly, but it could be something else. I didn't want to spend anytime looking into it without the AWS code or documentation being available.

[yyx990803]

This is a bug I'm fixing.

[just-boris]

Tested 2.0.0-beta.49 works as expected, thank you for the quick fix!