nx: @nx/rollup built library errors when using new .cjs.mjs file

@jaysoo

I have created a new repository that has this issue: https://github.com/thomassimko/nx-default-build-error

You can see the issue by doing the following:

1. npm i in the root directory – this installs verdaccio as a local registry
2. npm i in the nx directory – this is an nx component monorepo that provides components to another external app
3. npm run publish in the nx directory – publishes both container and types packages to verdaccio
4. npm i in the jest-project directory – install deps for consuming app
5. npm run test in the jest-project directory – this runs the tests using vitest (I know I named the project poorly) and reports the error that we are seeing

 FAIL  src/App.test.tsx [ src/App.test.tsx ]
SyntaxError: The requested module './index.cjs.default.js' does not provide an export named '_default'

Please let me know if you have any other questions. This is a big issue for our team.

@jaysoo and I looked at the repo, it turns out the libraries have "type": "module" in the package.json, so that is why the viest is not resolving these libraries correctly. When adding "type": "module", it will ALWAYS resolve the package as an es module, whereas in the export field, as you mentioned, the import is in CJS:

".": {
    "module": "./index.esm.js",
    "import": "./index.cjs.mjs", // <-- this one
    "default": "./index.cjs.js"
  },

Quick fixes would be removing "type": "module" libraries’ package.json:

• nx/libs/types/package.json
• nx/libs/container/package.json

So the consuming app will resolve these libraries correclty. i will submit a proper fix to detect when package.json has "type": "module" and only export esm format.

Thanks for the repro, we’ll take a look

@jaysoo

I have created a new repository that has this issue: https://github.com/thomassimko/nx-default-build-error

You can see the issue by doing the following:

1. npm i in the root directory – this installs verdaccio as a local registry
2. npm i in the nx directory – this is an nx component monorepo that provides components to another external app
3. npm run publish in the nx directory – publishes both container and types packages to verdaccio
4. npm i in the jest-project directory – install deps for consuming app
5. npm run test in the jest-project directory – this runs the tests using vitest (I know I named the project poorly) and reports the error that we are seeing

 FAIL  src/App.test.tsx [ src/App.test.tsx ]
SyntaxError: The requested module './index.cjs.default.js' does not provide an export named '_default'

Please let me know if you have any other questions. This is a big issue for our team.

This happens because when there’s only a default export, the CJS output exports it through module.exports, not exports['default'].

e.g. given

export class Foo {}

export default class Bar {}

the output is

// index.cjs.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

class Foo {
}
class Bar {
}

exports.Foo = Foo;
exports["default"] = Bar;

But given

export default class Bar {}

the output is

// index.cjs.js

'use strict';

class Bar {
}

module.exports = Bar;

To make the default export available in that case, the index.cjs.default.js can be adjusted as follows:

const e = require('./index.cjs.js')
exports._default = e.default ?? e;

@jaysoo would you like me to send a PR and/or provide a complete reproduction repo?