Skip to content

[Bug]: No commonjs export names annotations generated #714

Open
@hzy

Description

Version

System:
    OS: Linux 5.15 veLinux GNU/Linux 2 (lyra) 2 (lyra)
    CPU: (56) x64 Intel(R) Xeon(R) Platinum 8336C CPU @ 2.30GHz
    Memory: 99.78 GB / 109.89 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  npmPackages:
    @rslib/core: 0.3.2 => 0.3.2

Details

Background

My package need to be bundled and must has commonjs format, I don't want to double the publish size so "Ship ESM & CJS in one Package
" was not not taken into consideration.

Problem

When bundle with esbuild, a annotation will be generated:

// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  reactLynxPlugin
});

I did not find this kind annotation in rslib output.

This will cause problems:

  1. can not use named import from esm
    import { reactLynxPlugin } from './speedy-plugin/dist/index.js';
             ^^^^^^^^^^^^^^^
    SyntaxError: Named export 'reactLynxPlugin' not found. The requested module './speedy-plugin/dist/index.js' is a CommonJS module, which may not support all module.exports as named exports.
    CommonJS modules can always be imported via the default export, for example using:
    
    import pkg from './speedy-plugin/dist/index.js';
    const { reactLynxPlugin } = pkg;
    
        at ModuleJob._instantiate (node:internal/modules/esm/module_job:180:21)
        at async ModuleJob.run (node:internal/modules/esm/module_job:263:5)
        at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:547:26)
        at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:116:5)
    
    Node.js v22.12.0
    
  2. some lint tool like attw will fail
     🕵️ TypeScript allows ESM named imports of the properties of this CommonJS module, but they will crash at runtime because they don’t exist or can’t be statically detected by Node.js in the JavaScript file. Use -f json to see the list of exports TypeScript can see but Node.js cannot. https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/NamedExports.md
     
     
     ┌───────────────────┬───────────────────────────────────┐
     │                   │ "@xxxx-xxxx/xxxxx-plugin-react" │
     ├───────────────────┼───────────────────────────────────┤
     │ node10            │ 🟢                                │
     ├───────────────────┼───────────────────────────────────┤
     │ node16 (from CJS) │ 🟢 (CJS)                          │
     ├───────────────────┼───────────────────────────────────┤
     │ node16 (from ESM) │ 🕵️ Named exports                  │
     ├───────────────────┼───────────────────────────────────┤
     │ bundler           │ 🟢                                │
     └───────────────────┴───────────────────────────────────┘
        
    

Reproduce link

https://esbuild.github.io/try/#YgAwLjI0LjIALS1idW5kbGUgLS1wbGF0Zm9ybT1ub2RlIC0tdGFyZ2V0PW5vZGUxNiAtLWZvcm1hdD1janMAZQBlbnRyeS5qcwBjb25zdCByZWFjdEx5bnhQbHVnaW4gPSB7fQpleHBvcnQgeyByZWFjdEx5bnhQbHVnaW4gfQ

Reproduce Steps

  1. Create a rslib project with config below:

    import { defineConfig } from '@rslib/core';
    
    export default defineConfig({
      lib: [
        {
          format: 'cjs',
          syntax: 'es2021',
          autoExternal: false,
        },
      ],
      output: {
        target: 'node',
      },
    });
  2. Create a entry at src/index.ts with content below:

    const reactLynxPlugin = {}
    export { reactLynxPlugin }
  3. Run rslib. The bundle result contains no commonjs export names annotation

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions