xkjyeah / vue-google-maps

Google maps component for vue with 2-way data binding
https://xkjyeah.github.io/vue-google-maps/
1.88k stars 475 forks source link

[Bug] How to fix _Did you mean "@babel/env"?_ error? #385

Open koddr opened 6 years ago

koddr commented 6 years ago

Hello. I have some strange error in my build, using your Vue-component.

package.json:

"scripts": {
    "build": "webpack --mode production --display-error-details --hide-modules --progress",
    "watch": "webpack --mode production --watch --hide-modules --progress"
  },
  "dependencies": {
    "animate.css": "^3.6.1",
    "axios": "^0.18.0",
    "bulma": "^0.7.0",
    "bulma-badge": "^1.0.1",
    "bulma-checkradio": "^1.0.1",
    "bulma-divider": "^1.0.1",
    "bulma-steps": "^1.0.2",
    "flatpickr": "^4.4.4",
    "mobile-detect": "^1.4.1",
    "sticky-js": "^1.2.0",
    "sweetalert2": "^7.18.0",
    "typed.js": "^2.0.6",
    "vee-validate": "^2.0.6",
    "vue": "^2.5.16",
    "vue-cookies": "^1.5.6",
    "vue-flatpickr-component": "^7.0.1",
    "vue2-google-maps": "^0.8.12",
    "vuex": "^3.0.1",
    "webfontloader": "^1.6.28"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.44",
    "@babel/preset-env": "^7.0.0-beta.44",
    "autoprefixer": "^8.3.0",
    "babel-loader": "^8.0.0-beta.2",
    "css-loader": "^0.28.11",
    "mini-css-extract-plugin": "^0.2.0",
    "node-sass": "^4.8.3",
    "postcss-loader": "^2.1.4",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "vue-loader": "^14.2.2",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.3"
  },

$ npm run watch:

ERROR in ./node_modules/vue2-google-maps/dist/components/infoWindowImpl.js (./node_modules/babel-loader/lib?{"presets":["@babel/preset-env"]}!./node_modules/vue2-google-maps/dist/components/infoWindowImpl.js)
Module build failed: Error: Cannot find module 'babel-preset-env' from '/Users/vikkyshostak/PyCharmProjects/django_go2study/node_modules/vue2-google-maps'
- Did you mean "@babel/env"?
    at Function.module.exports [as sync] (/Users/vikkyshostak/PyCharmProjects/django_go2study/node_modules/resolve/lib/sync.js:40:15)
    at resolveStandardizedName (/Users/vikkyshostak/PyCharmProjects/django_go2study/node_modules/@babel/core/lib/config/files/plugins.js:104:31)
    at resolvePreset (/Users/vikkyshostak/PyCharmProjects/django_go2study/node_modules/@babel/core/lib/config/files/plugins.js:57:10)
    at loadPreset (/Users/vikkyshostak/PyCharmProjects/django_go2study/node_modules/@babel/core/lib/config/files/plugins.js:76:18)
    at createDescriptor (/Users/vikkyshostak/PyCharmProjects/django_go2study/node_modules/@babel/core/lib/config/config-descriptors.js:154:21)
    at /Users/vikkyshostak/PyCharmProjects/django_go2study/node_modules/@babel/core/lib/config/config-descriptors.js:106:12
    at Array.map (<anonymous>)
    at createDescriptors (/Users/vikkyshostak/PyCharmProjects/django_go2study/node_modules/@babel/core/lib/config/config-descriptors.js:105:27)
    at createPresetDescriptors (/Users/vikkyshostak/PyCharmProjects/django_go2study/node_modules/@babel/core/lib/config/config-descriptors.js:97:10)
    at /Users/vikkyshostak/PyCharmProjects/django_go2study/node_modules/@babel/core/lib/config/config-descriptors.js:69:19
    at presets (/Users/vikkyshostak/PyCharmProjects/django_go2study/node_modules/@babel/core/lib/config/config-descriptors.js:59:25)
    at mergeChainOpts (/Users/vikkyshostak/PyCharmProjects/django_go2study/node_modules/@babel/core/lib/config/config-chain.js:324:68)
    at /Users/vikkyshostak/PyCharmProjects/django_go2study/node_modules/@babel/core/lib/config/config-chain.js:277:7
    at buildRootChain (/Users/vikkyshostak/PyCharmProjects/django_go2study/node_modules/@babel/core/lib/config/config-chain.js:111:20)
    at loadPrivatePartialConfig (/Users/vikkyshostak/PyCharmProjects/django_go2study/node_modules/@babel/core/lib/config/partial.js:51:53)
    at loadFullConfig (/Users/vikkyshostak/PyCharmProjects/django_go2study/node_modules/@babel/core/lib/config/full.js:43:37)
    at /Users/vikkyshostak/PyCharmProjects/django_go2study/node_modules/@babel/core/lib/transform.js:28:33
    at process._tickCallback (internal/process/next_tick.js:112:11)
 @ ./node_modules/vue2-google-maps/dist/components/infoWindow.vue 3:0-88 3:0-88 4:0-101 16:2-16
 @ ./node_modules/vue2-google-maps/dist/main.js
 @ ./static/assets/js/contacts.js

How to fix it? Help me please.

stevendesu commented 6 years ago

For the time being, give this a try:

npm install --save-dev babel-preset-env

It looks like preset-env was moved from npmjs to a private babel registry, so the old way to install it was babel-preset-env and the new way is @babel/preset-env. My guess from the error message is that Vue2 Google Maps is expecting the old method and for some reason (maybe a configuration somewhere in one of the package.json files) it's not being automatically loaded when you install vue2-google-maps

A long-term fix (if I'm correct) would be for Vue2 Google Maps to switch over to the @babel/preset-env method (which is the newer / preferred way to include preset-env, and it's how you're already including it)