1

I am trying to integrate a CARTO map according to this example:

Importing Carto:

// Import react-leaflet for the map / basemap components
import { Map, TileLayer as Basemap } from 'react-leaflet';

// Import CARTO.js v4 <3
import carto from 'carto.js';

// Import our custom Layer component (it uses carto.js methods internally)
import Layer from './Layer';

// Voyager basemap <3
const CARTO_BASEMAP = 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png';

This is the constructor of my React Component:

constructor(props) {
    super(props);

    this.state = {
      center: [40.758313915, -3.67774875],
      zoom: 11,
    },

    // Setup the client in the contructor with our user and apiKey
    this.cartoClient = new carto.Client({ apiKey: 'wadus', username: 'rochoa' });

package.json:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "carto.js": "^4.0.1",
    "classnames": "^2.2.6",
    "jsonwebtoken": "^8.3.0",
    "jwt-decode": "^2.2.0",
    "leaflet": "^1.3.3",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-leaflet": "^2.0.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4",
    "react-simple-storage": "^1.2.1",
    "redux": "^4.0.0",
    "redux-connect": "^7.0.0",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000"
}

When running, receiving:

TypeError: __WEBPACK_IMPORTED_MODULE_2_carto_js___default.a.Client is not a constructor

Having a hard time to understand what is wrong here...

2

The package is outdated. We moved it to another place. Please add as dependency @carto/carto.js instead of carto.js and substitute it in whatever file it's used in.

npm install @carto/carto.js

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.