vite/playground/resolve/index.html

<h1>Resolve</h1>

<h2>Utf8-bom import</h2>
<p class="utf8-bom">fail</p>

<h2>Deep import</h2>
<p>Should show [2,4]:<span class="pre deep-import">fail</span></p>

<h2>Exports and a nested package scope with a different type</h2>
<p class="exports-and-nested-scope">fail</p>

<h2>Entry resolving with exports field</h2>
<p class="exports-entry">fail</p>

<h2>Deep import with exports field</h2>
<p class="exports-deep">fail</p>

<h2>Deep import with query with exports field</h2>
<p class="exports-deep-query">fail</p>

<h2>Deep import with exports field + exposed directory</h2>
<p class="exports-deep-exposed-dir">fail</p>

<h2>Deep import with exports field + mapped directory</h2>
<p class="exports-deep-mapped-dir">fail</p>

<h2>Exports field env priority</h2>
<p class="exports-env">fail</p>

<h2>Exports field read only from the root package.json</h2>
<p class="exports-from-root">fail</p>

<h2>Exports with legacy fallback</h2>
<p class="exports-legacy-fallback">fail</p>

<h2>Exports with module</h2>
<p class="exports-with-module">fail</p>

<h2>
  Both import and require resolve using module condition (avoids dual package
  hazard)
</h2>
<p class="exports-with-module-condition">fail</p>
<p class="exports-with-module-condition-required">fail</p>

<h2>Resolving top level with imports field</h2>
<p class="imports-top-level">fail</p>

<h2>Resolving same level with imports field</h2>
<p class="imports-same-level">fail</p>

<h2>Resolving nested path with imports field</h2>
<p class="imports-nested">fail</p>

<h2>Resolving star with imports filed</h2>
<p class="imports-star">fail</p>

<h2>Resolving slash with imports filed</h2>
<p class="imports-slash">fail</p>

<h2>Resolving from other package with imports field</h2>
<p class="imports-pkg-slash">fail</p>

<h2>Resolving with query with imports field</h2>
<p class="imports-query">fail</p>

<h2>Resolve /index.*</h2>
<p class="index">fail</p>

<h2>Resolve dir and file of the same name (should prioritize file)</h2>
<p class="dir-vs-file">fail</p>

<h2>Resolve to non-duplicated file extension</h2>
<p class="exact-extension">fail</p>

<h2>Resolve nested file extension</h2>
<p class="nested-extension">fail</p>

<h2>Don't add extensions to directory names</h2>
<p class="dir-with-ext">fail</p>

<h2>
  A ts module can import another ts module using its corresponding js file name
</h2>
<p class="ts-extension">fail</p>

<h2>
  A ts module can import another tsx module using its corresponding jsx file
  name
</h2>
<p class="jsx-extension">fail</p>

<h2>
  A ts module can import another tsx module using its corresponding js file name
</h2>
<p class="tsx-extension">fail</p>

<h2>
  A ts module can import another ESM module using its corresponding mjs file
  name
</h2>
<p class="mjs-extension">fail</p>

<h2>
  A ts module can import another ESM module using its corresponding mjs file
  name with query parameters
</h2>
<p class="mjs-extension-with-query">fail</p>

<h2>
  A ts module can import another CommonJS module using its corresponding cjs
  file name
</h2>
<p class="cjs-extension">fail</p>

<h2>Resolve file name containing dot</h2>
<p class="dot">fail</p>

<h2>Resolve drive-relative path (Windows only)</h2>
<p class="drive-relative">fail</p>

<h2>Resolve absolute path</h2>
<p class="absolute">fail</p>

<h2>Resolve file url</h2>
<p class="file-url">fail</p>

<h2>Browser Field</h2>
<p class="browser">fail</p>

<h2>Resolve browser field even if module field exists</h2>
<p class="browser-module1">fail</p>

<h2>Resolve module field if browser field is likely UMD or CJS</h2>
<p class="browser-module2">fail</p>

<h2>Resolve module field if browser field is likely IIFE</h2>
<p class="browser-module3">fail</p>

<h2>Don't resolve to the `module` field if the importer is a `require` call</h2>
<p class="require-pkg-with-module-field">fail</p>

<h2>CSS Entry</h2>
<p class="css"></p>

<h2>Monorepo linked dep</h2>
<p class="monorepo"></p>

<h2>Plugin resolved virtual file</h2>
<p class="virtual"></p>

