开发者

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 :

CommonJS packed library has no named exports

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
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