TypeError: 정의되지 않은 속성 'rtl'을 읽을 수 없습니다.

TypeError: 정의되지 않은 속성 'rtl'을 읽을 수 없습니다.

vuejs(vuetify 2.1.4를 사용하는) 컴포넌트 라이브러리를 구축하여 npm 링크를 통해 다른 응용 프로그램에 로컬로 Import하려고 하는데 다음과 같은 오류가 계속 발생합니다.

TypeError: 정의되지 않은 속성 'rtl'을 읽을 수 없습니다.

또는

TypeError: 정의되지 않은 속성 'lang'을 읽을 수 없습니다.

참고. Test라고 불리는 테스트의 기본 컴포넌트는 Vuetify가 포함되어 있지 않기 때문에 동작합니다.

여기 스크린샷이 있습니다.

App1(구축 중인 앱)

index.displaces를 표시합니다.

import Agent from '@/components/Agent'
import Test from '@/components/Test'

const AgentLibrary = {
  install(Vue, options = {}) {
    Vue.component(Test.name, Test)
    Vue.component(Agent.name, Agent)
  }
}

export default AgentLibrary

에이전트.vue

<template>
  <v-container>
    <!-- Header -->
    <v-row>
      <v-col md="5" class="col-center-content">
        <h2>Agent Information</h2>
      </v-col>

      <v-spacer></v-spacer>

      <v-col md="3">
        <v-btn text rounded>Cancle</v-btn>
        <v-btn rounded>Save</v-btn>
      </v-col>
    </v-row>

    <!-- Form -->
    <v-row>
      <v-col md="5">
        <AvatarUploader />
      </v-col>

      <v-col md="7">
        <v-row>
          <v-col md="6">
            <v-select rounded placeholder="Agent Type" outlined></v-select>
          </v-col>
          <v-col md="6">
            <v-select rounded placeholder="No. Parents" outlined></v-select>
          </v-col>
          <v-col md="12">
            <v-text-field rounded placeholder="Licensekey" outlined disabled></v-text-field>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
import AvatarUploader from "@/components/AvatarUploader";

export default {
  name: "Agent",
  components: {
    AvatarUploader
  }
};
</script>
<style lang="scss" scoped>
span {
  font-size: 20px;
  color: rgb(162 162 162);
}
.col-center-content {
  display: flex;
  justify-content: center;
}
</style>

test.vue

<template>
<div>
    <h1>HELLO WORLD!</h1>
</div>
</template>
<script>
export default {
    name: "Test",
    mounted() {
        console.log("HELLO WORLD!")
    }
}
</script>
<style lang="scss" scoped>

</style>

패키지.json

{
  "name": "AgentComponents",
  "main": "dist/AgentComponents.umd.js",
  "module": "dist/AgentComponents.esm.js",
  "unpkg": "dist/AgentComponents.min.js",
  "browser": {
    "./sfc": "src/components/Agent.vue"
  },
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "lint": "vue-cli-service lint",
    "build": "vue-cli-service build",
    "build:plugin": "cross-env NODE_ENV=production NODE_OPTIONS='--max-old-space-size=8192' vue-cli-service build --target lib --inline-vue --name AgentComponents src/index.js"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "moment": "^2.24.0",
    "rollup": "^1.24.0",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuetify": "^2.1.4",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.12.0",
    "@vue/cli-plugin-eslint": "^3.12.0",
    "@vue/cli-service": "^3.12.0",
    "cross-env": "^5.2.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "rollup-plugin-buble": "^0.19.8",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-vue": "^5.0.1",
    "sass": "^1.17.4",
    "sass-loader": "^7.1.0",
    "vue-cli-plugin-vuetify": "^1.0.2",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.2.2"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

아바타 업로더표시하다

<template>
  <v-row>
    <v-col md="12" class="col-center-content">
      <v-avatar size="230" color="rgb(232 239 244)">
        <v-img aspect-ratio="1" width="200px" src="@/assets/user-alt.png"></v-img>
      </v-avatar>
    </v-col>

    <v-col md="12">
      <v-file-input
        ref="file"
        accept="image/png, image/jpeg, image/bmp"
        placeholder="Pick a logo"
        label="Your photo or company logo"
      ></v-file-input>
    </v-col>
  </v-row>
</template>
<script>
export default {
  name: "AvatarUploader"
};
</script>
<style lang="scss" scoped>
span {
  font-size: 20px;
  color: rgb(162 162 162);
}
.col-center-content {
  display: flex;
  justify-content: center;
}
</style>

App2(App1을 가져오는 앱)

main.discloss.main.discloss.

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import vuetify from './plugins/vuetify';

import "AgentComponents"

console.log(AgentComponents.default)

Vue.use(AgentComponents.default)

new Vue({
     vuetify,
  render: h => h(App)
}).$mount('#app')

app.vue

<template>
  <v-app>
      <Agent/>
  </v-app>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  data: () => ({
    //
  }),
};
</script>

