Vue-dropzone: Cannot find ~dropzone/dist/dropzone.css when Vue is Runtime-only

[rfestag]

• Vue2-dropzone Version: 2.3.5
• Node Version (node -v): v8.2.1
• NPM Version (npm -v): 5.3.0
• OS: Manjaro (Arch based linux)

Description:

I am running vue in runtime-only mode, and am trying to integrate vue-dropzone with vue-form-generator. I get the following error:

07:31:36 webpacker.1 | ERROR in ./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-3fde5d06","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./node_modules/vue2-dropzone/src/index.vue
07:31:36 webpacker.1 | Module build failed: Error: Failed to find '~dropzone/dist/dropzone.css'
07:31:36 webpacker.1 |     in [ 
07:31:36 webpacker.1 |         /home/ryan/Code/yctaco/node_modules/vue2-dropzone/src
07:31:36 webpacker.1 |     ]
07:31:36 webpacker.1 |     at /home/ryan/Code/yctaco/node_modules/postcss-import/lib/resolve-id.js:48:11
07:31:36 webpacker.1 |     at <anonymous>
07:31:36 webpacker.1 |  @ ./node_modules/vue2-dropzone/src/index.vue 4:2-215
07:31:36 webpacker.1 |  @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/components/dropzoneField.vue
07:31:36 webpacker.1 |  @ ./app/javascript/components/dropzoneField.vue
07:31:36 webpacker.1 |  @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/components/editablePage.vue
07:31:36 webpacker.1 |  @ ./app/javascript/components/editablePage.vue
07:31:36 webpacker.1 |  @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/javascript/pages/post.vue
07:31:36 webpacker.1 |  @ ./app/javascript/pages/post.vue
07:31:36 webpacker.1 |  @ ./app/javascript/packs/post.js
07:31:36 webpacker.1 |  @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./app/javascript/packs/post.js

It seems like it is looking in the wrong location for dropzone.css (the error seems to imply it is only looking in vue2-dropzone/src, not in ~dropzone/dist. This may be a webpack misconfiguration, but I have no idea where to look. The component itself seems to work, it just isn't styled at all.

Steps To Reproduce:

My component looks like this:

<template>
  <dropzone :id='schema.options.id' :url=schema.options.url :dropzone-options=schema.options>
    <input type="hidden" name="token" value="xxx">
  </dropzone>
</template>
<script>
  import Dropzone from 'vue2-dropzone/src/index.vue'
  import { abstractField } from "vue-form-generator"

  export default {
    components: { Dropzone },
    mixins: [ abstractField ],
  }
</script>

[Kishimotovn]

Anyone know how to fix this?

[vrajroham]

As you are directly importing the component that's why below line is causing the error. While compiling it's exact location is not getting due to import in less.

https://github.com/rowanwins/vue-dropzone/blob/vue2/src/index.vue#L402

@import url('~dropzone/dist/dropzone.css');

Try replacing exact location of css manually if it works.

[vrajroham]

@rfestag Did you managed to solve the issue?

[rfestag]

Unfortunately no. I tried just replacing the import in index.vue with the path to dropzone.css, and it started throwing

06:22:31 webpacker.1 | TypeError: node.parent.after is not a function

I honestly didn't bother trying to go any further because it wasn't really a usable solution anyways, and I had already started going down a different path to get the desired functionality. I know you guys are in the middle of a rewrite, so hopefully support for runtime-only mode will be included in that.

[Etheryte]

I ran into the same issue when updating nuxt-dropzone to 3.0.0, for the time being, the easy solution was to locally patch the include path:

@import url('dropzone/dist/dropzone.css');

It would be nice to get a generic solution to the problem, though.

[DaniG2k]

+1 Having the same issue here.

[furyscript]

Same problem, I remove ~ from library.

[Etheryte]

Removing the tilde was the same solution I used for the Nuxt version — is the tilde necessary in the import path at all? Shouldn't it resolve in all cases without it as well?

[furyscript]

In alternative, you can write an scss file like an src folder and we can overwrite variable used for import url in our application.

[DaniG2k]

Is there an official solution to this? It's quite odd but when I include the vue-dropzone component into my page I cannot see any styles unless I manually add the styles myself.

Is there some css dependency when using Rails+webpack+vue-dropzone that is required to make this work?

[rowanwins]

Hi all,

I believe the new version of this component should address this issue, v3.0.3 . If someone could test that would be fab. The dropzone css file is now directly included into our component css, as seen in vue2Dropzone.css.

Thanks

[furyscript]

Now it's seems to work, I don't get error on compiler.

[rowanwins]

Yay, thanks for checking @furyscript . Going to close this issue but let me know if anyone has any problems

[DaniG2k]

I am still unable to see the default css files (vue2Dropzone.css), but it might be due to Webpacker + Rails. I've posted my question on this SO thread. Has anyone experienced something similar?

[vrajroham]

@DaniG2k

As per @rowanwins comment above

Hi all,

I believe the new version of this component should address this issue, v3.0.3 . If someone could test
that would be fab. The dropzone css file is now directly included into our component css, as seen in
vue2Dropzone.css.

Thanks

Make sure your component version is 3.0.3+ for this issue.

[DaniG2k]

Yep I'm using 3.0.3:

vue2-dropzone@^3.0.3:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/vue2-dropzone/-/vue2-dropzone-3.0.3.tgz#7ff58f7f4c1c80f5867b6cb4bdbbddb4edb6bad8"
  dependencies:
    dropzone "^5.2.0"

but I am having to load the css manually because it doesn't seem to load properly in a Rails app, as per the aforementioned StackOverflow post.

[rowanwins]

Sorry @DaniG2k I dont really know much about rails and how you load dependencies or static assets.

Is there something that we are doing differently from other components? Can you point us to a component that works for you?