ESM Build fails with "Named export not found".

[Alex Grozav]

Issue:
Although my package provides both commonjs and esm compatible versions, the esm build fails.

• I'm providing .mjs files with explicit file imports and exports (extensions included)
• I'm providing a .cjs file that contains the UMD bundle

Package: @inkline/inkline@next

Expected result:
The build should succeed. The package.json module field should be used for importing the esm version of the package.

Stacktrace:

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
(node:18315) UnhandledPromiseRejectionWarning: file:///Users/alexgrozav/Workspace/inkline.io/.vite-ssg-temp/main.mjs:26
import { colorVariantClass, Inkline, components } from "@inkline/inkline";
                            ^^^^^^^
SyntaxError: Named export 'Inkline' not found. The requested module '@inkline/inkline' 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 '@inkline/inkline';
const { colorVariantClass, Inkline, components } = pkg;

    at ModuleJob._instantiate (internal/modules/esm/module_job.js:124:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:179:5)
    at async Loader.import (internal/modules/esm/loader.js:178:24)
    at async build (/Users/alexgrozav/Workspace/inkline.io/node_modules/vite-ssg/dist/node/cli.cjs:180:44)
    at async Object.handler (/Users/alexgrozav/Workspace/inkline.io/node_modules/vite-ssg/dist/node/cli.cjs:294:3)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:18315) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:18315) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[Joaquín Sánchez]

@alexgrozav is these releated to your library (inkline) or about vite-ssg?

If it is about vite-ssg, you should import inkline and then access the exports destructuring the module, since the inkline is cjs but does not export Inkline, just read the detailed stack trace:

import inkline from "@inkline/inkline";

const { colorVariantClass, Inkline, components } = inkline;

If it is also about your library, you should review your package.json (vite-ssg is not using the esm version of inkline), maybe you have something missing on it, just review for example the package.json of this repo or read this from blog from Anthony: https://antfu.me/posts/publish-esm-and-cjs

I suggest you to use unbuild to build your package, see this PR #160. With unbuild you just write your modules with typescript and unbuild will take care for you (will also check the package.json if you have some missing entry).

[Alex Grozav]

The questions are about getting inkline to be compatible with vite-ssg. Given that the concepts are relatively new and there's little information on how to fix the issues I'm running into, I don't really have any choice but to ask here. I'm sorry for all the trouble. I do hope it will help others encountering the same issues.

Thank you for the suggestion, however, if I do the destructuring wouldn't I give up tree shaking?

I've checked the UMD output and it does export Inkline, components and colorVariantClass.

I'm aware of the exports field in the package.json, however, I'd like to have all the files available directly. Shouldn't the module field provide the esm version to be used in case the exports field is not defined?

[Joaquín Sánchez]

I think no (see this: https://antfu.me/posts/publish-esm-and-cjs#package-json), you must include the files on the exports, it is related to how node resolves

It is simple to fix, just take a look at this: https://github.com/antfu/vite-plugin-inspect/blob/main/package.json#L19

[Alex Grozav]

I wasn't aware of the ./* trick. Looks like things are working as expected now. Thank you so much for the help! :)