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

Question

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:

Anyone can help me solve this problem?

Here is the source

Hope you can find more information with the source.

You need to show us how you are importing the third-party component or library — unloco
– unloco, Commented Apr 25, 2021 at 15:18

Ryuman · Accepted Answer · 2021-04-26 19:10:04Z

1

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)

answered Apr 26, 2021 at 19:10

Ryuman

1,0476 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related