Support named exports in cjs libraries for optimizer

Describe the bug

Fresh Vite app with react template.

From

import { createStore } from 'redux-dynamic-modules';

Vite generate:

import {createStore} from "/@modules/redux-dynamic-modules.js";

But this code crush with Chrome

Uncaught SyntaxError: The requested module '/@modules/redux-dynamic-modules.js' does not provide an export named 'createStore'

Firefox

Uncaught SyntaxError: import not found: createStore

How it exported https://github.com/microsoft/redux-dynamic-modules/blob/8d9bbbbb037abeae2b3f4f62345668097c0f8015/packages/redux-dynamic-modules-core/src/ModuleStore.ts#L99

At least with webpack it’s work fine

Reproduction

I can create repo with this single import if required

System Info

• required vite version: v1.0.0-rc.4
• required Operating System: Fedora 32 (Workstation Edition) x86_64
• required Node version: v14.5.0
• Optional:
  • npm/yarn version: yarn 1.22.4

Logs

Debug logs

vite v1.0.0-rc.4
  vite:config env mode: development +0ms
  vite:config env: {} +1ms
  vite:config config resolved in 114ms +1ms
  vite:optimize Hash is consistent. Skipping. Use --force to override. +0ms

  Dev server running at:
  > Local:    http://localhost:3000/
  > Network:  http://192.168.1.41:3000/

  vite:server server ready in 206ms. +0ms
  vite:rewrite /: rewriting +0ms
  vite:hmr         / imports /@react-refresh +0ms
  vite:rewrite     nothing needs rewriting. +3ms
  vite:rewrite /: no imports found. +0ms
  vite:hmr         / imports /src/main.tsx +1ms
  vite:rewrite (skipped) / +1ms
  vite:rewrite /: serving from cache +0ms
  vite:rewrite (skipped) / +83ms
  vite:rewrite /runtimeConfigLoader.js: no imports found. +256ms
  vite:rewrite /src/main.tsx: rewriting +19ms
  vite:resolve failed to resolve package.json for @pika/react/source.development.js +0ms
  vite:rewrite     "react" --> "/@modules/@pika/react/source.development.js" +2ms
  vite:hmr         /src/main.tsx imports /@modules/@pika/react/source.development.js +361ms
  vite:resolve failed to resolve package.json for @pika/react-dom/source.development.js +1ms
  vite:rewrite     "react-dom" --> "/@modules/@pika/react-dom/source.development.js" +1ms
  vite:hmr         /src/main.tsx imports /@modules/@pika/react-dom/source.development.js +1ms
  vite:rewrite     "react-redux" --> "/@modules/react-redux.js" +0ms
  vite:hmr         /src/main.tsx imports /@modules/react-redux.js +0ms
  vite:resolve (postfix) /home/app-name/src/store -> /home/app-name/src/store/index.ts +1ms
  vite:rewrite     "./store" --> "/src/store/index.ts" +0ms
  vite:hmr         /src/main.tsx imports /src/store/index.ts +0ms
  vite:rewrite     "./main.css" --> "/src/main.css?import" +0ms
  vite:hmr         /src/main.tsx imports /src/main.css +0ms
  vite:resolve (postfix) /home/app-name/src/routes/root -> /home/app-name/src/routes/root/index.tsx +1ms
  vite:rewrite     "./routes/root" --> "/src/routes/root/index.tsx" +1ms
  vite:hmr         /src/main.tsx imports /src/routes/root/index.tsx +1ms
  vite:resolve (node_modules) @pika/react/source.development.js -> node_modules/@pika/react/source.development.js +0ms
  vite:resolve (node_modules) @pika/react-dom/source.development.js -> node_modules/@pika/react-dom/source.development.js +1ms
  vite:resolve (optimized) react-redux.js -> node_modules/.vite_opt_cache/react-redux.js +1ms
  vite:rewrite /@modules/@pika/react/source.development.js: no imports found. +27ms
  vite:rewrite /@modules/@pika/react-dom/source.development.js: rewriting +19ms
  vite:resolve failed to resolve package.json for @pika/react/source.development.js +71ms
  vite:rewrite     "react" --> "/@modules/@pika/react/source.development.js" +25ms
  vite:hmr         /@modules/@pika/react-dom/source.development.js imports /@modules/@pika/react/source.development.js +71ms
  vite:rewrite /@modules/react-redux.js: rewriting +10ms
  vite:resolve failed to resolve package.json for @pika/react/source.development.js +10ms
  vite:rewrite     "@pika/react/source.development.js" --> "/@modules/@pika/react/source.development.js" +0ms
  vite:hmr         /@modules/react-redux.js imports /@modules/@pika/react/source.development.js +11ms
  vite:rewrite     "./common/_commonjsHelpers-38687f85.js" --> "/@modules/common/_commonjsHelpers-38687f85.js" +1ms
  vite:hmr         /@modules/react-redux.js imports /@modules/common/_commonjsHelpers-38687f85.js +0ms
  vite:rewrite     "./common/index-1e6e5f11.js" --> "/@modules/common/index-1e6e5f11.js" +0ms
  vite:hmr         /@modules/react-redux.js imports /@modules/common/index-1e6e5f11.js +0ms
  vite:rewrite     "./common/objectWithoutPropertiesLoose-0056600f.js" --> "/@modules/common/objectWithoutPropertiesLoose-0056600f.js" +0ms
  vite:hmr         /@modules/react-redux.js imports /@modules/common/objectWithoutPropertiesLoose-0056600f.js +0ms
  vite:rewrite     "./common/redux-e5eb5344.js" --> "/@modules/common/redux-e5eb5344.js" +0ms
  vite:hmr         /@modules/react-redux.js imports /@modules/common/redux-e5eb5344.js +0ms
  vite:resolve failed to resolve package.json for @pika/react-dom/source.development.js +2ms
  vite:rewrite     "@pika/react-dom/source.development.js" --> "/@modules/@pika/react-dom/source.development.js" +1ms
  vite:hmr         /@modules/react-redux.js imports /@modules/@pika/react-dom/source.development.js +1ms
  vite:rewrite (skipped) /vite/client +46ms
  vite:rewrite /@react-refresh: no imports found. +2ms
  vite:rewrite /src/store/index.ts: rewriting +61ms
  vite:rewrite     "redux-dynamic-modules" --> "/@modules/redux-dynamic-modules.js" +0ms
  vite:hmr         /src/store/index.ts imports /@modules/redux-dynamic-modules.js +109ms
  vite:rewrite     "redux-dynamic-modules-saga" --> "/@modules/redux-dynamic-modules-saga.js" +0ms
  vite:hmr         /src/store/index.ts imports /@modules/redux-dynamic-modules-saga.js +0ms
  vite:resolve (postfix) /home/app-name/src/store/k2-store-modules -> /home/app-name/src/store/k2-store-modules.ts +109ms
  vite:rewrite     "./k2-store-modules" --> "/src/store/k2-store-modules.ts" +1ms
  vite:hmr         /src/store/index.ts imports /src/store/k2-store-modules.ts +1ms
  vite:rewrite /src/routes/root/index.tsx: rewriting +0ms
  vite:hmr         /src/routes/root/index.tsx imports /@react-refresh +0ms
  vite:resolve failed to resolve package.json for @pika/react/source.development.js +1ms
  vite:rewrite     "react" --> "/@modules/@pika/react/source.development.js" +0ms
  vite:hmr         /src/routes/root/index.tsx imports /@modules/@pika/react/source.development.js +0ms
  vite:rewrite     "./style.module.styl" --> "/src/routes/root/style.module.styl?import" +0ms
  vite:hmr         /src/routes/root/index.tsx imports /src/routes/root/style.module.styl +0ms
  vite:hmr rewriting /src/routes/root/index.tsx for HMR. +0ms
  vite:hmr /src/routes/root/index.tsx self accepts +5ms
  vite:resolve (optimized) common/_commonjsHelpers-38687f85.js -> node_modules/.vite_opt_cache/common/_commonjsHelpers-38687f85.js +181ms
  vite:resolve (optimized) common/index-1e6e5f11.js -> node_modules/.vite_opt_cache/common/index-1e6e5f11.js +0ms
  vite:resolve (optimized) common/objectWithoutPropertiesLoose-0056600f.js -> node_modules/.vite_opt_cache/common/objectWithoutPropertiesLoose-0056600f.js +0ms
  vite:resolve (optimized) common/redux-e5eb5344.js -> node_modules/.vite_opt_cache/common/redux-e5eb5344.js +1ms
  vite:rewrite /@modules/common/_commonjsHelpers-38687f85.js: no imports found. +10ms
  vite:rewrite /@modules/common/objectWithoutPropertiesLoose-0056600f.js: no imports found. +1ms
  vite:rewrite /@modules/common/index-1e6e5f11.js: rewriting +2ms
  vite:resolve failed to resolve package.json for @pika/react/source.development.js +14ms
  vite:rewrite     "@pika/react/source.development.js" --> "/@modules/@pika/react/source.development.js" +1ms
  vite:hmr         /@modules/common/index-1e6e5f11.js imports /@modules/@pika/react/source.development.js +9ms
  vite:rewrite     "./_commonjsHelpers-38687f85.js" --> "/@modules/common/_commonjsHelpers-38687f85.js" +0ms
  vite:hmr         /@modules/common/index-1e6e5f11.js imports /@modules/common/_commonjsHelpers-38687f85.js +0ms
  vite:rewrite     "./objectWithoutPropertiesLoose-0056600f.js" --> "/@modules/common/objectWithoutPropertiesLoose-0056600f.js" +1ms
  vite:hmr         /@modules/common/index-1e6e5f11.js imports /@modules/common/objectWithoutPropertiesLoose-0056600f.js +1ms
  vite:rewrite     "./redux-e5eb5344.js" --> "/@modules/common/redux-e5eb5344.js" +0ms
  vite:hmr         /@modules/common/index-1e6e5f11.js imports /@modules/common/redux-e5eb5344.js +0ms
  vite:resolve failed to resolve package.json for @pika/react-dom/source.development.js +1ms
  vite:rewrite     "@pika/react-dom/source.development.js" --> "/@modules/@pika/react-dom/source.development.js" +1ms
  vite:hmr         /@modules/common/index-1e6e5f11.js imports /@modules/@pika/react-dom/source.development.js +1ms
  vite:rewrite /@modules/common/redux-e5eb5344.js: no imports found. +3ms
  vite:rewrite (skipped) /app.config.json +2ms
  vite:rewrite (skipped) /src/main.css?import +4ms
  vite:resolve (optimized) redux-dynamic-modules.js -> node_modules/.vite_opt_cache/redux-dynamic-modules.js +232ms
  vite:resolve (optimized) redux-dynamic-modules-saga.js -> node_modules/.vite_opt_cache/redux-dynamic-modules-saga.js +1ms
  vite:hmr ws client connected +226ms
  vite:rewrite /@modules/redux-dynamic-modules.js: rewriting +219ms
  vite:resolve failed to resolve package.json for @pika/react/source.development.js +229ms
  vite:rewrite     "@pika/react/source.development.js" --> "/@modules/@pika/react/source.development.js" +0ms
  vite:hmr         /@modules/redux-dynamic-modules.js imports /@modules/@pika/react/source.development.js +2ms
  vite:rewrite     "./common/_commonjsHelpers-38687f85.js" --> "/@modules/common/_commonjsHelpers-38687f85.js" +1ms
  vite:hmr         /@modules/redux-dynamic-modules.js imports /@modules/common/_commonjsHelpers-38687f85.js +1ms
  vite:rewrite     "./common/index-1e6e5f11.js" --> "/@modules/common/index-1e6e5f11.js" +0ms
  vite:hmr         /@modules/redux-dynamic-modules.js imports /@modules/common/index-1e6e5f11.js +0ms
  vite:rewrite     "./common/objectWithoutPropertiesLoose-0056600f.js" --> "/@modules/common/objectWithoutPropertiesLoose-0056600f.js" +0ms
  vite:hmr         /@modules/redux-dynamic-modules.js imports /@modules/common/objectWithoutPropertiesLoose-0056600f.js +0ms
  vite:rewrite     "./common/redux-e5eb5344.js" --> "/@modules/common/redux-e5eb5344.js" +0ms
  vite:hmr         /@modules/redux-dynamic-modules.js imports /@modules/common/redux-e5eb5344.js +0ms
  vite:resolve failed to resolve package.json for @pika/react-dom/source.development.js +2ms
  vite:rewrite     "@pika/react-dom/source.development.js" --> "/@modules/@pika/react-dom/source.development.js" +1ms
  vite:hmr         /@modules/redux-dynamic-modules.js imports /@modules/@pika/react-dom/source.development.js +1ms
  vite:rewrite     "./common/index-6f270b2e.js" --> "/@modules/common/index-6f270b2e.js" +0ms
  vite:hmr         /@modules/redux-dynamic-modules.js imports /@modules/common/index-6f270b2e.js +0ms
  vite:rewrite /@modules/redux-dynamic-modules-saga.js: rewriting +1ms
  vite:rewrite     "./common/_commonjsHelpers-38687f85.js" --> "/@modules/common/_commonjsHelpers-38687f85.js" +0ms
  vite:hmr         /@modules/redux-dynamic-modules-saga.js imports /@modules/common/_commonjsHelpers-38687f85.js +1ms
  vite:rewrite     "./common/objectWithoutPropertiesLoose-0056600f.js" --> "/@modules/common/objectWithoutPropertiesLoose-0056600f.js" +1ms
  vite:hmr         /@modules/redux-dynamic-modules-saga.js imports /@modules/common/objectWithoutPropertiesLoose-0056600f.js +1ms
  vite:rewrite     "./common/redux-e5eb5344.js" --> "/@modules/common/redux-e5eb5344.js" +0ms
  vite:hmr         /@modules/redux-dynamic-modules-saga.js imports /@modules/common/redux-e5eb5344.js +0ms
  vite:rewrite     "./common/index-6f270b2e.js" --> "/@modules/common/index-6f270b2e.js" +0ms
  vite:hmr         /@modules/redux-dynamic-modules-saga.js imports /@modules/common/index-6f270b2e.js +0ms
  vite:rewrite     "./common/redux-saga-core.esm-abc5af93.js" --> "/@modules/common/redux-saga-core.esm-abc5af93.js" +0ms
  vite:hmr         /@modules/redux-dynamic-modules-saga.js imports /@modules/common/redux-saga-core.esm-abc5af93.js +0ms
  vite:rewrite (skipped) /src/routes/root/style.module.styl?import +155ms
  vite:rewrite (skipped) /src/store/k2-store-modules.ts +2ms
  vite:resolve (optimized) common/index-6f270b2e.js -> node_modules/.vite_opt_cache/common/index-6f270b2e.js +164ms
  vite:resolve (optimized) common/redux-saga-core.esm-abc5af93.js -> node_modules/.vite_opt_cache/common/redux-saga-core.esm-abc5af93.js +1ms
  vite:rewrite /@modules/common/index-6f270b2e.js: rewriting +2ms
  vite:rewrite     "./_commonjsHelpers-38687f85.js" --> "/@modules/common/_commonjsHelpers-38687f85.js" +1ms
  vite:hmr         /@modules/common/index-6f270b2e.js imports /@modules/common/_commonjsHelpers-38687f85.js +160ms
  vite:rewrite     "./redux-e5eb5344.js" --> "/@modules/common/redux-e5eb5344.js" +1ms
  vite:hmr         /@modules/common/index-6f270b2e.js imports /@modules/common/redux-e5eb5344.js +1ms
  vite:rewrite /@modules/common/redux-saga-core.esm-abc5af93.js: rewriting +2ms
  vite:rewrite     "./objectWithoutPropertiesLoose-0056600f.js" --> "/@modules/common/objectWithoutPropertiesLoose-0056600f.js" +2ms
  vite:hmr         /@modules/common/redux-saga-core.esm-abc5af93.js imports /@modules/common/objectWithoutPropertiesLoose-0056600f.js +4ms
  vite:rewrite     "./redux-e5eb5344.js" --> "/@modules/common/redux-e5eb5344.js" +0ms
  vite:hmr         /@modules/common/redux-saga-core.esm-abc5af93.js imports /@modules/common/redux-e5eb5344.js +0ms
  vite:history not redirecting /favicon.ico (not accepting html) +0ms
  vite:rewrite (skipped) /favicon.ico +262ms

[csr632]

This should be fixed by https://github.com/vitejs/vite/pull/837

[lukastaegert]

So the only actionable point I see for now to solve this in a general way would be for vite to rewrite named imports to property accesses on the default import, e.g.

// before
import {foo} from 'bar';

// output if 'bar' is originally CommonJS
import _$viteDefault from 'bar'; // just something that is unlikely to conflict with anything, otherwise you need to do deeper scope analysis
const {foo} = _$viteDefault;

We could support this from @rollup/plugin-commonjs by exposing the results of our CommonJS detection. This would save you the need to do content sniffing yourselves. But before doing so, there should be some voiced interest from Vite developers to support this at all.