FranckFreiburger / http-vue-loader

load .vue files from your html/js
MIT License
1.48k stars 273 forks source link

IE 11 - "Failed to resolve async component default: InvalidStateError" #87

Open AEsmerio opened 4 years ago

AEsmerio commented 4 years ago

My app is working in all browsers except IE11, and as far I read (I hope I didn't skip any relevant line) it say it also work on IE11.

I've a component that is used on my router. when I'm using the app and navigate to this route, I've this issue on IE11 console.

image

As it's a legacy app, I'm trying to convert all the routes and components a proper singleFileComponent.vue, then after this implement the build process in it.

Here's a summary of how I'm using. It's working on Edge, Chrome, Safari, Opera and Samsung. Only missing IE11 to make everything perfect for us.

I've tried

index.html

<head>
...
<script type="text/javascript" src="/js/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/http-vue-loader@1.4.1/src/httpVueLoader.min.js"></script>

</head>

main.js

var routes = [
  {
    name: "root",  
    path: "/"
  }, 
  {
    name: "pathToComponent",
    path: "/pathToComponent",
    component: window.httpVueLoader('/view/component.vue')
  }  
]

var router = new VueRouter({routes:routes});

var app = new Vue({
  el: "#app",
  router: router,
  ...

myComponent.vue

<template>
  <div class="dark" >
    <h1>{{myText}}</h1>     
  </div>
</template>

<script>
module.exports = {
  data: function() {
    return {
      myText: 'Hiii',
    }
  },
  mounted: function () {
    console.log("mounted Component")
  }
}
</script>

<style scoped>
.dark{
  background-color: black;
  color: white;
}

</style>
littlephone commented 4 years ago

a dup of #83