unplugin / unplugin-auto-import

Auto import APIs on-demand for Vite, Webpack and Rollup

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

手动引入 Vue hooks 可能导致编译失败

ShineKidd opened this issue · comments

工程地址:
vue2-demo-auto-import

App.vue 代码如下

<template>
  <div id="app">
  </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
export default defineComponent({})
</script>

错误信息:

error  in ./src/App.vue?vue&type=script&lang=js&

Module parse failed: Identifier 'defineComponent' has already been declared (6:9)
File was processed with these loaders:
 * ./node_modules/unplugin/dist/webpack/loaders/transform.js
 * ./node_modules/unplugin/dist/webpack/loaders/transform.js
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| //
| //
> import { defineComponent } from '@vue/composition-api';
| export default defineComponent({});

 @ ./src/App.vue?vue&type=script&lang=js& 1:0-330 1:346-349 1:351-678 1:351-678
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.61.20:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

诡异的是,代码稍微调整,可正常编译

  • <div id="app"></div> 不折行,正常编译
  • <script lang="js"> (lang="ts" 也行)正常编译
  • 删除 import 导包,编译正常

我也遇到了,降级解决

commented
const excludeRE = [
  // imported from other module
  /\bimport\s*(.+?)\s*from\b/g,
  // defined as function
  /\bfunction\s*([\w_$]+?)\s*\(/g,
  // defined as local variable
  /\b(?:const|let|var)\s+?(\[[\s\S]*?\]|\{[\s\S]*?\}|[\s\S]+?)\s*?[=;\n]/g,
]

应该是第一个正则表达式的问题,某些场景下无法匹配出已经 import 导入的api,例如

import { h, defineComponent } from 'vue'; // 正常执行

import {
    h,
    defineComponent,
} from 'vue'; // 无法正常匹配

现在我使用 // prettier-ignore 注释让这一行不换行暂时解决掉了