Parcel: Vue + Router yields to a blank page

Created on 30 Oct 2018 · 10Comments · Source: parcel-bundler/parcel

🐛 bug report

I have searched all over for this but I am not able to find anything regarding my issue. I am trying to create a simple vue-router example with parcel. I have used the example from vue-router page. I only see a blank page. There must be something I am doing wrong. The only reason I think this might be a bug is that when I remove parceljs and just use <script> tags from the example, it does work. I also followed the example pages to create a vue project.

🎛 Configuration (.babelrc, package.json, cli command)

{
  "name": "test-parcel-vue-router",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel src/index.html --open"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@vue/component-compiler-utils": "^2.3.0",
    "parcel-bundler": "^1.10.3",
    "vue": "^2.5.17",
    "vue-hot-reload-api": "^2.3.1",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.17"
  }
}

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const Default = { template: "<div>Default</div>" };
const Foo = { template: "<div>foo</div>" };
const Bar = { template: "<div>bar</div>" };

// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We'll talk about nested routes later.
const routes = [
  { path: "/", component: Default },
  { path: "/foo", component: Foo },
  { path: "/bar", component: Bar }
];

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  routes
});

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router
}).$mount("#app");

HTML page


<!DOCTYPE html>
<html>

<head>
  <title>Welcome to Vue</title>
</head>

<body>
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!-- use router-link component for navigation. -->
      <!-- specify the link by passing the `to` prop. -->
      <!-- <router-link> will be rendered as an `<a>` tag by default -->
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- route outlet -->
    <!-- component matched by the route will render here -->
    <router-view></router-view>
  </div>
  <script src="/main.js"></script>
</body>

</html>

🤔 Expected Behavior

I expect vuejs to pick up the configuration and not create a blank page.

😯 Current Behavior

I don't see an error. I just a blank page. See screenshot.

screen shot 2018-10-30 at 9 15 43 am

💁 Possible Solution

🔦 Context

I am creating a small project and I really don't feel like setting up webpack. I felt parcel was the right fix for a simple SPA. But it doesn't work :(

💻 Code Sample

https://github.com/amir20/test-parcel-vue-router

I have created a gitjub repo to show this problem. npm start should the error.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.10.3
| Node | v10.12.0
| npm/Yarn | 6.4.1
| Operating System |

Bug

Source

amir20

👍3

Most helpful comment

// package.json
 "alias": {
    "vue": "./node_modules/vue/dist/vue.esm.js"
  }

include this in package.json have solved my problem. @MisterY

diem98 on 25 Dec 2018

👍2

All 10 comments

After some research I noticed

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

in the logs. It seems like {template: "..."} is not supported. :/

amir20 on 30 Oct 2018

maybe use alias field in package.json can solove this problem.

diem98 on 28 Nov 2018

maybe use alias field in package.json can solove this problem.

Could you please elaborate? I've noticed that, to solve this same issue with webpack, it was recommended to include

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },

in webpack config. Is this the same issue?

I'm getting the same error with the minimal example. However, even if I change the inline definition

const Foo = { template: '<div>foo</div>' }

to read from a component

import Foo from './Foo.vue'

the error remains. Meaning the components are not pre-compiled.
My code is at the test repo, the version in parcel directory.

MisterY on 21 Dec 2018

// package.json
 "alias": {
    "vue": "./node_modules/vue/dist/vue.esm.js"
  }

include this in package.json have solved my problem. @MisterY

diem98 on 25 Dec 2018

👍2

Thanks a lot, @diem98! The good times of quick prototypes and small projects can continue. :)

MisterY on 25 Dec 2018

Hmm so I came back to this issue and couldn't figure out why @diem98 comment didn't work. After some debugging, I found that npx parcel watch ... works but parcel watch ... does not. I am going to close this issue.

amir20 on 4 Mar 2019

I found that npx parcel watch ... works but parcel watch ... does not. I am going to close this issue.

You might have an old version of Parcel installed globally.

mischnic on 4 Mar 2019

@mischnic, yup you are right. I was running it with npm script but then I realized I am using concurrently which runs parcel outside of npm. That explains why it wasn't working.

amir20 on 4 Mar 2019

Thanks, @diem98 :)
However, using the CommonJS module worked for me, as suggested in the official docs. For anyone needing context: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

pratu16x7 on 26 Apr 2019

For me it still show's up empty - the <router-view/> contents, used alias in package.json, here's mine package.json:

{
  "name": "package_name",
  "version": "1.0.0",
  "main": "./scripts/main.js",
  "license": "MIT",
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^2.1.2",
    "@vue/component-compiler-utils": "^3.1.2",
    "babel-core": "^6.26.3",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-vue": "^2.0.2",
    "parcel-bundler": "^1.12.4",
    "vue-template-compiler": "^2.6.11"
  },
  "scripts": {
    "dev": "parcel index.html",
    "production": "parcel build index.html"
  },
  "alias": {
    "vue": "./node_modules/vue/dist/vue.common.js"
  },
  "dependencies": {
    "tailwindcss": "^1.2.0",
    "vue": "^2.6.11",
    "vue-hot-reload-api": "^2.3.4",
    "vue-router": "^3.1.6",
    "vuex": "^3.2.0"
  }
}