Skip to content

Cannot import Dropzone.svelte from a local package with npm link  #151

Closed
@EnigmaCurry

Description

@EnigmaCurry
Contributor

I am getting setup to work on the Dropzone component on my local workstation, as a dependency in my app. So I think the right way to do that is to clone it locally and to use npm link, so that's what I'm doing:

  • clone svelte-file-dropzone locally.
    • npm install
    • npm run package
    • npm link
  • cd to my app project directory.
    • npm link svelte-file-dropzone
    • npm install
    • npm run build

In my own app I am importing it like this:

import Dropzone from "svelte-file-dropzone/Dropzone.svelte";

The build fails like this:

$ npm run build

> frontend@0.0.1 build
> vite build

vite v5.0.11 building SSR bundle for production...
✓ 7 modules transformed.
[commonjs--resolver] Missing "./Dropzone.svelte" specifier in "svelte-file-dropzone" package
error during build:
Error: Missing "./Dropzone.svelte" specifier in "svelte-file-dropzone" package
    at e (file:///home/ryan/git/vendor/enigmacurry/easy-send-file/frontend/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:21914:25)
    at n (file:///home/ryan/git/vendor/enigmacurry/easy-send-file/frontend/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:21914:627)
    at o (file:///home/ryan/git/vendor/enigmacurry/easy-send-file/frontend/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:21914:1297)
    at resolveExportsOrImports (file:///home/ryan/git/vendor/enigmacurry/easy-send-file/frontend/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:29466:20)
    at resolveDeepImport (file:///home/ryan/git/vendor/enigmacurry/easy-send-file/frontend/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:29485:31)
    at tryNodeResolve (file:///home/ryan/git/vendor/enigmacurry/easy-send-file/frontend/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:29210:20)
    at Object.resolveId (file:///home/ryan/git/vendor/enigmacurry/easy-send-file/frontend/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:28978:28)
    at Object.handler (file:///home/ryan/git/vendor/enigmacurry/easy-send-file/frontend/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:67380:19)
    at file:///home/ryan/git/vendor/enigmacurry/easy-send-file/frontend/node_modules/rollup/dist/es/shared/node-entry.js:18670:40
    at async PluginDriver.hookFirstAndGetPlugin (file:///home/ryan/git/vendor/enigmacurry/easy-send-file/frontend/node_modules/rollup/dist/es/shared/node-entry.js:18570:28)

I tried changing the import to all of the following and none of them worked:

import Dropzone from "svelte-file-dropzone/Dropzone.svelte";
import Dropzone from "svelte-file-dropzone/components/Dropzone.svelte";
import Dropzone from "svelte-file-dropzone/lib/components/Dropzone.svelte";
import Dropzone from "svelte-file-dropzone/src/lib/components/Dropzone.svelte";

I think the fix is to include ./Dropzone.svelte in the package.json exports config, which I read about in the svelte packaging guide :

  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "svelte": "./dist/index.js"
    },
    "./Dropzone.svelte": {
      "types": "./dist/components/Dropzone.svelte.d.ts",
      "svelte": "./dist/components/Dropzone.svelte"
    }
  },

Although I have no idea why this fix is actually needed, I will open a PR in case you want to see the fix.

Activity

gponty

gponty commented on Jan 16, 2024

@gponty

Same issue here, thx for PR

Christian-Ackermann

Christian-Ackermann commented on Jan 19, 2024

@Christian-Ackermann

The error was reported two weeks ago, no one integrates the PR? My app can no longer be created using CI because the build command fails ....

PPP01

PPP01 commented on Jan 19, 2024

@PPP01

Same here - the new version v2.0.3 is unfortunately useless for us, because our build-system cannot use a PR.
With v2.0.2 everything is fine.

Christian-Ackermann

Christian-Ackermann commented on Jan 19, 2024

@Christian-Ackermann

I have created a small workaround by downloading and editing the Package.Json locally. Then I added the corrected JSON file to my project and during the CI pipeline before I call "npm build" I replace the broken one against my manually corrected version. This is quite risky, but at least you can get on without a fork.

  • find ./node_modules/svelte-file-dropzone/ -name "package.json" -type f -delete
  • mv ./svelte-dropzone-fix-package.json node_modules/svelte-file-dropzone/package.json
Saibamen

Saibamen commented on Jan 19, 2024

@Saibamen

Needed to go back from "^2.0.3" to "2.0.2" to fix vite build command

arackaf

arackaf commented on Jan 19, 2024

@arackaf
Collaborator

Hi all! Sorry, there was an accidental breaking change in 2.0.2 via pr #150 (per the comments above I think you need to pin to 2.0.1, not 2.0.2).

That said, the fix is to stop doing

import Dropzone from "svelte-file-dropzone/Dropzone.svelte";

and instead do

import Dropzone from "svelte-file-dropzone";
Saibamen

Saibamen commented on Jan 19, 2024

@Saibamen

Please update documentation - README on GH and NPM

arackaf

arackaf commented on Jan 19, 2024

@arackaf
Collaborator

Ah! Good point

arackaf

arackaf commented on Jan 19, 2024

@arackaf
Collaborator

2.0.4 is out with the readme updated to reflect the new import path

Saibamen

Saibamen commented on Jan 20, 2024

@Saibamen

Thanks

Sorry, there was an accidental breaking change in 2.0.2 via pr #150 (per the comments above I think you need to pin to 2.0.1, not 2.0.2).

PR #150 was merged in commit 8395738, and released in v2.0.2 (https://github.com/thecodejack/svelte-file-dropzone/releases/tag/v2.0.2)
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @EnigmaCurry@PPP01@Saibamen@arackaf@gponty

      Issue actions

        Cannot import Dropzone.svelte from a local package with `npm link` · Issue #151 · thecodejack/svelte-file-dropzone