Search code examples
packagecomponentssveltesveltekit

How can I use a Svelte component lib which use other package in it?

I am making a component lib 'svelte-element-ui' with svelte, and this lib use some other packages like popperJs.

when I publish my component lib to npmjs, the package.json file like this:

{
  "name": "svelte-element-ui",
  "files": [
    "src/index.ts",
    "packages",
    "static",
    "dist"
  ],
  "devDependencies": {
    "@popperjs/core": "^2.9.1",
  },
  "svelte": "src/index.ts",
  "main": "src/index.ts",
  "typings": "types/index.d.ts",
  "author": "koory1st",
  "license": "MIT",
}

And I want to use this component lib in some other svelte web site project like svelte-kit, so I import it into the svelte-kit.

import { SeuSubMenu } from 'svelte-element-ui';

but I got the error when I visit the page:

Failed to resolve import "@popperjs/core" from "node_modules/.pnpm/[email protected]/node_modules/svelte-element-ui/packages/util/SveltePopperJs.ts". Does the file exist?

The relation like this:

enter image description here

Anyone can help me solve this problem?

Here is the source

Hope you can find more information with the source.

Solution

  • I think that the problem is that you are using @popperjs/core as a dev dependency instead, try to declare it as a dependency

    ...,
"dependencies": {
    "@popperjs/core": "^2.9.1",
},...

    remove it first using: npm uninstall @popperjs/core

    then install it using: npm install @popperjs/core (that will install it as runtime dependency)