imported in vite createServer function,can not work properly?

xieyezi commented 9 months ago

Describe the bug

I use Vite JS API function: createServer function to create a vite server, and in option, I use unplugin-vue-components and VantResolver. It's compoile properly, But can not auto import vant componet.

//config
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "unplugin-vue-components/resolvers";

...
{ 
     Components({
        resolvers: [VantResolver()]
     }),
}

create Server:

import { createServer } from "vite";

  const server = await createServer(config);
  await server.listen(config.server?.port);
  server.printUrls();

I got warning like this:

And I use vite-plugin-inspect to look, I found that it's do not generate import statement auto:

But if I use vite dev command to run, it's work properly:

Reproduction

no

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 Intel(R) Xeon(R) W-2245 CPU @ 3.90GHz
    Memory: 17.73 GB / 31.73 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.8.0 - E:\project\incall-qiyuan-sdk\node_modules\.bin\pnpm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (117.0.2045.60)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

pnpm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guide.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
[X] The provided reproduction is a minimal reproducible of the bug.

xieyezi commented 9 months ago

And this is my vite user config :

config: {
  configFile: false,
  root: 'E:\\project\\incall-qiyuan-sdk\\packagesV3\\cloudRobot',
  },
  optimizeDeps: { include: [ 'vue', 'vue-router' ] },
  base: './',
  plugins: [
    {
      name: 'vite:vue',
      handleHotUpdate: [Function: handleHotUpdate],
      config: [Function: config],
      configResolved: [Function: configResolved],
      configureServer: [Function: configureServer],
      buildStart: [Function: buildStart],
      resolveId: [AsyncFunction: resolveId],
      load: [Function: load],
      transform: [Function: transform]
    },
    {
      name: 'vite:vue-jsx',
      config: [Function: config],
      configResolved: [Function: configResolved],
      resolveId: [Function: resolveId],
      load: [Function: load],
      transform: [AsyncFunction: transform]
    },
    {
      name: 'unplugin-vue-components',
      enforce: 'post',
      api: [Object],
      transformInclude: [Function: transformInclude],
      transform: [Function (anonymous)],
      vite: [Object],
      webpack: [Function: webpack],
      configResolved: [Function: configResolved],
      configureServer: [Function: configureServer]
    },
    [ [Object], [Object], [Object] ],
    {
      name: 'incall-build',
      enforce: 'post',
      apply: 'build',
      configResolved: [Function: configResolved],
      transformIndexHtml: [Function: transformIndexHtml]
    }
  ],
  resolve: {
    alias: {
      '@src': 'E:\\project\\incall-qiyuan-sdk\\packagesV3\\cloudRobot\\src',
      '@hooks': 'E:\\project\\incall-qiyuan-sdk\\packagesV3\\cloudRobot\\src\\hooks',
      '@views': 'E:\\project\\incall-qiyuan-sdk\\packagesV3\\cloudRobot\\src\\views',
      '@utils': 'E:\\project\\incall-qiyuan-sdk\\packagesV3\\cloudRobot\\src\\utils',
      '@assets': 'E:\\project\\incall-qiyuan-sdk\\packagesV3\\cloudRobot\\src\\assets',
      '@components': 'E:\\project\\incall-qiyuan-sdk\\packagesV3\\cloudRobot\\src\\components',
      '@stores': 'E:\\project\\incall-qiyuan-sdk\\packagesV3\\cloudRobot\\src\\stores'
    }
  },
  build: {
    target: 'es2015',
    minify: 'terser',
    outDir: 'E:\\project\\incall-qiyuan-sdk\\dist\\debug\\micro.cn.com.incall.cloudRobot',
    cssCodeSplit: true,
    sourcemap: true,
    terserOptions: { compress: [Object] },
    emptyOutDir: true
  },
  css: { postcss: { plugins: [Array] } },
  server: {
    port: 3000,
    proxy: { '/api': 'https://dev-m.iov.changan.com.cn' },
    host: '0.0.0.0'
  }
}

xieyezi commented 7 months ago

The "unplugin-vue-components)" will automatically determine the version of Vue. However, in the case of a monorepo where both Vue 2 and Vue 3 versions exist in the top-level node_modules, it may face ambiguity in loading the appropriate version. Upon inspecting the corresponding source code, it was found that the plugin provides a "version" field to explicitly specify the version of Vue. Therefore, by simply setting "version: 3" in the configuration, this issue can be resolved.

unplugin / unplugin-vue-components