Error is reported when introducing files on demand, prompting Cannot read property 'name' of undefined

develop vue plug-ins to report errors

recently, there is a requirement that I want to encapsulate a set of components for internal use. General components are developed professionally through secondary encapsulation of iView. after I built the environment, I encapsulated an input component of iview, and there is no problem with local calls. After entering npm run build and npm pack, only one tgz package was generated locally, and then I introduced it in another project. As a result, the report was wrong. See below for details. Here, it is assumed that the project you encapsulate is A, and the project that introduces An is B.

components encapsulated in A

<template>
  <Input class="fss-input" :placeholder="placeHolder"></Input>
</template>

<style lang="less" scoped>
.fss-input {
  width: 200px;
}
</style>

<script>
import { Input } from "iview"
export default {
  name: "fss-input",
  props: {
    placeHolder: {
      type: String,
      default: "..."
    }
  },
  components: {
    Input
  }
}
</script>

the following is the code in A that wraps the above components to use as vue plug-ins

import FssInput from "./components/input"

const components = [
  FssInput
]

//elementiview
const install = function(Vue, opts = {}) {
  components.map(component => {
    console.log("name", component.name)
    Vue.component(component.name, component)
  })
}

// auto install
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue)
}

const API = {
  install,
  ...components
}

module.exports.default = module.exports = API

B introduces A through npm install, and in order to introduce A components into B on demand, the following configuration is made

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": ["import", {
      "libraryName": "FssFrontComponent", //"fss-front-component"
      "libraryDirectory": "src/components"
    }]
}

the following is the code to introduce An into B

<template>
  <div class="hello">
    <fss-input></fss-input>
  </div>
</template>

<script>
import { FssInput } from "fss-front-component"
export default {
  name: "HelloWorld",
  components: {
    [FssInput.name]: FssInput
  },
  data () {
    return {
      placeholder: ""
    }
  }
}
</script>

report an error as shown in the following figure :


:

many tutorials in the evening are written by ourselves. We need a component library here, but there is only one input for the time being. If you have a good solution, please do not hesitate to let me know, thank you ~

Mar.31,2021

is solved, mainly due to the previous configuration problem in webpack and a mistake in the entry file. But at present, what can be done is the global introduction, and later we need to try to change it to on-demand introduction.

Menu