Vite: Support named exports in cjs libraries for optimizer

[Akiyamka]

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

[Akiyamka]

interesting note: vite build not fall in this place.

[hc-codersatlas]

Have you tried to add it to the include list of optimizeDeps?

[underfin]

Anyone can give a whole repo for this?

[Akiyamka]

@underfin yep, I create canonical example from docs of react-dynamic-modules, but using vite instead webpack. Vite can't build it correctly.
https://github.com/Akiyamka/vite-fail-build-repro

[zhangyuang]

@Akiyamka @underfin looks like a module compile error cause by use export default

[zhangyuang]

@Akiyamka please use following code and add redux-dynamic-modules-core in dependencies

import Core from "redux-dynamic-modules-core";
Core.createStore

[zhangyuang]

the module redux-dynamic-modules-core with cjs compiled by rollup with @rollup/plugin-commonjs
in vite generate code use export default
maybe it's a bug

[lukastaegert]

interesting note: vite build not fall in this place.

When running vite build, Rollup is able to interpolate undetected named exports by means of a feature called syntheticNamedExports. This is not possible when transpiling on a file-by-file basis.

please use following code and add redux-dynamic-modules-core in dependencies

import Core from "redux-dynamic-modules-core";
Core.createStore

I fear this is the only way to make it work during development. This is also how you would consume CommonJS modules in Node, by the way.

but using vite instead webpack

Webpack does not suffer from this because it is not transpiling CJS to ESM as Rollup is. Named exports are just treated as properties on the exports object. This is the same that Rollup is doing in vite build via syntheticNamedExports. But in able to run modules directly in the browser during development, this is just impossible unless vite does also rewrite all imports to import the default and access properties. Which might be possible but should only be done if the target is CommonJS so it will likely make things a bit slower because Vite will need to inspect the target first.

My big recommendation would be to create an issue for redux-dynamic-modules to provide a proper ESM build, though, or adapt their documentation to mention that their package cannot be used with named exports in a browser, and that by providing only a CommonJS build but promoting the use of named exports, they are relying on non-standardized custom behaviour in some bundlers instead of open web standards.

[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.

[Akiyamka]

@lukastaegert,

My big recommendation would be to create an issue for redux-dynamic-modules to provide a proper ESM build

Thank you for clarifying what is happening. You are right about the fact that is to apply to the maintainers in order that they have fixed the behavior to the appropriate specifications.

But before doing so, there should be some voiced interest from Vite developers to support this at all.
If such packages will be a lot of it will bring a lot of inconvenience to users.
I think that if issues like this will be quite a lot, vite maintainers will need to add a flag in the configuration or something like this.

[underfin]

But before doing so, there should be some voiced interest from Vite developers to support this at all.

@lukastaegert Thanks for your support this,I'm willing work for it.

My big recommendation would be to create an issue for redux-dynamic-modules to provide a proper ESM build

That is also vite recommend to do and push the ecosystem forward to support es6 module.

[lukastaegert]

I think that if issues like this will be quite a lot

That is my fear as well, considering React itself has been guilty of this pattern for a long time.

vite maintainers will need to add a flag in the configuration or something like this.

Putting this behind a flag seems sensible as another drawback would be that it would prevent live-bindings between modules. Which is likely not an issue for many, but still. So there would still be some pressure for libraries to adopt native ES modules.

[underfin]

Yeah.Thanks for you suggestion.

We could support this from @rollup/plugin-commonjs by exposing the results of our CommonJS detection

Hope hear this progress, thanks.

[lukastaegert]

Out of curiosity, could someone point me to the code where Vite is transpiling CommonJS in the dev server? Is it just using @rollup/plugin-commonjs or also other rollup parts?

[underfin]

could someone point me to the code where Vite is transpiling CommonJS in the dev server

Here.I it run the optimizer, it will bundle cjs before dev server start.
https://github.com/vitejs/vite/blob/e24133e51cb9d2fc4a338a6efd44a455978e5020/src/node/optimizer/index.ts#L182-L193

Is it just using @rollup/plugin-commonjs or also other rollup parts

It include @rollup/plugin-node-resolve , rollup-plugin-dynamic-import-variables, @rollup/plugin-json, @rollup/plugin-vue etc, you can see used plugins in the context with above code.

[lukastaegert]

So the dev server is not translating dependencies on-demand? Because I thought these were the issues we talked about. Or is this only done for CommonJS/dependencies only? But maybe I should actually set up a project to get a feeling for this to see how we can best help you here and how the issues above actually come to pass.

[underfin]

So the dev server is not translating dependencies on-demand?

Yeah, but that only support es module.The common js module must be transform to es module at first and then can use it inside vite .

Or is this only done for CommonJS/dependencies only?

No.The optimizer is also can optimize es6 module which contains many sub-package imported.

The repo https://github.com/Akiyamka/vite-fail-build-repro is here.

[underfin]

Maybe we can just scan the content whether inculde exports require to judgement the module is a common js module and add below logic if it is and it used in vite. @lukastaegert What do you think?

// 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;

[lukastaegert]

If you just scan if the content contains these as sub-strings, there is a big risk of false positives which will cause more issues. Now what @rollup/plugin-commonjs is already doing is

• a pre-flight keyword scan as you described
• if that one is positive, then the file will be parsed where it is checking if there are any ES module specific elements in the file and whether it is actually using the global require/module variables
• from this, a table is created which modules are CommonJS and which are ES modules

So what we could do is give you access to this table from the plugin in some way. It will not be 100% straightforward, in your case you would likely have another plugin "talk" to the commonjs plugin (via a yet-to-be-created API, but really not too complicated) to get this table at the end of the build.

Now what this will give you is a mapping of resolved module ids, i.e. full path names, to a boolean if Rollup thinks these files are CommonJS. Would this be enough for you?

[underfin]

@lukastaegert.Yeah, that are sounds great.

[clouds56]

I'm not sure if related here, I'm using babylon.js with its loaders.
The guide suggest to write

import * as BABYLON from 'babylonjs';
import 'babylonjs-loaders';

But in dev, the babylonjs-loaders would generate code like this (I think these code are generated by vite, since I could not find string __moduleExports in package babylonjs-loaders)

import {c as createCommonjsModule, b as babylon, a as commonjsGlobal} from '/@modules/common/babylon-ae6b791e.js';
...
module.exports = t(babylon.__moduleExports);

where babylon.__moduleExports is undefined.

I'd like to have this code just works, and is there any workaround now?

[csr632]

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