1

I'm trying to upgrade packages in my project and getting a problem with the use of @here/maps-api-for-javascript. When I use react-scripts 4.0.3, everything is fine and I can interact with the map.enter image description here

But when I use react-scripts 5.0.0, I only see the empty map with the Here Maps logo. Also, I see webpack errors in the console that are related to the mapenter image description here

I need to understand why this happening and how can it be fixed to use Here Maps with react-scripts 5.0

My code with the described problem: https://codesandbox.io/s/modest-margulis-ugp8mw?file=/README.md

nvipash
  • 91
  • 1
  • 9
  • Could you please follow below guide and check if you are able to reproduce: https://developer.here.com/documentation/maps/3.1.30.15/dev_guide/topics/react-practices.html –  May 05 '22 at 06:23
  • Yes, I checked it. When I follow the guide, the bug was also reproduced. I guess, according to the console errors, the problem may be in webpack 5 that is used by CRA 5 and not used by CRA 4. HERE Maps probably has render problems on this version. – nvipash May 06 '22 at 20:50
  • Found this answer https://stackoverflow.com/a/68450436/8136158 with exact same webpack console error. So, when I eject my react project and add `node: { global: false }` line to webpack.config, the problem had fixed. But, I need to use HERE Maps with react-scripts (CRA) 5.0 where no configuration file is located. Is it possible to use CRA 5.0 and avoid the eject process to add the config file like that? – nvipash May 06 '22 at 22:45
  • Yes you can try with CRA 5.0 and share your feedback. –  May 30 '22 at 05:10
  • Could you please confirm if it is working fine with CRA 5.0? –  Sep 15 '22 at 05:01

1 Answers1

1

As discussed in comment please refer below react guide . Working with React This article describes how to use the HERE Maps API for JavaScript with React. The target is to demonstrate how to build a React component that displays the map and responds to the actions of the user, be it direct interaction with the map or the other components.

Setup For the fast setup of the new React application we will use the Create React App environment. It provides a fast way to get started building a new single-page application. Execute the npx runner as below (it requires Node >= 8.10 and npm >= 5.6):

npx create-react-app jsapi-react && cd jsapi-react

The call above produces the scaffolding needed to start the application. The directory structure in the jsapi-react directory looks as follows. The React components reside in the src directory:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── ...
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

The recommended way to use HERE Maps API for JavaScript within this environment is to install maps-api-for-javascript NPM package which is hosted at https://repo.platform.here.com/. Add a registry entry to the NPM configuration by executing the following command:

npm config set @here:registry https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/

After that the package from the @here namespace can be installed as usual:

npm install @here/maps-api-for-javascript --save

At this step the environment setup is complete, all packages needed to build a sample application are installed, and it is possible to start the development server by executing:

npm start

The command above launches the development server with the "hot reload" functionality and opens the application in the browser.

For more details please refer below guide. https://developer.here.com/documentation/maps/3.1.30.15/dev_guide/topics/react-practices.html

Ivan Reshetnikov
  • 398
  • 2
  • 12