[Help] 配合unplugin-vue-components 使用错误

[gws0920]

错误信息

E:\work\AWB-Tools\node_modules\unplugin-vue-components\dist\chunk-T7EPVSRW.js:107
var _require = _module.createRequire.call(void 0, import.meta.url);
                                                         ^^^^

SyntaxError: Cannot use 'import.meta' outside a module

如果在package.json中添加type: "module" 能够解决问题，但是又会报electron not function

// vite.config.js
import { rmSync } from 'fs'
import path from 'path'
import {
  type Plugin,
  type UserConfig,
  defineConfig,
} from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import pkg from './package.json'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

rmSync('dist', { recursive: true, force: true }) // v14.14.0

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    electron({
      main: {
        entry: 'electron/main/index.ts',
        vite: withDebug({
          build: {
            outDir: 'dist/electron/main',
          },
        }),
      },
      preload: {
        input: {
          // You can configure multiple preload here
          index: path.join(__dirname, 'electron/preload/index.ts'),
        },
        vite: {
          build: {
            // For Debug
            sourcemap: 'inline',
            outDir: 'dist/electron/preload',
          },
        },
      },
      // Enables use of Node.js API in the Renderer-process
      renderer: {},
    }),
    renderBuiltUrl(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  server: {
    host: pkg.env.VITE_DEV_SERVER_HOST,
    port: pkg.env.VITE_DEV_SERVER_PORT,
  },
})

[caoxiemeihao]

你升级到 vite@3.0.5 试试看。我不确定 3.0.5 会修复这个问题 fix: avoid using import.meta.url for relative assets if output is not ESM (fixes #9297)，3.0.5 对 import.meta.url 做了修复。 要是还不行，给个复现的 Demo 我本地调试一下。

[caoxiemeihao]

提供一个 Deom 到 Github 上来吧，3.0.5 并没有带上 import.meta.url 部分的 PR

[gws0920]

这个问题在我使用其他plugin的时候顺便给解决了，最近有些忙，没有留意是什么原因导致的。可能是跟tsconfig.json配置有关吧。等我忙完这段，再回头看看具体是什么原因。以下是我目前使用的tsconfig配置

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "importHelpers": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "baseUrl": "./",
    "strict": true,
    "paths": {
      "@/*": ["src/*"]
    },
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true
  },
  "references": [
    { "path": "./tsconfig.node.json" }
  ]
}