Using vite vs. deploying to npm

[sage violet]

We develop a library for React components. The library is set up as a lerna-monorepo with multiple packages. I recently adopted Storybook with vite and ran into the following error:

Failed to resolve entry for package "OurComponent". The package may have incorrect main/module/exports specified in its package.json.

So when I changed these entries in the corresponding package.json:

{
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "jsnext:main": "dist/index.es.js",
  "files": [
    "dist"
  ],
  "types": "dist/index.d.ts",
  "source": "index.ts"
}

to this:

{
  "main": "index.ts",
  "source": "index.ts"
}

the error went away. However these fields are needed for publishing to our node-registry! I can't imagine that I'm the first one to have this problem, but I also didn't find any documentation about how this is generally solved. Can anyone help me out with that?

[wild patio]

Can you please share your vite.config.ts?

Or you can have a look at my configurations (I hope it may be helpful for you) https://github.com/andskr/analytics-recorder

Also, I recommend you read the Vite instructions for Library Mode https://vitejs.dev/guide/build.html#library-mode

Please pay attention if you specify your own filename within the library configuration (if no - package.json name will be used) you also need to include that name inside your main module types and exports paths. For example https://github.com/andskr/analytics-recorder/blob/d304fbd74f5d2440dd9d9cfbb0cfbb0a3e1ac6b1/package.json#L26

[sage violet]

I don’t even have a vite.config.ts, because my components were not served by standalone vite but only from storybook. I also don’t build with vite. Isn’t library-mode targeted at building? I suspect that what I‘m seeing has something to do with the lerna-monorepo structure

[wild patio]

If you have multiple entry points for your library you can try to play with something like this

 "exports": {
    "./*": {
      "import": "./dist/*/index.js",
      "default": "./dist/*/index.js"
    }
  },
"typesVersions": {
    "*": {
      "*": [
        "dist/*/index.d.ts"
      ]
    }
  },

It depends on your output folder structure structure

[slender marlin]

You'll need to build your libraries so the dist folder exists. Alternatively, use resolve.alias in Vite config to alias imports of your packages to their corresponding src folders

[sage violet]

@slender marlin thanks! I‘ll look into the resolve.alias-parameters.