vue2-google-maps with Nuxt2 (config.externals is undefined)

Question

I'm trying to use Nuxt2 and vue2-google-maps together out-of-the-box. I followed the instructions on the README, as described here, so in my nuxt.config.js I have:

const pkg = require('./package')

module.exports = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    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'
      }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: ['~/assets/style/app.styl'],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: ['@/plugins/vuetify', '@/plugins/gmaps'],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios'
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    vendor: ['babel-polyfill', 'vue2-google-maps'],
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }

      //add for vue2-google-maps
      if (!ctx.isClient) {
        // This instructs Webpack to include `vue2-google-maps`'s Vue files
        // for server-side rendering
        config.externals.splice(0, 0, function(context, request, callback) {
          if (/^vue2-google-maps($|\/)/.test(request)) {
            callback(null, false)
          } else {
            callback()
          }
        })
      }
    }
  }

When I run my code I get:

    (node:3042) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'splice' of undefined
    at Builder.extend (/Users/jamessherry/sites/nuxt-the-jump/nuxt.config.js:189:26)
    at Builder.<anonymous> (/Users/jamessherry/sites/nuxt-the-jump/node_modules/nuxt/dist/nuxt.js:160:27)
    at WebpackServerConfig.extendConfig (/Users/jamessherry/sites/nuxt-the-jump/node_modules/nuxt/dist/nuxt.js:3144:56)
    at WebpackServerConfig.config (/Users/jamessherry/sites/nuxt-the-jump/node_modules/nuxt/dist/nuxt.js:3182:33)
    at WebpackServerConfig.config (/Users/jamessherry/sites/nuxt-the-jump/node_modules/nuxt/dist/nuxt.js:3458:26)
    at Builder.webpackBuild (/Users/jamessherry/sites/nuxt-the-jump/node_modules/nuxt/dist/nuxt.js:3928:52)
    at Builder.build (/Users/jamessherry/sites/nuxt-the-jump/node_modules/nuxt/dist/nuxt.js:3632:16)
(node:3042) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:3042) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[nodemon] clean exit - waiting for changes before restart

I've made a repo with all the code and full explanation (in the README) here

Any help greatly appreciated! (I am new to nuxt, so I may be making an obvious mistake!)

Answer 1

That instruction is dated and not really applicable to latest nuxt. You just need to add it to transpile options

 build: {
    transpile: [/^vue2-google-maps($|\/)/]
  }

Here is working example without actual api key - https://codesandbox.io/s/31j9l75xjm

Here is more info re issue - https://github.com/xkjyeah/vue-google-maps/issues/498