Unable to build when using vue-google-maps: Unexpected token <

Description

I’ve included vue-google-maps in my project and it works perfectly in dev. However, when I try to build my project I receive the following error: SyntaxError: Unexpected token < ...

I notice that Nuxt users are having similar issues - but they seem to have a solution (e.g. https://github.com/xkjyeah/vue-google-maps/issues/537#issuecomment-449900348). Is there something similar we can do in Gridsome?

Steps to reproduce

1. Include vue-google-maps in your Gridsome project (refer to quickstart: https://github.com/xkjyeah/vue-google-maps#quickstart-webpack-nuxt)
2. Attempt to build your project (gridsome build)

Expected result

The project should build.

Actual result

A build error is thrown: SyntaxError: Unexpected token <. The file it is complaining about is /path/to/node_modules/vue2-google-maps/dist/components/infoWindow.vue.

Environment

Libs:
- gridsome version: v0.5.7
- @gridsome/cli version: v0.0.9
 
Tooling:
- Node version: v11.14.0
- Platform:  Mac

[hjvedvik]

Yes, I think I know what goes wrong. Try this in your gridsome.config.js file:

module.exports = {
  chainWebpack (config, { isServer }) {
    if (isServer) {
      config.externals([/^(vue|vue-router|vue-meta)$/])
    }
  }
}

[Kainkainkain]

Ok module.exports = { chainWebpack (config, { isServer }) { if (isServer) { config.externals([/^(vue|vue-router|vue-meta)$/]) } } }

Now does work for me. The error I was getting was from my own function which was testing wether referencing an objects.childrens.children exist before using them, and turns out whatever that was doing was throwing exceptions. So my convoluted function was the issue, and rewriting using try catch worked.

TIL more javascript basics: Try, Catch(e).