Vue-cli3.0 cannot use "export default was not found in umd.js" after packaging components - Codes Helper - Programming Question Answer

Vue-cli3.0 cannot use "export default was not found in umd.js" after packaging components

problem description

use vue-cli3 to create a component that wants to be encapsulated as a third-party library and uploaded to npm for use by other projects, but vue-cli-service build-- target lib-- name lib1. / src/lib1.vue the packaged library cannot be used normally. Error:

 warning  in ./src/App.vue?vue&type=script&lang=js&
"export "default" (imported as "lib1") was not found in "lib1/dist/lib1.umd.js"

vue.runtime.esm.js?2b0e:601 [Vue warn]: Unknown custom element: <lib1> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

related codes

lib1-demo project source code

to easily install the component library from the local source directory: npm install-- save.. / lib1
package.json

{
  "dependencies": {
    "lib1": "file:../lib1",
    "vue": "^2.5.17"
  }
}

src/App.vue

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <lib1></lib1>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue"
import lib1 from "lib1/dist/lib1.umd.js"
// import lib1 from "lib1/src/lib1.vue"   // 
console.log(lib1)  // undefined

export default {
  name: "app",
  components: {
    HelloWorld,
    lib1
  }
}
</script>

what result do you expect? What is the error message actually seen?

Command line warning message when lib1-demo project npm run serve is started:

 warning  in ./src/App.vue?vue&type=script&lang=js&
"export "default" (imported as "lib1") was not found in "lib1/dist/lib1.umd.js"

browser console output:

[HMR] Waiting for update signal from WDS...

undefined

vue.runtime.esm.js?2b0e:601 [Vue warn]: Unknown custom element: <lib1> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <App> at src/App.vue
       <Root>

Vue.js vue-cli3 webpack4

Feb.18,2022

if you encounter the same problem, please refer to this article the reason for the
problem solved can be read in the original text, and I will post the solution

.

npm install --save-dev @babel/plugin-transform-modules-umd

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  plugins: ['@babel/plugin-transform-modules-umd'], //
};

so that the umd package can introduce testing locally in real time without npm publish .

this problem is caused by npm install < the path where the source code of the component library is located > . You can upload it to npm and then install it.
package.json:

{
  "dependencies": {
    "lib1": "file:../lib1",
    "vue": "^2.5.17"
  }
}

the specific principle is not clear, if there are students who know, please give me some advice!

lib1.umd.js

what is this

your lib1 is a component. From the error report you provided, it means that you did not register this component, and from the code you provided, you also wrote lib as a component, so you can only import lib from'. / lib1/src/lib.vue' . If you want to register a component in a js file, you should write this in the js file:

import Vue from 'vue'

Vue.component('lib',{
   template:`<div></lib>`
})

When

then introduces the js file, you don't have to register the component in components: {} . It is recommended that you take a look at the document ide/components-registration.html" rel=" nofollow noreferrer "> component knowledge . I don't quite understand your behavior of introducing packaged js files after packing.

does the landlord have a solution

Previous: Will the file become larger after Swoole receives the binary data and saves the file?

Next: Multiple definitions of an attribute are not allowed in Unhandled promise rejection SyntaxError: strict mode

Vue-cli3.0 cannot use "export default was not found in umd.js" after packaging components
problem description use vue-cli3 to create a component that wants to be encapsulated as a third-party library and uploaded to npm for use by other projects, but vue-cli-service build-- target lib-- name lib1. src lib1.vue the packaged library cann...

Vue.js vue-cli3 webpack4

Feb.18,2022
Vue-cli3.0 cannot use "export default was not found in umd.js" after packaging components
problem description use vue-cli3 to create a component that wants to be encapsulated as a third-party library and uploaded to npm for use by other projects, but vue-cli-service build-- target lib-- name lib1. src lib1.vue the packaged library cann...

Vue.js vue-cli3 webpack4

Feb.18,2022

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e93666-1456.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e93666-1456.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?