获取谷歌地图反应库加载

Question

In my existing app, I installed google-map-react library locally and I can see it listed in my package.json under dependencies & the folder is also present in node_modules folder. However, when I reference the component constructor in a file like this:

import GoogleMapReact from "google-map-react";

However, when I run the code, I get the errors:

Error: Cannot find module 'google-map-react'

./src/components/partials/Test.jsx Module not found: Can't resolve 'google-map-react' in '/usr/local/bab/src/components/partials'

I noticed the path being referenced in the second error is not correct. Its referring to /usr/local when my app is in ~/www/...

I am not clear on what I am doing wrong. The library is not installed globally and I ran npm uninstall -g google-map-react just in case, however, it didn't help either.

System: Ubuntu 18.04
Node: v10.15.3
NPM: 6.4.1

My package.json file:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/polyfill": "^7.2.5",
    "@babel/runtime": "^7.2.0",
    "axios": "^0.18.0",
    "google-map-react": "^1.1.4",
    "moment": "^2.23.0",
    "node-sass": "^4.11.0",
    "prop-types": "^15.6.2",
    "qs": "^6.6.0",
    "react": "^16.8.2",
    "react-compound-slider": "^0.16.3",
    "react-cookie-consent": "^2.1.0",
    "react-dates": "^18.3.1",
    "react-dom": "^16.8.2",
    "react-gtm-module": "^2.0.4",
    "react-moment-proptypes": "^1.6.0",
    "react-redux": "^6.0.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^2.1.5",
    "react-scroll": "^1.7.10",
    "react-slick": "^0.23.2",
    "react-sticky": "^6.0.3",
    "react-transition-group": "^2.5.2",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-persist": "^5.10.0",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "slick-carousel": "^1.8.1"
  },
  "scripts": {
    "lint": "./node_modules/.bin/eslint -c .eslintrc.js 'src/**/*.{js,jsx}'",
    "lint:fix": "./node_modules/.bin/eslint --fix -c .eslintrc.js 'src/**/*.{js,jsx}'",
    "start": "npm run lint && react-scripts start",
    "startindocker": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "cypress": "npx cypress run",
    "cypress:open": "npx cypress open",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "cypress": "^3.2.0",
    "eslint": "^5.3.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^5.0.0",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.14.1"
  }
}

Answer 1

从node_modules中删除google-map-react文件夹，然后从package.json中删除，而不是尝试npm install --save google-map-react并检查node_modules文件夹中的google-map-react是否存在？

Answer 2

Try removing all the node modules and install again,

rm -rf node_modules
npm install

May have an issue with incompatible node modules.