Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rollup failed to resolve import (Vite 2.0.0-beta.1) #1291

Closed
hmaurer opened this issue Jan 2, 2021 · 4 comments
Closed

Rollup failed to resolve import (Vite 2.0.0-beta.1) #1291

hmaurer opened this issue Jan 2, 2021 · 4 comments
Labels
pending triage

Comments

@hmaurer
Copy link

hmaurer commented Jan 2, 2021 •
edited
Loading

Thanks for the amazing work on vite & happy new year! :)

Describe the bug

Dependency optimisation fails for reakit, which is supposedly ESM-compatible, with the following error:

Optimizable dependencies detected:
react, react-dom, reakit
Pre-bundling them to speed up dev server page load...
(this will be run only when your dependencies have changed)

Dep optimization failed with error:
[vite]: Rollup failed to resolve import "reakit-system/createComponent" from "node_modules/reakit/es/index.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`rollupInputOptions.external`

This problem seems widespread; I've encountered it with many packages that worked fine on Vite 1.0.0-rc.13

Reproduction

  1. Set up a basic Vite 2.0.0-beta.1 project:
npm init @vitejs/app
cd the-app
npm install reakit --save
  1. Import reakit: modify src/App.tsx by adding this import:
import { Button } from "reakit/Button";
  1. Start the dev server
npm run dev

You should see the error pasted above.

System Info

  • vite version: v2.0.0-beta.1
  • Operating System: MacOS Catalina v10.15.7
  • Node version: v12.18.4
  • NPM version: v6.14.6
  • Reakit version: v1.3.2

Non-exhaustive list of packages that (directly or indirectly) exhibit this issue

  • reakit
  • react-popper
  • radix-ui
@hmaurer
Copy link
Author

hmaurer commented Jan 2, 2021 •
edited
Loading

I have investigated this a bit further. I looked at different NPM packages triggering this issue, and noticed the following commonality: in the case of reakit above, the path that Rollup can't resolve the import for is a directory containing a single file, package.json.

$ ls node_modules/reakit-system/createComponent
package.json

$ cat node_modules/reakit-system/createComponent/package.json
{
  "name": "reakit-system/createComponent",
  "private": true,
  "sideEffects": false,
  "main": "../lib/createComponent",
  "module": "../es/createComponent",
  "types": "../ts/createComponent"
}

(and there's indeed a file node_modules/reakit-system/es/createComponent.js).

Other packages that I've ran into the same issue with (e.g. react-remove-scroll, ...) exhibit the same pattern.

I can't investigate much further as it would involve a knowledge of Rollup's resolution system that I don't have, but I hope with this information someone better informed will know what the issue is!

Thanks in advance.

@egoist
Copy link
Contributor

egoist commented Jan 2, 2021

Seems Vite uses this regexp to match module id:

vite/packages/vite/src/node/utils.ts

Line 12 in 03f25a3

export const deepImportRE = /^([^@][^/]*)\/|^(@[^/]+\/[^/]+)\//

Which gives you reakit-system instead of the correct one: reakit-system/createComponent which results in ignoring reakit-system/createComponent/package.json:

vite/packages/vite/src/node/plugins/resolve.ts

Lines 179 to 181 in 03f25a3

const deepMatch = id.match(deepImportRE)
const pkgId = deepMatch ? deepMatch[1] || deepMatch[2] : id
const pkg = resolvePackageData(pkgId, basedir)

@hmaurer
Copy link
Author

hmaurer commented Jan 2, 2021 •
edited
Loading

@egoist thanks for taking a look. I continued investigating from the code you linked and I think everything is fine up to this point:

vite/packages/vite/src/node/plugins/resolve.ts

Line 384 in 03f25a3

const resolved = tryFsResolve(path.resolve(dir, relativeId), !exportsField)

tryFsResolve is called with /.../node_modules/reakit-system/createComponent, but the implementation of tryFsResolve appears to only look for a file with a .js extension, or a directory with an index.js.

vite/packages/vite/src/node/plugins/resolve.ts

Line 139 in 03f25a3

function tryFsResolve(fsPath: string, tryIndex = true): string | undefined {

So it'd seem like a way to solve this issue would be to add a case to this function to handle the scenario where the path points to a directory that contains a package.json (a recursive call to tryNodeResolve perhaps?). I'm honestly not sure what the conventions for module resolution are here; I'd be happy to work on a pull-request but I'm going to wait til an existing contributor gives his view on the matter.

@hmaurer
Copy link
Author

hmaurer commented Jan 2, 2021

@yyx990803 I saw the issue got closed without a comment and I thought "??", then clicked on it and saw the commit. Thanks for the amazingly fast bug-fix! ❤️

aleclarson pushed a commit to aleclarson/vite that referenced this issue Jan 2, 2021
@yyx990803 @aleclarson
fix(resolve): resolve inline package
f424511 
fix vitejs#1291
@github-actions github-actions bot locked and limited conversation to collaborators Jul 16, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
pending triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hmaurer @egoist