Nuxt.js: [edge] vue2-google-maps "SyntaxError: Unexpected token <" is back

Created on 11 Sep 2018  路  7Comments  路  Source: nuxt/nuxt.js

Version

[email protected]

Reproduction link

https://github.com/xkjyeah/vue-google-maps/issues/73

Steps to reproduce

upgrading from [email protected] to [email protected]

this error appeared again
https://github.com/xkjyeah/vue-google-maps/issues/73

client works but hitting a ssr route gives "SyntaxError: Unexpected token <"

no changes where made to nuxt.config.js

What is expected ?

to work

What is actually happening?

"SyntaxError: Unexpected token <"

Additional comments?

plugins/vueGoogleMaps.js

`
import Vue from 'vue'
import * as VueGoogleMaps from '~/node_modules/vue2-google-maps/src/main'

Vue.use(VueGoogleMaps, {
load: {
key: '',
libraries: 'places,drawing,geometry,visualization',

},

})`

nuxt.config.js
plugins: [ { src: '~/plugins/vueGoogleMaps', ssr: false } ],

tried to add externals but didn't work
build: { extend(config, {isDev, isClient} ) { if (!isClient) { config.externals = []; // added for testing config.externals.splice(0, 0, function (context, request, callback) { if (/^vue2-google-maps($|\/)/.test(request)) { callback(null, false) } else { callback() } }) } } }

Sry my first bug report hope i do it right!
Or should i report at vue2-google-maps ?

This bug report is available on Nuxt community (#c7719)
bug-report

Most helpful comment

Please use build.transpile to include it into babel transpiling.

 build: {
    transpile: [
      'vue2-google-maps'
    ]
  }

All 7 comments

Please use build.transpile to include it into babel transpiling.

 build: {
    transpile: [
      'vue2-google-maps'
    ]
  }

Thank you!
Worked!

With @clarkdo solution, problem is still there.

TypeError
(0 , _mapElementFactory2.default) is not a function

WARNING Compiled with 2 warnings 23:42:41

warning in ./plugins/google-maps.js

"export 'default' (imported as 'GmapCluster') was not found in 'vue2-google-maps/dist/components/cluster'

warning in ./components/modals/order/order-map.vue?vue&type=script&lang=js&

"export 'gmapApi' was not found in 'vue2-google-maps'

try to remove it from transpile again.
using:
"nuxt-edge": "^2.0.0-25609473.c77fa47",
"vue2-google-maps": "^0.10.2",

in /plugins/vueGoogleMaps i changed also
import * as VueGoogleMaps from '~/node_modules/vue2-google-maps/src/main'
to
import * as VueGoogleMaps from 'vue2-google-maps'
also i removed all the
build: { extend .. thing

after these edits and rebuilding the project some weird webpack4 magic took place
and it worked again

@Krystus did you figure it out?

@mariojankovic just look at this.

https://github.com/xkjyeah/vue-google-maps/issues/493

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jaredreich picture jaredreich  路  3Comments

nassimbenkirane picture nassimbenkirane  路  3Comments

pehbehbeh picture pehbehbeh  路  3Comments

danieloprado picture danieloprado  路  3Comments

VincentLoy picture VincentLoy  路  3Comments