TypeError：无法读取未定义的属性“rtl”

Posted 2023-02-22

【中文标题】TypeError：无法读取未定义的属性“rtl”

【英文标题】：TypeError: Cannot read property 'rtl' of undefined

【发布时间】：2020-02-14 13:02:15

【问题描述】：

我正在尝试构建一个 vuejs（使用 vuetify 2.1.4）组件库并通过 npm 链接将其导入本地的另一个应用程序，但我不断收到多个错误，说要么

或

TypeError: 无法读取未定义的属性“lang”

注意。称为 Test 的基本测试组件可以正常工作，因为它不包含 Vuetify 中的任何内容。

这是截图

App1（正在构建的应用）

index.js

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>

package.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"
  ]

头像上传器.vue

<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"  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.js

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>

插件/vuetify.js

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

Vue.use(Vuetify);

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

我希望看到我在 App1 中的代理组件在构建并导入到 App2 时正常显示并正常工作（运行 npm run serve），并且没有任何错误。

在我的 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)

【问题讨论】：

rtl 和 lang 通常在 html 标记中，是否与 Vue 在 HTML 中作为应用程序给出的内容混淆？

@ThomasEdwards 我不太确定你的意思，rtl 和 lang 没有在任何地方指定，所以我假设它来自 Vuetify 库。

从查看 Vuetify 源代码来看，这些错误似乎来自分别访问 this.$vuetify.rtl 和 this.$vuetify.lang 的行。这表明this.$vuetify 是undefined。通常这表明您没有将vuetify 传递给您的new Vue，但您发布的代码在这方面似乎是正确的。

@skirtle 我注意到，如果我评论/删除选择字段和文件输入字段，我不再收到错误，并且组件按预期工作。所以我假设这只是 Vuetify 中的一个错误，并不是我可以从我的应用程序中修复的问题。

@Joakim 我认为这不太可能是 Vuetify 中的错误。初始化 Vuetify 时，它应该为所有组件添加一个 $vuetify 属性，并且这两个组件假设它会在那里。为什么这里没有发生这种情况我不知道，但它应该是可调试的，只需在浏览器中单步执行，看看它为什么没有正常运行。不要害怕 Vue/Vuetify 代码，如果你做一些单步调试，你会学到很多东西，也许能够解决这个问题。

【参考方案1】：

这是因为--inline-vue 标志而发生的。它告诉 Vue 创建自己的实例并将其捆绑到您的库中（有关详细说明，请参阅here）。

当您在代码中实例化 Vue 时，您会执行类似this:

new Vue(
    vuetify,
    ...
);

但是，当 Vue 为您执行此操作时，它不会将 vuetify 插件作为选项传递给 Vue 构造函数。

一种解决方案是删除--inline-vue 标志。但是，我不确定这与您的情况是否相关。

我在 Vuetify 存储库https://github.com/vuetifyjs/vuetify/issues/10198 上打开了一个 Github 问题/问题，询问他们是否计划支持此标志。