I'm trying to export two web components in a public package on npm, using Vite with TypeScript.
Vite has a Library Mode which works well. The ESM and UMD files are both being transpiled into my /dist directory. My question is how to export the web components in the entry point file.
I have an entry point file called export.js
import AwesomeHeader from './components/AwesomeHeader.vue'
import AwesomeFooter from './components/AwesomeFooter.vue'
export default { // I feel like the problem is here.
components: {
AwesomeHeader: AwesomeHeader,
AwesomeFooter: AwesomeFooter,
}
}
The idea is that I'll npm publish the project and use it like this.
npm i @sparkyspider/awesome-components #(ficticious example)
import {AwesomeHeader, AwesomeFooter} from '@sparkyspider/awesome-components' // does not find
(AwesomeHeader and AwesomeFooter are not found as exports in the node_module, even though the JavaScript files are referenced / found)
My package.json below:
{
"name": "@sparkyspider/awesome-components",
"version": "1.0.8",
"files": [
"dist"
],
"main": "./dist/awesome-components.umd.js",
"module": "./dist/awesome-components.es.js",
"exports": {
".": {
"import": "./dist/awesome-components.es.js",
"require": "./dist/awesome-components.umd.js"
}
},
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.0.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.2.2",
"@vue/compiler-sfc": "^3.0.5",
"typescript": "^4.1.3",
"vite": "^2.3.3",
"vue-tsc": "^0.0.24"
},
}