<h2>Plugin resolved virtual file (#9036)</h2>
<p class="virtual-9036"></p>

<h2>Plugin resolved custom virtual file</h2>
<p class="custom-virtual"></p>

<h2>Inline package</h2>
<p class="inline-pkg"></p>

<h2>resolve.extensions</h2>
<p class="custom-ext"></p>

<h2>resolve.mainFields</h2>
<p class="custom-main-fields"></p>

<h2>resolve.mainFields.custom-browser-main</h2>
<p class="custom-browser-main-field"></p>

<h2>resolve.conditions</h2>
<p class="custom-condition"></p>

<h2>resolve package that contains # in path</h2>
<p class="path-contains-sharp-symbol"></p>

<h2>resolve non normalized absolute path</h2>
<p class="non-normalized"></p>

<script type="module">
  import '@generated-content-virtual-file'
  function text(selector, text) {
    document.querySelector(selector).textContent = text
  }

  // import from a utf-8 bom file
  import { msg as bomMsg } from './utf8-bom/main.js'
  text('.utf8-bom', bomMsg)

  // deep import
  import slicedToArray from '@babel/runtime/helpers/esm/slicedToArray'

  const iterable = (function* () {
    yield 2
    yield 4
    yield 6
    yield 8
  })()

  text('.deep-import', JSON.stringify(slicedToArray(iterable, 2)))

  import exportsAndNestedScopeMsg from '@vitejs/test-resolve-exports-and-nested-scope/nested'
  text('.exports-and-nested-scope', exportsAndNestedScopeMsg)

  // exports field
  import { msg } from '@vitejs/test-resolve-exports-path'
  text('.exports-entry', msg)

  // deep import w/ exports
  import { msg as deepMsg } from '@vitejs/test-resolve-exports-path/deep.js'
  text('.exports-deep', deepMsg)

  // deep import w/ exports w/ query
  import deepPath from '@vitejs/test-resolve-exports-path/deep.json?url'
  text('.exports-deep-query', deepPath)

  // deep import w/ exposed dir
  import { msg as exposedDirMsg } from '@vitejs/test-resolve-exports-path/dir/dir'
  text('.exports-deep-exposed-dir', exposedDirMsg)

  // deep import w/ mapped dir
  import { msg as mappedDirMsg } from '@vitejs/test-resolve-exports-path/dir-mapped/dir'
  text('.exports-deep-mapped-dir', mappedDirMsg)

  import { msg as exportsEnvMsg } from '@vitejs/test-resolve-exports-env'
  text('.exports-env', exportsEnvMsg)

  import { msg as exportsFromRootMsg } from '@vitejs/test-resolve-exports-from-root/nested'
  text('.exports-from-root', exportsFromRootMsg)

  import { msg as exportsLegacyFallbackMsg } from '@vitejs/test-resolve-exports-legacy-fallback/dir'
  text('.exports-legacy-fallback', exportsLegacyFallbackMsg)

  import { msg as exportsWithModule } from '@vitejs/test-resolve-exports-with-module'
  text('.exports-with-module', exportsWithModule)

  import { msg as exportsWithModuleCondition } from '@vitejs/test-resolve-exports-with-module-condition'
  import { msg as exportsWithModuleConditionRequired } from '@vitejs/test-resolve-exports-with-module-condition-required'
  text('.exports-with-module-condition', exportsWithModuleCondition)
  text(
    '.exports-with-module-condition-required',
    exportsWithModuleConditionRequired,
  )

  // imports field
  import { msg as importsTopLevel } from '#top-level'
  text('.imports-top-level', importsTopLevel)

  import { msg as importsSameLevel } from '#same-level'
  text('.imports-same-level', importsSameLevel)

  import { msg as importsNested } from '#nested/path.js'
  text('.imports-nested', importsNested)

  import { msg as importsStar } from '#star/index.js'
  text('.imports-star', importsStar)

  import { msg as importsSlash } from '#slash/index.js'
  text('.imports-slash', importsSlash)

  import { msg as importsPkgSlash } from '#other-pkg-slash/index.js'
  text('.imports-pkg-slash', importsPkgSlash)

  import importsQuery from '#query?url'
  text('.imports-query', importsQuery)

  // implicit index resolving
  import { foo } from './util'
  text('.index', foo())

  // implicit dir index vs. file
  import { file } from './dir'
  text('.dir-vs-file', file)

  // exact extension vs. duplicated (.js.js)
  import { file as exactExtMsg } from './exact-extension/file.js'
  text('.exact-extension', exactExtMsg)

  // nested extension
  import { file as fileJsonMsg } from './exact-extension/file.json'
  text('.nested-extension', fileJsonMsg)

  // don't add extensions to dir name (./dir-with-ext.js/index.js)
  import { file as dirWithExtMsg } from './dir-with-ext'
  text('.dir-with-ext', dirWithExtMsg)

  import { msg as tsExtensionMsg } from './ts-extension'
  text('.ts-extension', tsExtensionMsg)

  import { msgJsx as tsJsxExtensionMsg } from './ts-extension'
  text('.jsx-extension', tsJsxExtensionMsg)

  import { msgTsx as tsTsxExtensionMsg } from './ts-extension'
  text('.tsx-extension', tsTsxExtensionMsg)

  import { msgCjs as tsCjsExtensionMsg } from './ts-extension'
  text('.cjs-extension', tsCjsExtensionMsg)

  import { msgMjs as tsMjsExtensionMsg } from './ts-extension'
  text('.mjs-extension', tsMjsExtensionMsg)

  import { msgMjs as tsMjsExtensionWithQueryMsg } from './ts-extension?query=1'
  text('.mjs-extension-with-query', tsMjsExtensionWithQueryMsg)

  // filename with dot
  import { bar } from './util/bar.util'
  text('.dot', bar())

  // browser field
  import main from '@vitejs/test-resolve-browser-field'

  import a from '@vitejs/test-resolve-browser-field/no-ext'
  import b from '@vitejs/test-resolve-browser-field/no-ext.js' // no substitution
  import c from '@vitejs/test-resolve-browser-field/ext'
  import d from '@vitejs/test-resolve-browser-field/ext.js'
  import e from '@vitejs/test-resolve-browser-field/ext-index/index.js'
  import f from '@vitejs/test-resolve-browser-field/ext-index'
  import g from '@vitejs/test-resolve-browser-field/no-ext-index/index.js' // no substitution
  import h from '@vitejs/test-resolve-browser-field/no-ext?query'
  import i from '@vitejs/test-resolve-browser-field/bare-import'

  import {
    ra,
    rb,
    rc,
    rd,
    re,
    rf,
    rg,
  } from '@vitejs/test-resolve-browser-field/relative'

  const success = [main, a, c, d, e, f, h, i, ra, rc, rd, re, rf]
  const noSuccess = [b, g, rb, rg]

  if (
    [...success, ...noSuccess].filter((text) => text.includes('[success]'))
      .length === success.length
  ) {
    text('.browser', main)
  }

  import browserModule1 from '@vitejs/test-resolve-browser-module-field1'
  text('.browser-module1', browserModule1)

  import browserModule2 from '@vitejs/test-resolve-browser-module-field2'
  text('.browser-module2', browserModule2)

  import browserModule3 from '@vitejs/test-resolve-browser-module-field3'
  text('.browser-module3', browserModule3)

  import { msg as requireButWithModuleFieldMsg } from '@vitejs/test-require-pkg-with-module-field'
  text('.require-pkg-with-module-field', requireButWithModuleFieldMsg)

  import { msg as customExtMsg } from './custom-ext'
  text('.custom-ext', customExtMsg)

  import { msg as customMainMsg } from '@vitejs/test-resolve-custom-main-field'
  text('.custom-main-fields', customMainMsg)

  import { msg as customBrowserMsg } from '@vitejs/test-resolve-custom-browser-main-field'
  text('.custom-browser-main-field', customBrowserMsg)

  import { msg as customConditionMsg } from '@vitejs/test-resolve-custom-condition'
  text('.custom-condition', customConditionMsg)

  // should be ok to import a file marked with browser: false
  import '@vitejs/test-resolve-browser-field/not-browser'
  import '@vitejs/test-resolve-browser-field/multiple.dot.path'

  // css entry
  import css from 'normalize.css?inline'
  if (typeof css === 'string') {
    text('.css', '[success] resolve package with css entry file')
  }

  // monorepo linked dep w/ upper directory import
  import { msg as linkedMsg } from '@vitejs/test-resolve-linked'
  text('.monorepo', linkedMsg)

  import { msg as virtualMsg } from '@virtual-file'
  text('.virtual', virtualMsg)

  import { msg as virtualMsg9036 } from 'virtual:file-9036.js'
  text('.virtual-9036', virtualMsg9036)

  import { msg as customVirtualMsg } from '@custom-virtual-file'
  text('.custom-virtual', customVirtualMsg)

  import { msg as inlineMsg } from './inline-package'
  text('.inline-pkg', inlineMsg)

  import es5Ext from 'es5-ext'
  import contains from 'es5-ext/string/#/contains'
  import { last } from '@vitejs/test-resolve-sharp-dir'

  text(
    '.path-contains-sharp-symbol',
    `[success] ${contains.call('#', '#')} ${last.call('#')}`,
  )

  import nonNormalizedAbsolute from '@non-normalized'
  text('.non-normalized', nonNormalizedAbsolute)
</script>

<style>
  .pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
  }
</style>