Parcel: Unexpected token when building a vue project with (typescript, sass, decorators)

Created on 5 Mar 2019  ·  10Comments  ·  Source: parcel-bundler/parcel

❔ Question

Switching from webpack to parcel and encountered this error when run npm run pb

🚨  /home/cheng/Project/Ubudu/ACS/client/src/App.vue:1:0: Unexpected token (1:0)
> 1 | <template>
  2 |     <section id="app" class="container is-fluid">
  3 |         <div class="u-grid">
  4 |             <div class="u-grid-cell is-2 u-aside">

🔦 Context

package.json

{
  "name": "acs_client",
  "description": "Access Control Client",
  "contributors": [
    {
      "name": "Cheng JIANG",
      "email": "[email protected]",
      "url": "https://github.com/gopherj"
    }
  ],
  "version": "1.0.0",
  "license": "MIT",
  "private": true,
  "scripts": {
    "build": "node ./build/build.js",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "pb": "parcel src/index.html"
  },
  "dependencies": {
    "animate.css": "^3.7.0",
    "animated-vue": "^0.5.3",
    "axios": "^0.18.0",
    "buefy": "^0.7.3",
    "bulma": "^0.7.4",
    "lodash": "^4.17.11",
    "object-path": "^0.11.4",
    "qs": "^6.6.0",
    "ramda": "^0.25.0",
    "v-tooltip": "^2.0.0-rc.33",
    "vue": "^2.5.13",
    "vue-class-component": "^6.0.0",
    "vue-js-modal": "^1.3.28",
    "vue-notification": "^1.3.10",
    "vue-property-decorator": "^6.1.0",
    "vue-ramda": "^1.0.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.1"
  },
  "devDependencies": {
    "@types/es6-promise": "^3.3.0",
    "@types/node": "^11.10.4",
    "@vue/component-compiler-utils": "^2.6.0",
    "autoprefixer": "^7.2.5",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.7.0",
    "babel-preset-vue": "^2.0.2",
    "chalk": "^2.1.0",
    "compression-webpack-plugin": "1.1.12",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^0.28.9",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.16.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.5",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "glob": "^7.1.2",
    "html-webpack-plugin": "^2.30.1",
    "http-proxy-middleware": "^0.17.4",
    "node-sass": "^4.7.2",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.3.0",
    "parcel-bundler": "^1.11.0",
    "parcel-plugin-vue": "^1.5.0",
    "popper.js": "^1.12.9",
    "postcss-loader": "^2.0.10",
    "posthtml": "^0.11.3",
    "precss": "^3.1.0",
    "rimraf": "^2.6.2",
    "sass-loader": "^6.0.6",
    "semver": "^5.6.0",
    "shelljs": "^0.7.8",
    "style-loader": "^0.19.1",
    "ts-loader": "^3.3.1",
    "typescript": "^2.9.2",
    "url-loader": "^0.5.9",
    "vue-hot-reload-api": "^2.3.3",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^3.0.3",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-merge": "^4.1.0",
    "webpack-node-externals": "^1.6.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/client/",
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noImplicitReturns": true,
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "experimentalDecorators": true,
    "strictFunctionTypes": false
  },
  "include": [
    "./src/**/*"
  ]
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <link rel="shortcut icon" type="image/x-icon" href="./assets/favicon.ico"/>
    <title>ACS</title>
</head>
<body>
<div id="app"></div>
<script src="./main.ts"></script>
</body>
</html>

.babelrc

{
  "presets": ["env"]
}

💻 Code Sample

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.11.0
| Node | v11.10.1
| npm/Yarn | 6.8.0
| Operating System | Ubuntu 18.10

Question Stale
Source
picture GopherJ

Most helpful comment

closed because I've switched to @vue/cli 3

picture GopherJ on 8 Mar 2019
😄2

All 10 comments

If your project is private, please share at least the part of your code where client/src/App.vue is imported.

mischnic picture mischnic on 5 Mar 2019

hello @mischnic this is the content of client/src/App.vue:

<template>
    <section id="app" class="container is-fluid">
        <div class="u-grid">
            <div class="u-grid-cell is-2 u-aside">
                <side-bar></side-bar>
            </div>

            <div class="u-grid-cell is-10 u-main">
                <router-view></router-view>
            </div>
        </div>
    </section>
</template>

<script lang='ts'>
    import {Vue, Component} from 'vue-property-decorator'
    import SideBar from './components/SideBar.vue'

    @Component({
        components: {
            SideBar,
        }
    })
    export default class App extends Vue {
    }
</script>

<style lang='sass'>
    @import ./sass/index.sass

    #app
        position: absolute
        width: 100%
        height: 100%

    .u-grid
        display: flex
        height: 100%

        & > .u-grid-cell
            flex: auto

            &.is-1
                flex: 0 0 8.334%

            &.is-2
                flex: 0 0 16.667%

            &.is-3
                flex: 0 0 25%

            &.is-4
                flex: 0 0 33.334%

            &.is-5
                flex: 0 0 41.667%

            &.is-6
                flex: 0 0 50%

            &.is-7
                flex: 0 0 58.334%

            &.is-8
                flex: 0 0 66.667%

            &.is-9
                flex: 0 0 75%

            &.is-10
                flex: 0 0 83.334%

            &.is-11
                flex: 0 0 91.667%

            &.is-12
                flex: 0 0 100%

    .u-main
        position: relative
        padding: 8rem 3rem
        overflow: auto
</style>
GopherJ picture GopherJ on 6 Mar 2019

I meant where you import app.vue. Also try deleting your tsconfig (specifically the include line) to check whether this is caused by Typescript.

mischnic picture mischnic on 7 Mar 2019

closed because I've switched to @vue/cli 3

GopherJ picture GopherJ on 8 Mar 2019
😄2

having the quite similair behaviour:
image

package.json

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "serve": "vue-cli-service serve",
    "compile": "npx parcel build ./src/main.js",
    "build": "vue-cli-service build && directus-extensions build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.6"
  },
  "devDependencies": {
    "@directus/extension-toolkit": "^0.0.4",
    "@vue/cli-plugin-babel": "^3.5.0",
    "@vue/cli-plugin-eslint": "^3.5.0",
    "@vue/cli-service": "^3.5.0",
    "@vue/component-compiler-utils": "^3.0.0",
    "babel-eslint": "^10.0.1",
    "babel-preset-env": "^1.7.0",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "parcel-bundler": "^1.12.3",
    "parcel-plugin-vue": "^1.5.0",
    "vue-template-compiler": "^2.5.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Any ideas?

dev7ch picture dev7ch on 11 Apr 2019

i am not useing type script but vue etc as you see above, please reopen this issue

dev7ch picture dev7ch on 11 Apr 2019

thanks @mischnic you can find and could clone the repo here where error happens on my side: https://github.com/dev7ch/directus-hello-world (differs bit from package.json above, but same error)

dev7ch picture dev7ch on 11 Apr 2019

Same here

Jonarod picture Jonarod on 13 Jul 2019

Same problem

starkwang picture starkwang on 21 Jan 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

github-actions[bot] picture github-actions[bot] on 19 Jul 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

adamreisnz picture adamreisnz  ·  3Comments
medhatdawoud picture medhatdawoud  ·  3Comments
dotdash picture dotdash  ·  3Comments
jzimmek picture jzimmek  ·  3Comments
Niggler picture Niggler  ·  3Comments