Uncaught SyntaxError: Identifier 'h' has already been declared 问题处理

问题描述:

报错如下:Uncaught SyntaxError: Identifier 'h' has already been declared
对应文件位置自动添加 import { h } from '/node_modules/.vite/deps/vue.js 代码导致问题出现

  • 开发环境中,使用插件 unplugin-auto-import/vite 有时会在浏览器里面会自动加上这行代码
import { h } from '/node_modules/.vite/deps/vue.js

,导致和混淆后的代码有冲突问题处理。

  • 环境详情是 vite4.0.0 + vue3 + unplugin-auto-import/vite0.14.4 + pnpm 在workspace模式下apps demo 代码引用 packages 依赖包代码,会出现上述问题, 使用已发布的npm包不会出现上述问题。
  • 之后可能还会有类似的问题,如果有的话,可以参考这个思路进行处理。

  • 可能只有Windows有这个问题,Mac系统没有这个问题。

处理思路:想办法去除自动添加的这一行

因为这个是开发时直接依赖pnpm的workspace的packages里面的代码,会自动添加这一行,且项目使用了
unplugin-auto-import/vite 进行自动导入,所以去看 unplugin-auto-import/vite 相关文档以及源码,最终找到了解决方法如下:
添加如下配置,取消h的自动导入:

        ignore: ['h'], // 自动添加 import { h } from '/node_modules/.vite/deps/vue.js 代码问题处理

相关配置如下:

import autoImport from 'unplugin-auto-import/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import IconsResolver from 'unplugin-icons/resolver';

export default function createAutoImport() {
    return autoImport({
        imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'], // 手动管理
        ignore: ['h'], // 自动添加 import { h } from '/node_modules/.vite/deps/vue.js 代码问题处理
        dts: true,
        eslintrc: {
            enabled: true, // <-- this
        },
        resolvers: [
            ElementPlusResolver({ importStyle: false }),
            // Auto import icon components
            // 自动导入图标组件
            IconsResolver({
                prefix: 'Icon',
            }),
        ],
    });
}

参考:
https://github.com/antfu/unplugin-auto-import#configuration
https://github.com/antfu/unplugin-auto-import/blob/main/src/types.ts

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容