`parcel build` failing to compile working js bundle unless a comment is used

🐛 Bug report

Whilst setting up a boilerplate with Parcel, Vue and TailwindCSS I have encountered a bug with the parcel build command. The resulting dist folder contains a broken bundle unless specifying the --no-minify flag, and adding a comment to the top of homepage.ts

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

A working reproducible repository can be found here note the develop branch

🤔 Expected Behavior

parcel build should compile a working bundle in the dist folder that is minified

😯 Current Behavior

parcel build is compiling a broken bundle in the dist folder that is not minified

💁 Possible Solution

I have compared the working bundle from yarn run serve:parcel and yarn run build and the latter only works with the magical comment (See repo for more details), as without the comment the about.ts page isn’t included in the bundle. yarn run build:broken results in a similar output, however it is harder to compare as that results in a minified file.

Note: I have also tried both v2-alpha.1 and v2-alpha.1.1. With the former, neither serve or build works, with the latter, serve works but build throws an error before even generating the dist folder.

🔦 Context

This issue has stopped me from being able to use Parcel as a production-ready tool, which is disappointing because I like it very much when there aren’t bugs

💻 Code Sample

Repo can be found here with a readme.md detailing the issues and what I have already tried.

🌍 Your Environment

Software	Version(s)
Parcel	1.12.3
Node	12.7.0
npm/Yarn	1.17.3
Operating System	MacOS Mojave 10.14.6

[mischnic]

Unfortunately not sure what you mean by “(breaking Vue, which could also be fixed by them?)”

To be clear, this is definitely caused by a bug in Parcel that turned

import Vue from 'vue';
import VueRouter from 'vue-router';
import about from '../pages/about';
import homepage from '../pages/homepage';

Vue.use(VueRouter);

const router = new VueRouter({
    'mode': 'history',
    'routes': [
        {
            'component': homepage,
            'name': 'homepage',
            'path': '/'
        },
        {
            'component': about, // <------
            'name': 'about',
            'path': '/about'
        }
    ]
});

export default router;

into

import Vue from 'vue';
import VueRouter from 'vue-router';
import homepage from '../pages/homepage';

Vue.use(VueRouter);

const router = new VueRouter({
    'mode': 'history',
    'routes': [
        {
            'component': homepage,
            'name': 'homepage',
            'path': '/'
        },
        {
            'component': homepage, // <------
            'name': 'about',
            'path': '/about'
        }
    ]
});

export default router;

In theory, using a component twice in a VueRouter could work (in your case, about and homepage contain the exact same code).

[aarongeorge]

Ahh I see what you mean now. I understand, thanks for looking into this for me 👍