Vue-dropzone: Error in ie 11 SCRIPT1003: Expected ':'

[czbas23]

[RomanNalapko]

Hi @rowanwins,
I have the same issue in IE11 with [email protected]

[rowanwins]

Hi @czbas23 & @RomanNalapko

You should be able to find some suggestions to support IE11 in this issue
https://github.com/rowanwins/vue-dropzone/issues/437

Regards,
Rowan

[czbas23]

I use Laravel not has file vue.config.js. I use .babelrc, how can I fix the problem?

[RomanNalapko]

@rowanwins Thanks for advice, but I'm not using vue-cli.
I'm using webpack, ts-loader with target ES5

[rowanwins]

Can you try npm install @babel/polyfill --save and then somewhere in your project do import '@babel/polyfill'

[RomanNalapko]

babel/polyfill does not help

[rosdi]

I have to downgrade to 3.5.1 for it to work.
I understands why @rowanwins not supporting this due IE being obsolete browser, but poor souls like us still need to support IE due to company policy.

-- EDIT --
This is not a critisim to @rowanwins ... just explaining why some people insists on IE support... I am deeply thankful for this hard work.

[rowanwins]

All good @rosdi :)

I understand that it would be good for it to work, we just need to find a repeatable way for people to do it..

[jsodeman]

I believe I have a fix for this. Here's my config using Webpack 4 and Babel 7. You'll have to adjust for earlier versions of either.

babel.config.js

module.exports = {
    presets: ["@babel/preset-env"],
    overrides: [
        {
            test: ["./node_modules/vue2-dropzone"],
            presets: [
                ["@babel/preset-env", { targets: { ie: "11" } }],
            ],
        }],
};

Inside module:rules: in webpack.config.js

{
    test: /\.js$/,
    exclude: file => (
        /node_modules/.test(file) &&
        !/vue2-dropzone/.test(file)
    ),
    use: [
        { loader: "babel-loader" },
    ],
},

[rowanwins]

Thanks for sharing @jsodeman

[thatdoorsajar]

First off thanks @rowanwins this is a great wrapper for dropzone, so much nicer to use in our Vue app.

Like @rosdi I've also had to drop back to 3.5.1 to ensure everything works on IE. This isn't really a problem for us but I am just wandering if IE compatibility is on the road map for future releases?

[lenvanessen]

Same problem here, would be nice to get a fix for this in the new version.

[rowanwins]

Hi @thatdoorsajar & @lenvanessen

A fix would indeed be great. Unfortunately I'm now operating on a mac and so IE11 testing is a bit trickier. I'm open to a PR if someone can identify a resolution.

[alexey-v-paramonov]

This is because dist/vue2Dropzone.js has es6 code not transpiled into es5 supported by IE11.

[WilliamDASILVA]

Having the same issue as @RomanNalapko with the version 3.5.9.
Tested through BrowserStack.

[exhtml]

+1 to fix this, thank you very much for your awesome dropzone wrapper!

[arkhamvm]

+1. Build into es5 should fix the problem.

[dementiev]

have the same issue in IE 11 with react-babel app

[Paul-Cl-ark]

Rolling back to 3.5.1 worked for me

[FerraBraiZ]

I believe I have a fix for this. Here's my config using Webpack 4 and Babel 7. You'll have to adjust for earlier versions of either.

babel.config.js

module.exports = {
  presets: ["@babel/preset-env"],
  overrides: [
      {
          test: ["./node_modules/vue2-dropzone"],
          presets: [
              ["@babel/preset-env", { targets: { ie: "11" } }],
          ],
      }],
};

Inside module:rules: in webpack.config.js

{
  test: /\.js$/,
  exclude: file => (
      /node_modules/.test(file) &&
      !/vue2-dropzone/.test(file)
  ),
  use: [
      { loader: "babel-loader" },
  ],
},

@jsodeman's solution indeed fixed the untranspilled code and it is working in ie 11

[sudhakarselva]

Nuxt also same issue , tried to build: {
transpile: ['vue2-dropzone']
} but this leads to
Unknown custom element: - did you register the component correctly? For recursive
components, make sure to provide the "name" option.Please provide any workaround? Thanks

[Paul-Cl-ark]

Nuxt also same issue , tried to build: {
transpile: ['vue2-dropzone']
} but this leads to
Unknown custom element: - did you register the component correctly? For recursive
components, make sure to provide the "name" option.Please provide any workaround? Thanks

I've had to do this: in vue.config.js:

transpileDependencies: ['vue2-dropzone']

As you can see above, initially rolling back worked, until it didn't...

[sudhakarselva]

@Paul-Cl-ark , after adding in transpile dep .component stopped working for me. Failed to mount component: template or render function not defined.

[Paul-Cl-ark]

How are you registering it?

<template>
<VueDropzone />
</template>
<script>
import VueDropzone from 'vue2-dropzone'
export default {
  name: 'UploadBox',
  components: { VueDropzone }
}
</script>

[sudhakarselva]

@Paul-Cl-ark .same way only . i tried adding in transpile for babel but i think problem is because we are using code from dist whiich is already built using some babel config .inorder to fix this issue i raised pull request for exposing src folder which is transpiled by my build config so it resolved this issue.I hope it get merged. i think exposing src folder is mandatory so that user can use their build pipeline

Please refer:- https://github.com/rowanwins/vue-dropzone/pull/534

Useful link:-
Thorsten Lünborg - Vue CLI – How to write components with it( https://www.youtube.com/watch?v=WH_zrZpMtCE )
Use patch package, if u cant wait for pull request merge. https://www.npmjs.com/package/patch-package