title: vuejs 3: Uncaught TypeError: Object(...) is not a function
body: <p>I cannot get rid of the error.
  Somebody a tip why that is?</p>
  <p><em>I use vuejs in version 3 with a router.</em></p>
  <blockquote>
  <p>Uncaught TypeError: Object(...) is not a function</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/7uiCe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7uiCe.png" alt="enter image description here" /></a></p>
  <p><code>npm run serve</code></p>
  <blockquote>
  <p>WARNING  Compiled with 2 warnings<br />
  warning  in ./src/router.js &quot;export 'createRouter' was not found in
  'vue-router'  warning  in ./src/router.js &quot;export 'createWebHistory'
  was not found in 'vue-router'</p>
  </blockquote>
  <p><code>router.js:</code></p>
  <pre><code>import { createWebHistory, createRouter } from &quot;vue-router&quot;;
  import UserSettings from &quot;@/views/UserSettings.vue&quot;;
  import UserEmailsSubscriptions from &quot;@/views/UserEmailsSubscriptions.vue&quot;;
  import UserProfile from &quot;@/views/UserProfile.vue&quot;;
  import UserProfilePreview from &quot;@/views/UserProfilePreview.vue&quot;;
  import Home from &quot;@/views/Home.vue&quot;;
  import About from &quot;@/views/About.vue&quot;;
  import Notfound from &quot;@/views/Notfound.vue&quot;;
  
  const routes = [
    { path: &quot;/:catchAll(.*)&quot;, name: &quot;Notfound&quot;, component: Notfound },
    {
      path: &quot;/&quot;,
      name: &quot;Home&quot;,
      component: Home,
    },
    {
      path: &quot;/about&quot;,
      name: &quot;About&quot;,
      component: About,
    },
    {
      path: &quot;/settings&quot;,
      // You could also have named views at tho top
      component: UserSettings,
      children: [
        {
          path: &quot;emails&quot;,
          component: UserEmailsSubscriptions,
        },
        {
          path: &quot;profile&quot;,
          components: {
            default: UserProfile,
            helper: UserProfilePreview,
          },
        },
      ],
    },
  ];
  
  const router = createRouter({
    history: createWebHistory(),
    routes,
  });
  
  export default router;
  </code></pre>
  <p><code>App.vue</code></p>
  <pre><code>&lt;template&gt;
    &lt;h1&gt;Nested Named Views&lt;/h1&gt;
    &lt;router-view /&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  export default {
    name: 'App'
  };
  &lt;/script&gt;
  </code></pre>
  <p><code>main.js</code></p>
  <pre><code>&quot;use strict&quot;;
  exports.__esModule = true;
  
  import { createApp } from 'vue'
  import App from './App.vue'
  import router from './router'
  
  createApp(App).use(router).mount('#app')
  </code></pre>