plugins/sysetify.displugs.

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'mdi',
  },
});

App1의 Agent 컴포넌트가 정상적으로 표시되며(npm run serve 실행), App2에 빌드 및 Import 시 오류 없이 동작합니다.

Chrome 브라우저에 표시되는 오류는 다음과 같습니다.실행 시 Chrome 콘솔에 여러 오류가 표시됩니다.

TypeError: Cannot read property 'rtl' of undefined
    at VueComponent.labelPosition (AgentComponents.umd.js?7204:17243)
    at Watcher.get (AgentComponents.umd.js?7204:5517)
    at Watcher.evaluate (AgentComponents.umd.js?7204:5626)
    at VueComponent.computedGetter [as labelPosition] (AgentComponents.umd.js?7204:5791)
    at VueComponent.genLabel (AgentComponents.umd.js?7204:17422)
    at VueComponent.genTextFieldSlot (AgentComponents.umd.js?7204:17541)
    at VueComponent.genDefaultSlot (AgentComponents.umd.js?7204:17422)
    at VueComponent.genInputSlot (AgentComponents.umd.js?7204:16327)
    at VueComponent.genInputSlot (AgentComponents.umd.js?7204:17422)
    at VueComponent.genControl (AgentComponents.umd.js?7204:16290)

TypeError: Cannot read property 'lang' of undefined
    at VueComponent.listData (AgentComponents.umd.js?7204:22317)
    at Watcher.get (AgentComponents.umd.js?7204:5517)
    at Watcher.evaluate (AgentComponents.umd.js?7204:5626)
    at VueComponent.computedGetter [as listData] (AgentComponents.umd.js?7204:5791)
    at VueComponent.staticList (AgentComponents.umd.js?7204:22317)
    at Watcher.get (AgentComponents.umd.js?7204:5517)
    at Watcher.evaluate (AgentComponents.umd.js?7204:5626)
    at VueComponent.computedGetter [as staticList] (AgentComponents.umd.js?7204:5791)
    at VueComponent.genList (AgentComponents.umd.js?7204:22596)
    at VueComponent.genMenu (AgentComponents.umd.js?7204:22624)

이것은, 이 때문에 발생하고 있는 것입니다.--inline-vue플래그. Vue에게 자체 인스턴스를 생성하여 라이브러리에 번들하도록 지시합니다(자세한 설명은 여기를 참조하십시오).

코드에서 Vue를 인스턴스화할 때 다음과 같은 작업을 수행합니다.

new Vue({
    vuetify,
    ...
});

그러나 Vue가 이 작업을 수행할 때 vuetify 플러그인이 옵션으로 전달되지 않습니다.Vue컨스트럭터

한 가지 솔루션은 이 시스템을 제거하는 것입니다.--inline-vue깃발이요 하지만 이게 당신 사건과 관련이 있는지 모르겠네요

저는 Vuetify repo, https://github.com/vuetifyjs/vuetify/issues/10198,에서 Github 발행/질문을 열어 그들이 이 플래그를 지원할 계획이 있는지 물었습니다.

언급URL : https://stackoverflow.com/questions/58435476/typeerror-cannot-read-property-rtl-of-undefined