Компонент не зарегистрирован должным образом, не может скомпилировать новые файлы - PullRequest
Новая
       21

Компонент не зарегистрирован должным образом, не может скомпилировать новые файлы

1 голос
/ 29 октября 2019

Я просто добавил простой компонент под названием AddScan в v-диалог, однако я получаю это в консоли: 

[Vue warn]: Unknown custom element: <AddScan> - did you register the component correctly? 
For recursive components, make sure to provide the "name" option.

Также, когда я редактирую файл и сохраняю его, vue-cli не компилирует его, а когдаЯ редактирую другой компонент и сохраняю изменения, которые он компилирует, но выдает мне эту ошибку: 

warning  in ./src/views/ScanResults.vue?vue&type=script&lang=js&

"export 'AddScan' was not found in '@/components/scan'

Это действительно первый раз, когда у меня возникает эта проблема, я понятия не имею, что не так.

I 'm на Vue 2.6.10 и Vuetify 2.1.7.

ScanResults.vue (родительский): 

<template>
  <v-layout row>
    <v-flex row class="justify-space-between ma-5 ">
      <div>
        <v-dialog v-model="dialog" width="500">
          <template v-slot:activator="{ on }">
            <v-btn v-on="on" class="ma-2 lowerCase" color="#E0E0E0">
              Ajouter un scan
            </v-btn>
          </template>

          <AddScan :items="items"></AddScan>
        </v-dialog>
      </div>
    </v-flex>
    <v-flex v-if="items.length < 2">
      <ScanGrid :items="items"></ScanGrid>
    </v-flex>
  </v-layout>
</template>

<script>
import { mapGetters } from "vuex";
import { ScanGrid } from "@/components/scan";
import { AddScan } from "@/components/scan";
export default {
  name: "ScanResults",
  components: {
    ScanGrid,
    AddScan
  },
...

AddScan.vue (дочерний): 

<template>
  <v-card>
    <v-list>
      <v-list-item v-for="(item, i) in items" :key="i">
        <v-list-item-content>
          <v-list-item-title v-text="item.StorageName"></v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-card>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "AddScan",
  computed: {
    ...mapGetters(["getIsDarkMode", "getPhysicalInventoryBatch"])
  },
  async created() {
    try {
      await this.$store.dispatch("loadPhysicalInventoryBatch");
      const items = this.$store.getters.getPhysicalInventoryBatch;
      this.$emit("update", items);
    } catch (e) {
      console.error(e);
    }
  },

  data: () => ({
    items: [],
    dialog: false
  })
};
</script>

package.json: 

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8084",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "lint:fix": "vue-cli-service lint --fix"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
    "@fortawesome/vue-fontawesome": "^0.1.7",
    "axios": "^0.19.0",
    "core-js": "^3.3.5",
    "material-design-icons-iconfont": "^5.0.1",
    "moment": "^2.24.0",
    "qrcode": "^1.4.2",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-moment": "^4.0.0",
    "vue-mugen-scroll": "^0.2.6",
    "vue-promised": "^1.2.1",
    "vue-router": "^3.1.3",
    "vuetify": "^2.1.7",
    "vuetify-dialog": "^0.3.8",
    "vuex": "^3.0.1",
    "vuex-i18n": "^1.13.1",
    "vuex-persistedstate": "^2.6.0"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2",
    "@vue/cli-plugin-babel": "^4.0.5",
    "@vue/cli-plugin-eslint": "^4.0.5",
    "@vue/cli-plugin-pwa": "^4.0.5",
    "@vue/cli-plugin-unit-jest": "^4.0.5",
    "@vue/cli-service": "^4.0.5",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^23.6.0",
    "compression-webpack-plugin": "^3.0.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.2.3",
    "lerna": "^3.18.3",
    "sass": "^1.23.1",
    "sass-loader": "^7.3.1",
    "vue-template-compiler": "^2.5.21"
  }
}

vue.config.js: 

const CompressionPlugin = require("compression-webpack-plugin");
const path = require("path");
module.exports = {
  outputDir: path.resolve(__dirname, "../PmpTeamMateDeploy/Pmp.Web.Inventory"),
  configureWebpack: {
    plugins: [new CompressionPlugin()],
    devtool: "source-map"
  },
  css: {
    loaderOptions: {
      sass: {
        data: `
            @import "@/assets/style/style.scss"; 
          `
      }
    }
  },
  pwa: {
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      swSrc: "src/service-worker.js",
      exclude: [/\.map$/, /manifest\.json$/]
    },
    themeColor: "#78a22e"
  },
  chainWebpack: config => {
    ["vue-modules", "vue", "normal-modules", "normal"].forEach(match => {
      config.module
        .rule("scss")
        .oneOf(match)
        .use("sass-loader")
        .tap(opt =>
          Object.assign(opt, { data: `@import '~@/assets/style/style.scss';` })
        );
    });
  }
};

ОБНОВЛЕНИЕ: В родительском компоненте в разделе компонентов я добавил AddScan: () => import ("@ / components / scan"), и это избавило от ошибок компиляции, которые я получал, однако я все еще не могу скомпилировать при сохранении файла AddScan.

Я также обновляю vue-cli и все плагины и зависимости с 3.12.1 до 4.0.5, core-js с 2.6.10 до 3.3.5, sass-загрузчик с 7.3.1 до 8.0.0, новернулся к 7.3.1, потому что он по какой-то причине вызвал у меня 104 ошибки при компиляции, а также узел с 10. что-то до 12.13.0.

ОБНОВЛЕНИЕ 2: В основном проблема заключается в том, чтоvue отказывается компилировать новые файлы. Старые компилируются нормально по какой-то причине. Я попытался загрузить старую версию ветки с более старыми версиями пакетов, просто установив npm, все равно не смогу скомпилировать новые файлы.

1 Ответ

0 голосов
/ 30 октября 2019

Ну, я чувствую себя невероятным идиотом, но здесь мы идем: компонент был в компонентах / сканировать, но так как это был родительский компонент, и я вызываю его в виде, я совершенно забыл сделать импорт / экспорт в своем индексеФайл .js в папке сканирования.

components / scan / index.js: 

import ScanGrid from "./ScanGrid";
import ScanAdd from "./ScanAdd";

export { ScanGrid };
export { ScanAdd };
...