Cryptic message when using svelte-file-dropzone with storybook

[Volubyl]

Hello, first of all thank you for creating this lib.

Coming from React it's a pleasure to find something similar to react-dropzone.

While trying to use the lib with storybook I have this message that appears instead of the story

import DropZone from "./components/Dropzone.svelte"; export default DropZone;

Do you have an idea where this can come from?

The strange thing is that the lib works fine in svelte/sapper but not in storybook.

Versions used :

"sapper": "^0.28.0",
"svelte": "^3.32.1",
"@storybook/svelte": "^6.1.17"

The component code :

// DragAndDrop.svelte

<script>
    import Dropzone from "svelte-file-dropzone";
  let files = {
    accepted: [],
    rejected: []
  };
  function handleFilesSelect(e) {
    const { acceptedFiles, fileRejections } = e.detail;
    files.accepted = [...files.accepted, ...acceptedFiles];
    files.rejected = [...files.rejected, ...fileRejections];
  }
</script>

<Dropzone on:drop={handleFilesSelect} />
<ol>
  {#each files.accepted as item}
    <li>{item.name}</li>
  {/each}
</ol>

And the story code

import DragAndDrop from './DragAndDrop.svelte';
export default {
  title: 'UI/DragAndDrop',
  component: DragAndDrop,
  args: {},
};
export const Primary = () => ({
  Component: DragAndDrop,
  props: {},
});

I looked at your source code and I found this

https://github.com/thecodejack/svelte-file-dropzone/blob/master/src/index.js

Maybe it's related ?

Don't hesitate if I can help with something.

Thanks,

[thecodejack]

Probably import index.svelte instead. https://github.com/thecodejack/svelte-file-dropzone/blob/master/src/index.svelte

[Volubyl]

Hey!

Thank you for the answer.

I tried to import the component like this :

import Dropzone from 'svelte-file-dropzone/src/index.svelte';

Result: same message as before in storybook.

I also tried this:

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

Here the component is displayed in the storybook but I get a webpack error in the terminal :

10% building 13/14 modules 1 active ...ent/node_modules/svelte-loader/index.js??ref--7!/<path_to_node_modules>/node_modules/svelte-file-dropzone/src/components/Dropzone.svelteSyntaxError: Unexpected token {

I end up trying to copy/paste the content of src/components/Dropzone.svelte into index.svelte just to try something else and same result as above.

What I don't understand is where does this message import DropZone from "./components/Dropzone.svelte"; export default DropZone; come from?

I see it inside dist/index.js and dist/index.mjs

 c() {
    	t = text("import DropZone from \"./components/Dropzone.svelte\";\r\n\r\nexport default DropZone;");
    },

But if we import directly svelte-file-dropzone/src/index.svelte we are not supposed to load the file from the dist folder. Am I wrong ?

I don't have an extended knowledge about how the svelte "compilation" works and at this point it's a bit confusing for me ...

[thecodejack]

have you added svelte-loader of webpack?

[Volubyl]

Guess so, because I guess the other stories wouldn't have been loaded and I use the base config of storybook.

As far as I'm concerned, you can close this issue.

I was unable to solve the problem. Storybook was a requirement for my team and I so I ended up recreating a drop zone component.

If you're interested I followed the same strategy as IBM and I used DataTransfer Objects.

You can find the IBM's FileUploader here : https://github.com/IBM/carbon-components-svelte/blob/c670964e9355276e0a7bb0d2de718e39043596c2/src/FileUploader/FileUploaderDropContainer.svelte

Just out of curiosity were you able to reproduce the issue ?

Again thank your for sharing your code !

[thecodejack]

Nop. Unable to reproduce. Closing for now.

[kolmakova]

Hi, had the same problem, but I don't use storybook, so this text appears instead of a component no matter what I do. Was able to fix this by importing import Dropzone from 'svelte-file-dropzone/src/components/Dropzone.svelte'. Maybe it's a svelte-loader related problem.

Using these versions:

"svelte-file-dropzone": "^0.0.15",
"webpack": "^5.38.1",
"svelte-loader": "^3.1.1",
"svelte-preprocess": "^4.7.3",
"@tsconfig/svelte": "^1.0.12",
"ts-loader": "^8.0.0",
"typescript": "^4.3.2",

The webpack config for svelte-loader is:

{
    test: /\.svelte$/,
    include: [
      path.resolve('src'),
      path.resolve('node_modules'),
    ],
    use: {
      loader: 'svelte-loader',
      options: {
        preprocess: preprocess({}),
      },
    },
  }

tsconfig.json is:

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src", "types"],
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "strict": true,
    "skipLibCheck": true,
    "types": ["svelte"],
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "useDefineForClassFields": true,
    "target": "esnext",
    "allowSyntheticDefaultImports": true,
    "importsNotUsedAsValues": "error"
  }
}

[thecodejack]

reopening until I can personally verify this

[arackaf]

Hey all. This should work now, with the more standard package publishing that's there now. Can you give it a try on latest and let us know if it fails?