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

Issue with hybrid module import when using cjs #2976

Open
euberdeveloper opened this issue Mar 9, 2023 · 5 comments
Open

Issue with hybrid module import when using cjs #2976

euberdeveloper opened this issue Mar 9, 2023 · 5 comments

Comments

@euberdeveloper
Copy link

I am building a module with esbuild. It uses euberlog as a dependency, which is an hybrid module providing both esm and cjs support.

In my code I therefore use:

import logger from 'euberlog';

And then I compile it with esbuild:

const shared = {
        platform: 'node',
        entryPoints: ['source/index.ts'],
        bundle: true,
        minify: true,
        treeShaking: true,
        sourcemap: true
    };

    build({
        ...shared,
        outfile: 'bundled/lib/commonjs/index.js',
        format: 'cjs',
        external: getExternalDependencies()
    });

It is actually built both for esm and cjs.
The problem is that if I import the cjs module somewhere, I have the error:

TypeError: i.default.info is not a function

and then if I patch the code and print i, I see that the result is:

{ default: { Logger: [Getter], default: [Getter] }, Logger: [Getter] }

It seems like that esbuild translates the first import (import logger from 'euberlog') as import * as logger from 'euberlog', but this does not make sense.

@evanw
Copy link
Owner

evanw commented Mar 9, 2023

I don't think I can reproduce this given your description. Here's the code I tried:

import logger_esm from 'euberlog'
logger_esm.info('esm')

const logger_cjs = require('euberlog').default
logger_cjs.info('cjs')

Bundling that with esbuild --bundle index.ts --outfile=out.js --platform=node produces a file that prints this:

[INFO] esm
[INFO] cjs

So everything seems fine. You have to provide a way to independently reproduce your issue in your issue report.

@euberdeveloper
Copy link
Author

euberdeveloper commented Mar 10, 2023

The source code for the cjs does not use require, it uses import logger from 'euberlog'

Then, via typescript, it is built in a wrong way, I think by esbuild

Here is the repo I'm using, the command is npm run bundle and the cjs output is in /bundled/lib/commonjs

@euberdeveloper
Copy link
Author

The source code for the cjs does not use require, it uses import logger from 'euberlog'

Then, via typescript, it is built in a wrong way, I think by esbuild

Here is the repo I'm using, the command is npm run bundle and the cjs output is in /bundled/lib/commonjs

Does this add enough information to replicate the issue?

@lxsmnsyc
Copy link

lxsmnsyc commented Mar 30, 2023

I think I'm experiencing this breaking behavior with my packages. If I have the following code in my package:

// example-cjs
export default function example() {
  // some code
}

and import it like this

import example from 'example-cjs';

console.log(example);

It logs { default: [Getter] } which doesn't makes sense at all. I'll try to make a repro soon.

Edit:
Here's the repro: https://gist.github.com/lxsmnsyc/e7746ed2ebd31c421eaf4bc33c1962a3

@euberdeveloper
Copy link
Author

Any news?

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

No branches or pull requests

3 participants