Use with React 18?

[srednasoft]

Hi,
Will the mapper work in React 18 projects?

I'm getting errors when trying the example code:
The project is created with Vite

Same error/problem in project created with standard react:

ERROR
map.areas.map is not a function
TypeError: map.areas.map is not a function
at renderAreas (http://localhost:3000/main.4b1503128b8eb4b28765.hot-update.js:660:22)
at ImageMapper (http://localhost:3000/main.4b1503128b8eb4b28765.hot-update.js:731:43)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:21414:22)
at updateFunctionComponent (http://localhost:3000/static/js/bundle.js:24296:24)
at beginWork (http://localhost:3000/static/js/bundle.js:26008:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:11006:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:11050:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:11107:35)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:30981:11)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:30228:16)

[NishargShah]

It is working fine with react 18, something is wrong in your code, please check and post it here, I can help you on that

[srednasoft]

Here is the code from my test. I did the same on another laptop today and got the same error.
Node versjon 18.17.1
New React Vite project.
Delete all default settings from Vite

App.jsx

import './App.css'
import Mapper from './Mapper'

function App() {

  return (
    <>
    <p>Test</p>
    <Mapper/>
    </>
  )
}

export default App

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Mapper.jsx

import React from 'react';
import ImageMapper from 'react-img-mapper';

const Mapper = props => {
  const URL = 'https://raw.githubusercontent.com/img-mapper/react-docs/master/src/assets/example.jpg';
  const MAP = {
    name: 'my-map',
    // GET JSON FROM BELOW URL AS AN EXAMPLE
    areas: 'https://raw.githubusercontent.com/img-mapper/react-docs/master/src/assets/example.json',
  };
  
  return <ImageMapper src={URL} map={MAP} />
}

export default Mapper;

package.json

{
  "name": "imagemapping",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-img-mapper": "^1.5.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "vite": "^4.4.5"
  }
}

ERROR:

2 ImageMapper.js:271 Uncaught TypeError: map.areas.map is not a function
at renderAreas (ImageMapper.js:271:26)
at ImageMapper (ImageMapper.js:283:168)
at renderWithHooks (react-dom.development.js:16305:18)
at updateFunctionComponent (react-dom.development.js:19588:20)
at beginWork (react-dom.development.js:21601:16)
at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
at invokeGuardedCallback (react-dom.development.js:4277:31)
at beginWork$1 (react-dom.development.js:27451:7)
at performUnitOfWork (react-dom.development.js:26557:12)
react-dom.development.js:18687 The above error occurred in the component:

at ImageMapper (http://localhost:5173/node_modules/.vite/deps/react-img-mapper.js?v=473f095a:396:32)
at Mapper
at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
Show 1 more frame
Show less
react-dom.development.js:26923 Uncaught TypeError: map.areas.map is not a function
at renderAreas (ImageMapper.js:271:26)
at ImageMapper (ImageMapper.js:283:168)
at renderWithHooks (react-dom.development.js:16305:18)
at updateFunctionComponent (react-dom.development.js:19588:20)
at beginWork (react-dom.development.js:21601:16)
at beginWork$1 (react-dom.development.js:27426:14)
at performUnitOfWork (react-dom.development.js:26557:12)
at workLoopSync (react-dom.development.js:26466:5)
at renderRootSync (react-dom.development.js:26434:7)
at recoverFromConcurrentError (react-dom.development.js:25850:20)

[NishargShah]

Hello @srednasoft you don't need to add a URL here, please copy the JSON file from the URL and import it there

// GET JSON FROM BELOW URL AS AN EXAMPLE
    areas: 'https://raw.githubusercontent.com/img-mapper/react-docs/master/src/assets/example.json',

[srednasoft]

Ahaaa, super it worked 😊
Thnx