I have built a very simple component library for Vue in Vite and published it to NPM. When consuming components from the lib.js file it works just fine.

However, I now need to be able to import from my library (or rather the NPM package) a single JS file.

In the consuming site however, I am getting an error and I think it's all to do with the setup of my exports key in the package.json

package.json (Library)

{
  "name": "@michaelpumo/components-vue",
  "version": "0.0.22",
  "types": "./dist/types/lib.d.ts",
  "files": [
    "dist"
  ],
  "main": "./dist/lib.js",
  "module": "./dist/lib.js",
  "exports": {
    ".": {
      "import": "./dist/lib.js",
      "require": "./dist/lib.js"
    },
    "./tailwind": "./dist/tailwind.config.js"
  }
}

In my consuming site, I'm trying to import the Tailwind file like so:

const { units, config } = require('@michaelpumo/components-vue/tailwind')
console.log(units) // This outputs correctly, so the require worked.
module.exports = { config, units }

This actually logs the contents of 'units' from the Tailwind file, so I know it's been found correctly.

However, in the terminal, I get an error:

ERROR  Failed to compile with 1 errors
This dependency was not found:
* @michaelpumo/components-vue/tailwind in ./tailwind.config.js

I'm not sure what is going wrong here.

Here is the structure of my NPM package:

It might be worth mentioning that the consuming site is a Nuxt.js site but I'm not sure that makes any difference here.

Any help greatly appreciated.