vitejs / vite

Next generation frontend tooling. It's fast!
http://vite.dev
MIT License
69.1k stars 6.25k forks source link

[commonjs--resolver] Failed to resolve entry for package "/my-vue-app". The package may have incorrect main/module/exports specified in its package.json. #10871

Open martinszeltins opened 2 years ago

martinszeltins commented 2 years ago

Describe the bug

I have spent half a day trying to figure out why my build fails. This error message did not tell me where in my code the problem was. The error message should be clearer and show where the error is.

Please follow the Steps to reproduce below.

If I add a <img src="/" /> the build fails. All I did was take the official vite vue template and replaced this line and the build fails:

App.vue

- <img src="/vite.svg" class="logo" alt="Vite logo" />
+ <img src="/" class="logo" alt="Vite logo" />

Then if I run build I get this error::

$ npm run build

> my-vue-app@0.0.0 build
> vite build

vite v3.2.3 building for production...
✓ 5 modules transformed.

[commonjs--resolver] Failed to resolve entry for package "/home/martins/Programming/test/vite/src-bug/my-vue-app". The package may have incorrect main/module/exports specified in its package.json.
error during build:
Error: Failed to resolve entry for package "/home/martins/Programming/test/vite/src-bug/my-vue-app". The package may have incorrect main/module/exports specified in its package.json.
    at packageEntryFailure (file:///home/martins/Programming/test/vite/src-bug/my-vue-app/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:34096:11)
    at resolvePackageEntry (file:///home/martins/Programming/test/vite/src-bug/my-vue-app/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:34093:5)
    at tryResolveFile (file:///home/martins/Programming/test/vite/src-bug/my-vue-app/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:33710:38)
    at tryFsResolve (file:///home/martins/Programming/test/vite/src-bug/my-vue-app/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:33692:16)
    at Object.resolveId (file:///home/martins/Programming/test/vite/src-bug/my-vue-app/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:33509:28)
    at file:///home/martins/Programming/test/vite/src-bug/my-vue-app/node_modules/rollup/dist/es/shared/rollup.js:22748:40

Reproduction

https://stackblitz.com/edit/vue-zgunyo?file=src%2FApp.vue

Steps to reproduce

  1. $ npm create vite@latest my-vue-app -- --template vue
  2. $ cd my-vue-app && npm install
  3. Open App.vue and replace <img src="/vite.svg" class="logo" alt="Vite logo" /> with <img src="/" class="logo" alt="Vite logo" />
  4. $ npm run build

And the build will fail with the error message I mentioned above.

System Info

`
$ npx envinfo --system --npmPackages '{vite,@vitejs/*}' --binaries --browsers

Need to install the following packages:
  envinfo@7.8.1
Ok to proceed? (y) y

  System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i5-10300H CPU @ 2.50GHz
    Memory: 12.43 GB / 31.26 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.18.1 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.19.2 - /usr/bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Firefox: 106.0.5
  npmPackages:
    @vitejs/plugin-vue: ^3.2.0 => 3.2.0 
    vite: ^3.2.3 => 3.2.3


### Used Package Manager

npm

### Logs

_No response_

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vitejs.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/vitejs/vite/issues) that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to [vuejs/core](https://github.com/vuejs/core) instead.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite/discussions) or join our [Discord Chat Server](https://chat.vitejs.dev/).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
chenxch commented 2 years ago

I think you should be very close to the reason, you already know clearly that the third step caused the compilation failure, the error message clearly states The package may have incorrect main/module/exports specified in its package.json. Due to changes in App.vue, the file compilation fails so that there is no correct export information to main.js, so that the entire build fails.

martinszeltins commented 2 years ago

I think you should be very close to the reason, you already know clearly that the third step caused the compilation failure, the error message clearly states The package may have incorrect main/module/exports specified in its package.json. Due to changes in App.vue, the file compilation fails so that there is no correct export information to main.js, so that the entire build fails.

I found the source of the problem only after hours of debugging because the error message was not helpful. It would be better to fix this bug or at least provide a more useful error message.

lukaszarpak commented 1 year ago

@martinszeltins so what's your solution to the problem?

martinszeltins commented 1 year ago

@martinszeltins so what's your solution to the problem?

If I remember correctly, it was the / in src of the img:

<img src="/" class="logo" alt="Vite logo" />
lukaszarpak commented 1 year ago

@martinszeltins thanks for a quick reply! In my case the error says:

[commonjs--resolver] Failed to resolve entry for package "date-fns". The package may have incorrect main/module/exports specified in its package.json.

It started happening out of nowhere. No changes in package.json nor in yarn.lock. The issue happens only in a CI environment, which is weird because the packages are installed with --frozen-lockfile option there. Perhaps you have some clue on how to debug this issue?

lukaszarpak commented 1 year ago

Alright I found out that the issue was caused by caching mechanism on GitLab, without it the project builds as expected. I suspect it has something to do with symlinks to node_modules, because node_modules are now part of the .output directory (Nuxt3 project).