Nuxt.js: Error importing npm vue component

[pdll]

Hello!

I'm trying to integrate google maps plugin (https://www.npmjs.com/package/vue2-google-maps), but then i'm trying to import it in my plugin file it sends me an error

I've already implemented this module in another project (without Nuxt), and it works fine

_{This question is available on Nuxt.js community (#c170)}

[alexchopin]

Hi, can you provide us a screenshot of you plugin?

[pdll]

[husayt]

I think import needs to be inside if as well.

On 3 Feb 2017 08:31, "pdll" [e-mail] wrote:

[image: Alt text]
https://camo.githubusercontent.com/21d332a40da0285b78a796c495ef0231444487bf/68747470733a2f2f6d6f6e6f736e61702e636f6d2f66696c652f684543396d50396f766f6a79597664756a74594466457856306c764558442e706e67

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/195#issuecomment-277191913, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABHXrJVCgbBI1bEc2x7XD3qTJDE7unDJks5rYuXtgaJpZM4L2Ct7
.

[pdll]

Nope, still the same error

[pdll]

and yes,
Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level (4:2)

[Atinux]

@pdll can you try:

import Vue from 'vue'

if (process.BROWSER_BUILD) {
  const googleMaps = require('vue2-google-maps')
  Vue.use(googleMaps({ /* options */ }))
}

[pdll]

Yes, seems like this one works for me, thank you.

[Cengkaruk]

Hi @Atinux

Me again 😁
What i'm missing here? I got Uncaught TypeError: googleMaps is not a function

[Cengkaruk]

Nevermind, i found the problem, thank you 😁

[pjavanjal]

Vue-google-map and Vue2-google-map not working with NUXT got below error

Nuxt.js Error:
ReferenceError: window is not defined
at Object. (~/vue-google-maps/index.js:1:6551)
at e (~/vue-google-maps/index.js:1:321)
at Object. (~/vue-google-maps/index.js:1:689)
at e (~/vue-google-maps/index.js:1:321)
at t.__esModule.default (~/vue-google-maps/index.js:1:394)
at 6.server-bundle.js:4024:382
at exports.modules.917.r.(anonymous function).exports (~/vue-google-maps/index.js:1:15)
at Object.917 (~/vue-google-maps/index.js:1:204)
at __webpack_require__ (webpack:/webpack/bootstrap 42a7e2d4e5d34af8ad2b:25:0)
at Object.349 (6.server-bundle.js:310:74)

[anboo]

Same error. not fixed.

[osudio-erik]

hi @Cengkaruk,

How did you solve that problem? I am facing the same...

in my nuxt.config.js I have

plugins: [
 { src: '~plugins/maps.js', ssr: false }
  ],

In plugins/maps.js I have

import Vue from 'vue'

if (process.browser) {
  const googleMaps = require('vue2-google-maps')
  Vue.use(googleMaps({
    key: process.env.googleMapsKey,
    libraries: 'places'
  }))
}

This gives the exception Uncaught TypeError: googleMaps is not a function on Vue.us(googleMaps

[pi0]

This seems a good candidate for nuxt: https://github.com/xkjyeah/vue-google-maps

There is even an official nuxt section in their README for nuxt integration. But i can confirm not fully working too. (Because they are exporting non transpiled .vue files)

[osudio-erik]

@pi0 does that solution on the github page work for you? It is giving me problems...

[pi0]

@osudio-erik No it doesn't (reported from one of my friends) :(

[lock[bot]]

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.