Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
hzy opened this issue Jan 27, 2025 · 6 comments · Fixed by web-infra-dev/rspack#9390
Open

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

hzy opened this issue Jan 27, 2025 · 6 comments · Fixed by web-infra-dev/rspack#9390
Labels
Rspack Rspack related issue

Comments

@hzy
Copy link

hzy commented Jan 27, 2025

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

@chenjiahan
Copy link
Member

Related issue: #351

@fi3ework
Copy link
Member

fi3ework commented Jan 27, 2025

I'll check if the exports info could be get and added from Rslib side, otherwise we might add this from Rspack side.

@hai-x
Copy link

hai-x commented Feb 19, 2025

I'll check if the exports info could be get and added from Rslib side, otherwise we might add this from Rspack side.

In webpack we have commonjs-static(related issue ). But it doesn't work when with runtimeChunk in webpack and it never works in rspack because exports.foo = __webpack_exports__.foo; is missing.

webpack:
Image

rspack:

Image

@fi3ework fi3ework added the Rspack Rspack related issue label Feb 19, 2025
@fi3ework
Copy link
Member

@hai-x We might lose porting some code in Rspack, will take a look later.

@hai-x
Copy link

hai-x commented Feb 19, 2025

@hai-x We might lose porting some code in Rspack, will take a look later.

If you don't mind, I can help it.

@fi3ework
Copy link
Member

@hai-x Of course not, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Rspack Rspack related issue
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants