Vuetify-module: Unexpected token export, when adding vuetify config file.

[dschreij]

Hopefully/maybe this is a simple issue; if not I will open a repo tomorrow (currently the code is in a private Gitlab repository).

Whenever I add a vuetify config file to optionsPath, like

vuetify: {
   optionsPath: './config/vuetify.options.js'
}

the build process crashes directly with a Unexpected token export message. Without the optionsPath specified, everything builds fine (but with default theme colors).

The vuetify.options.js file contains:

import colors from 'vuetify/lib/util/colors'

export default {
  // breakpoint: {},
  // icons: {},
  // lang: {},
  // rtl: true,
  theme: {
    themes: {
      light: {
        primary: '#4799b7', // colors.cyan.darken3,
        secondary: '#6db3bf',
        accent: colors.orange.darken1
      }
    }
  }
}

My gut is telling me this is a webpack/babel issue, such that export syntax is not correctly transpiled, but I am just using the babel configs as specified by nuxt 2.9.2 and haven't customised anything.

Here's my package.json:

{
  "name": "everythingbonaire",
  "version": "1.1.1",
  "author": "dschreij
  "private": true,
  "scripts": {
    "dev": "nodemon --watch api --exec \"nuxt\"",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "docker-build": "build/docker-build.sh",
    "docker-push": "build/docker-push.sh",
    "docker-build-push": "build/docker-build.sh && build/docker-push.sh"
  },
  "dependencies": {
    "@mdi/font": "^4.4.95",
    "@nuxtjs/axios": "^5.6.0",
    "@nuxtjs/dotenv": "^1.4.1",
    "autonumeric": "^4.5.7",
    "body-parser": "^1.19.0",
    "bodybuilder": "^2.2.17",
    "elasticsearch": "^16.4.0",
    "express": "^4.17.1",
    "js-cookie": "^2.2.1",
    "lodash": "^4.17.15",
    "nuxt": "^2.9.2",
    "nuxt-env": "0.1.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "v-money": "^0.8.1",
    "vue-infinite-scroll": "^2.0.2",
    "vuex-persistedstate": "^2.5.4"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.8.5",
    "@types/dotenv": "^6.1.1",
    "@types/elasticsearch": "^5.0.35",
    "@types/lodash": "^4.14.139",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.4.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-loader": "^3.0.0",
    "eslint-plugin-html": "^6.0.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^10.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-vue": "^5.2.3",
    "nodemon": "^1.19.2"
  }
}

And this is my nuxt.config.js; clean and simple:

import { resolve } from 'path'

const config = {
  head: {
    title: 'Bon House',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Search real estate on Bonaire' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      // { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' }
    ]
  },
  buildModules: [
    '@nuxtjs/vuetify'
  ],
  modules: [
    ['nuxt-env', { keys: ['API_HOST'] }],
    '@nuxtjs/axios'
  ],
  plugins: [
    '~/plugins/vuefilters.js',
    { src: '~/plugins/infinitescroll.js', ssr: false },
    { src: '~/plugins/localstorage.js', ssr: false }
  ],
  css: [
    '~/assets/style/app.styl'
  ],
  vuetify: {
    optionsPath: './config/vuetify.options.js'
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#00DD00' },
  /*
  ** Build configuration
  */
  build: {
    extractCSS: true,
    /*
    ** Run ESLint on save
    */
    extend (config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
        config.devtool = '#source-map'
      }
    },
    watch: [
      resolve(process.cwd(), '.env')
    ]
  },
  serverMiddleware: [
    '~/api/index.js'
  ]
}
export default config

[kevinmarrec]

@dschreij It's cause
If i'm right think it's to the fact that vuetify/lib is only transpiled when treeShake is enabled, so importing from vuetify/lib without it generate Unexpected token errors.

So you need to import colors from vuetify/es5 instead of vuetify/lib :

import colors from 'vuetify/es5/util/colors'

OR always enable treeShake

[kevinmarrec]

For now, treeShake is disabled in development mode by default but it maybe turned on by default in a future version of the module (mostly cause there can be CSS differences between treeShake on & off, and also custom SASS variables only works with it enabled).

The thing is that treeShake makes first build much slower cause it needs to transpile all Vuetify files.
That's why I had decided to use full vuetify dist/vuetify.js bundle in develpoment to have blazing flast dev builds (to code faster), but that's thoughts I'm going to think again about soon.

[dschreij]

import colors from 'vuetify/es5/util/colors' did the trick!
I used to import it from there, but then they changed es5 to lib in the vuetify docs, so I followed suit. Thanks for helping me out on this! And great work on this module!