CommonJS packed library has no named exports
I created an icon package library for my ecosystem using Vite and Typescript. It's a simple library that only needs to export icon objects. When I try to use the compiled cjs file, I always get this error message, even though I try only named exports
(I try to use it with 'npm link' in a test application inside the library)
Uncaught SyntaxError: The requested module '/@fs/C:/Users/tidus/Projects/libraries/packages/glyphs/dist/glyphs.cjs.js' does not provide an export named 'ArrowLightLeft' (at App.tsx:3:9)
I've built it with ViteJS
, tsc
into commonjs with no luck.
if I use it import Test from '@xengine/glyphs'
instead of name开发者_JAVA百科d import it give me this output :
Here is the library's index.ts
import {IconType} from "./iconType";
const ArrowLightLeft: IconType = {
name: 'arrow-light-left',
key: 'ArrowLightLeft',
type: 'misc',
width: 24,
height: 24,
attributes: {"fill":"currentColor"},
svgPathData: ["M11.39 2.42c.28.27.43.63.43 1.01s-.16.75-.43 1.01L3.57 12l7.82 7.56c.56.56.55 1.45-.02 2s-1.48.56-2.07.02L.43 13.01C.16 12.74 0 12.38 0 12s.16-.74.43-1.01L9.3 2.42c.28-.27.65-.42 1.04-.42s.77.15 1.05.42zM1.48 12c0-.79.66-1.43 1.48-1.43h19.21c.82 0 1.48.64 1.48 1.43s-.66 1.43-1.48 1.43H2.96c-.82 0-1.48-.64-1.48-1.43z"],
}
export {ArrowLightLeft};
package.json
{
"name": "@xengine/glyphs",
"version": "1.0.0",
"description": "A library of glyphs",
"main": "./dist/glyphs.cjs.js",
//"module": "./dist/glyphs.es.js" --> opted out in order to test cjs.js
"types": "./dist/types/index.d.ts",
"private": false,
"type": "module",
"files": [
"dist"
],
"scripts": {
"build": "vite build"
},
"devDependencies": {
}
}
vite.config.js
export default defineConfig({
plugins: [
dtsPlugin(
{
outputDir: "dist/types",
}
)
],
build: {
lib: {
entry: "./src/index.ts",
name: "Glyphs",
fileName: (format) => `glyphs.${format}.js`,
formats: ["cjs", "es"],
},
minify: false,
}
})
this is how I try to use the library :
import {ArrowLightLeft} from "@xengine/glyphs";
function App() {
console.log(ArrowLightLeft)
return (
<div className="App">
</div>
)
}
export default App
精彩评论