Facing difficulty in using my bundled package

[elamandeep]

I have used microbundle to bundle my react typescript component library. But I'm unable to consume my package. Maybe I misconfigured something. Please guide me where I'm making mistake.

Here's what I'm getting error Failed to resolve entry for package "@ivy/core". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-scan]

Here's my package.json

{
  "name": "@ivy/core",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "source":"src/index.ts",
  "main": "./dist/index.js",
  "module": "./dist/index.module.mjs",
  "exports": {
    ".":{
      "import": "./dist/index.module.cjs",
      "require": "./dist/index.umd.cjs"
    }
  },
  "scripts": {
    "dev": "microbundle watch",
    "build": "microbundle --generateTypes  --tsconfig tsconfig.json -f umd,cjs,esm  --compress"
  },
  "publishConfig": {
    "access": "public"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "microbundle": "^0.15.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.2.2"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "dependencies": {
    "@vanilla-extract/css": "^1.13.0",
    "@vanilla-extract/dynamic": "^2.0.3",
    "rainbow-sprinkles": "^0.17.0"
  }
}

This is how my dist files looks

[rschristian]

Yeah it looks like your config is a bit borked, you've made some errors when copy/pasting from our suggestion.

{
  "type": "module",
  "source":"src/index.ts",
- "main": "./dist/index.js",
+ "main": "./dist/index.cjs",
- "module": "./dist/index.module.mjs",
+ "module": "./dist/index.module.js",
+ "umd:main": "dist/foo.umd.js",
  "exports": {
    ".":{
-     "import": "./dist/index.module.cjs",
+     "import": "./dist/index.module.js",
-     "require": "./dist/index.umd.cjs"
+     "require": "./dist/index.cjs"
    }
  },

A couple notes:

• Microbundle prefers to output .js, so you need to use .cjs & .js or .js & .mjs, but not both .cjs & .mjs.
• I wouldn't provide umd for exports.require. You can, it shouldn't cause issues, but I don't think it makes much sense. Using the CJS output is preferable.

If you have a repo I can PR it directly to help out, I realize module formats aren't the simplest things to handle.

Edit: Oh, and for your flags:

• --generateTypes should be unnecessary if your input is a TS file (as yours is)
• --tsconfig tsconfig.json is the default value
• --compress is enabled by default, so long as you haven't set --target node

You should be able to remove all 3 without any difference in behavior, for what it's worth.

[elamandeep]

Yeah it looks like your config is a bit borked, you've made some errors when copy/pasting from our suggestion.

{
  "type": "module",
  "source":"src/index.ts",
- "main": "./dist/index.js",
+ "main": "./dist/index.cjs",
- "module": "./dist/index.module.mjs",
+ "module": "./dist/index.module.js",
+ "umd:main": "dist/foo.umd.js",
  "exports": {
    ".":{
-     "import": "./dist/index.module.cjs",
+     "import": "./dist/index.module.js",
-     "require": "./dist/index.umd.cjs"
+     "require": "./dist/index.cjs"
    }
  },

A couple notes:

* Microbundle prefers to output `.js`, so you need to use `.cjs` & `.js` or `.js` & `.mjs`, but not both `.cjs` & `.mjs`.

* I wouldn't provide `umd` for `exports.require`. You can, it shouldn't cause issues, but I don't think it makes much sense. Using the CJS output is preferable.

If you have a repo I can PR it directly to help out, I realize module formats aren't the simplest things to handle.

Edit: Oh, and for your flags:

* `--generateTypes` should be unnecessary if your input is a TS file (as yours is)

* `--tsconfig tsconfig.json` is the default value

* `--compress` is enabled by default, so long as you haven't set `--target node`

You should be able to remove all 3 without any difference in behavior, for what it's worth.

Now it's working but I'm stuck at another issue. The library over which my library is built is causing problems. I have posted a question in Discord. I will create a repo and share the link with you. Pnpm setup is not done that's why I have created repo.

Actually, When I was using --compress. I was getting Tersor plugin deprecation warning.