Uncaught TypeError: Object(…) is not a function in internal Vue3

Question

我有一个奇怪的错误，我不知道是什么原因造成的，但上次我开发我的项目时很好。不知何故，我的 chrome 浏览器丢失了缓存数据（第二天）。当我运行我的 vue3 项目时，会出现错误。控制台日志所说的内容

App.vue?3dfd:11 Uncaught TypeError: Object(...) is not a function
    at eval (App.vue?3dfd:11)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js?!./src/App.vue?vue&type=template&id=7ba5bd90 

img1

那个指向前面的东西

img2

这是我的 main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Notifications from 'vue3-vt-notifications'
import { store } from './stores'
import Particles from 'particles.vue3'

// import tailwind css
import '../src/styles.css'

// firebase auth service
import { projectAuth } from './firebase/config'

let app
projectAuth.onAuthStateChanged(() => {
    if(!app){
        app = createApp(App)
        .use(router)
        .use(store)
        .use(Particles)
        .use(VueAxios, axios)
        .use(Notifications)
        .mount('#app')
    }
})

这是我的 package.json

{
  "name": "myproject",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-css": "tailwindcss build src/styles.css -o public/styles.css"
  },
  "dependencies": {
    "@dafcoe/vue-collapsible-panel": "^0.2.0",
    "@tailwindcss/postcss7-compat": "^2.0.2",
    "@tinymce/tinymce-vue": "^4.0.0",
    "algoliasearch": "^4.10.5",
    "autoprefixer": "^9.8.6",
    "axios": "^0.21.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "core-js": "^3.6.5",
    "d3": "^7.0.0",
    "d3-svg-legend": "^2.25.6",
    "d3-v6-tip": "^1.0.9",
    "date-fns": "^2.16.1",
    "es6-promise": "^4.2.8",
    "firebase": "^8.2.1",
    "firebase-admin": "^9.4.2",
    "firebase-functions": "^3.13.1",
    "firebaseui": "^4.7.1",
    "js-md5": "^0.7.3",
    "jspdf": "^2.3.1",
    "node-sass": "^5.0.0",
    "particles.vue3": "^1.12.2",
    "postcss": "^7.0.35",
    "sass-loader": "^11.0.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
    "vue": "^3.0.0",
    "vue-axios": "^3.2.4",
    "vue-clipboard3": "^1.0.0",
    "vue-disqus": "^5.1.0",
    "vue-dropdowns": "^1.1.2",
    "vue-google-signin-button": "^1.0.4",
    "vue-instantsearch": "^4.0.0",
    "vue-load-image": "^1.1.0",
    "vue-loader": "^15.9.7",
    "vue-meta": "^3.0.0-alpha.2",
    "vue-nav-tabs": "^0.5.7",
    "vue-rate": "^2.4.0",
    "vue-router": "^4.0.0-0",
    "vue-typewriter": "^2.2.1",
    "vue3-carousel": "^0.1.13",
    "vue3-datepicker": "^0.2.4",
    "vue3-vt-notifications": "^1.0.0",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0"
  }
}

另外，我不知道这是否与每次运行服务有关。它以 98% 完成，并带有以下警告：

img3

谁来帮帮我

Answer 1

我也遇到了同样的问题，最后发现我导入nanoid的时候没有使用解构。添加 {} 后，错误已解决。可以看看是不是导入第三方库的问题。