Error: The package may have incorrect main/module/exports

Description

The package.json of the csstype project is not declaring the main file and that is causing an error with vite.

The error appears to be a conflict since it doesn’t appear unless you add some other packages, but the problem is caused in just this package (if you’re using it (has it exported in your code)) and can be solved by declaring this main file of the package in the package.json.

Screenshots

To Reproduce

Before starting the reproduction, the csstype version of the reproduction is 2.6.20, and the project dependencies created will be with this versions:

  "dependencies": {
    "@vueuse/core": "^8.4.2",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "typescript": "^4.5.4",
    "vite": "^2.9.7",
    "vue-tsc": "^0.34.7"
  }

Reproducing:

Create the project that has the csstype dependence and add a package that can cause a confict. In the terminal, run:

yarn create vite testing --template vue-ts && cd testing && yarn add @vueuse/core

Import the csstype:

Open the project (code . if you use VSC).

At src/App.vue add import { Color } from 'csstype'; at the <script setup lang="ts">. It will be like that:

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import { Color } from 'csstype';
</script>

Getting the error:

Try to run the project in your terminal:

yarn dev

You’ll get the error:

yarn run v1.22.17
$ vite

  vite v2.9.8 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 188ms.

✘ [ERROR] [plugin vite:dep-scan] Failed to resolve entry for package "csstype". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "csstype". The package may have incorrect main/module/exports specified in its package.json.
...

Validations

• - The provided reproduction is a minimal reproducible example of the bug.
• - Readed the README (docs).
• - Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.

Fixing the bug

As said by the vite, The package may have incorrect main/module/exports specified in its package.json, the fix is therefore simple, its needed to add a primary entry point to the program. I fixed it and submitted a PR. Hope that it’s pulled soon or solved in any other possible way.

[luigiMinardi]

So, lets see if I understood right. The bundler will ignore the import followed by type and that is why you can bundle the app even with the package being buggy, is it right?

@luigiMinardi Not a bug on the csstype side of things. Because this is a type-only package, there is no JS to link to in a main field. For example, @types/react provides a main value of "" as well (link). vite’s dep-scan command should probably ignore packages with a blank main value. It’s a missing check on their end.

Ooh, understood, thanks for the info. I’ll close the issue since everything was done on the csstype side 😃

[meyer]

So, lets see if I understood right. The bundler will ignore the import followed by type and that is why you can bundle the app even with the package being buggy, is it right?

@luigiMinardi Not a bug on the csstype side of things. Because this is a type-only package, there is no JS to link to in a main field. For example, @types/react provides a main value of "" as well (link). vite’s dep-scan command should probably ignore packages with a blank main value. It’s a missing check on their end.