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.

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

test(optimizer): add cjs browser field bare import test #7599

Conversation

sapphi-red
Copy link
Member

Description

This PR adds a failing test for #4798, #7301, #7576.

These issues are caused by the same reason.
I investigated this but I could not come up with a good solution.

Additional context

This bug is caused by this line. idToPkgMap.get(importer) is undefined through it should have PackageData.

const pkg = importer && idToPkgMap.get(importer)
if (pkg && isObject(pkg.data.browser)) {

This tryResolveBrowserMapping is called from here.
(res = tryResolveBrowserMapping(id, importer, options, false))

I will try to describe why this is happening only when resolver is used with optimizer.

  • bare imports goes through vite's resolver.
    build.onResolve(
    { filter: /^[\w@][^:]/ },
    async ({ path: id, importer, kind }) => {
    if (moduleListContains(config.optimizeDeps?.exclude, id)) {
    return {
    path: id,
    external: true
    }
    }
    // ensure esbuild uses our resolved entries
    let entry: { path: string; namespace: string } | undefined
    // if this is an entry, return entry namespace resolve result
    if (!importer) {
    if ((entry = resolveEntry(id))) return entry
    // check if this is aliased to an entry - also return entry namespace
    const aliased = await _resolve(id, undefined, true)
    if (aliased && (entry = resolveEntry(aliased))) {
    return entry
    }
    }
    // use vite's own resolver
    const resolved = await resolve(id, importer, kind)
    if (resolved) {
    if (resolved.startsWith(browserExternalId)) {
    return {
    path: id,
    namespace: 'browser-external'
    }
    }
    if (isExternalUrl(resolved)) {
    return {
    path: resolved,
    external: true
    }
    }
    return {
    path: path.resolve(resolved)
    }
    }
    }
    )
  • non-bare imports does not go through vite's resolver and handled by esbuild's resolver
  • when all imports goes through vite's resolver idToPkgMap is constructed correctly.

This (sapphi-red@4d7a716) is the solution I came up with but I think this solution has many problems.

  1. It might occur infinite loop. I have set pluginData to check whether it is already called but I feel it would not work if there is other plugins.
    • There is currently no attempt made to detect infinite path resolution loops. Calling resolve from within onResolve with the same parameters is almost certainly a bad idea.
      https://esbuild.github.io/plugins/#resolve

  2. Other plugins' onResolve runs two times. For example, if there is a onResolve which adds @, the id foo will become foo@@.

What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines and follow the Commit Convention.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

@sapphi-red sapphi-red force-pushed the test/optimizer-browser-field-bare-import branch from c1cd873 to 0814af9 Compare June 22, 2022 06:11
@netlify
Copy link

netlify bot commented Jun 22, 2022

Deploy Preview for vite-docs-main ready!

Name Link
🔨 Latest commit 0814af9
🔍 Latest deploy log https://app.netlify.com/sites/vite-docs-main/deploys/62b2b29b53b498000865bec0
😎 Deploy Preview https://deploy-preview-7599--vite-docs-main.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant