hellenic / react-hexgrid Goto Github PK

react-dom.development.js:88 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Hexagon

✘ [ERROR] Could not resolve "@emotion/react/jsx-runtime"

    ../../node_modules/react-hexgrid/lib/Layout.js:12:28:
      12 │ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
         ╵                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@emotion/react/jsx-runtime" as external to exclude it from the bundle,
  which will remove this error.

<pattern id="1,2,-3" patternUnits="objectBoundingBox" x="0" y="0" width="10" height="10">
  <image xlink:href="http://lorempixel.com/400/400/cats/1/" x="0" y="0" width="20" height="20"></image>
</pattern>

×
TypeError: undefined is not an object (evaluating '_react.PropTypes.string')
(anonymous function)
node_modules/react-hexgrid/lib/Hexagon/Text.js:102
   99 |   }(_react.Component);
  100 | 
  101 |   Text.propTypes = {
> 102 |     children: _react.PropTypes.string
  103 |   };
  104 |   exports.default = Text;
  105 | });
View compiled
(anonymous function)
node_modules/react-hexgrid/lib/Hexagon/Text.js:3
  1 | (function (global, factory) {
  2 |   if (typeof define === "function" && define.amd) {
> 3 |     define(["exports", "react"], factory);
  4 |   } else if (typeof exports !== "undefined") {
  5 |     factory(exports, require("react"));
  6 |   } else {
View compiled
./node_modules/react-hexgrid/lib/Hexagon/Text.js
node_modules/react-hexgrid/lib/Hexagon/Text.js:13
  10 |     factory(mod.exports, global.React);
  11 |     global.Text = mod.exports;
  12 |   }
> 13 | })(this, function (exports, _react) {
  14 |   "use strict";
  15 | 
  16 |   Object.defineProperty(exports, "__esModule", {
View compiled
__webpack_require__
/Users/dom/Desktop/bitopoly-client/webpack/bootstrap 9505ad37cf0f3551ccaa:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
/Users/dom/Desktop/bitopoly-client/webpack/bootstrap 9505ad37cf0f3551ccaa:87
  84 | 		console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 | 		hotCurrentParents = [];
  86 | 	}
> 87 | 	return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 | 	return {
View compiled
(anonymous function)
node_modules/react-hexgrid/lib/index.js:3
  1 | (function (global, factory) {
  2 |   if (typeof define === "function" && define.amd) {
> 3 |     define(['exports', './GridGenerator', './HexGrid', './HexUtils', './Layout', './Path', './Pattern', './Hexagon/Hexagon', './Hexagon/Text', './models/Hex'], factory);
  4 |   } else if (typeof exports !== "undefined") {
  5 |     factory(exports, require('./GridGenerator'), require('./HexGrid'), require('./HexUtils'), require('./Layout'), require('./Path'), require('./Pattern'), require('./Hexagon/Hexagon'), require('./Hexagon/Text'), require('./models/Hex'));
  6 |   } else {
View compiled
./node_modules/react-hexgrid/lib/index.js
node_modules/react-hexgrid/lib/index.js:13
  10 |     factory(mod.exports, global.GridGenerator, global.HexGrid, global.HexUtils, global.Layout, global.Path, global.Pattern, global.Hexagon, global.Text, global.Hex);
  11 |     global.index = mod.exports;
  12 |   }
> 13 | })(this, function (exports, _GridGenerator, _HexGrid, _HexUtils, _Layout, _Path, _Pattern, _Hexagon, _Text, _Hex) {
  14 |   'use strict';
  15 | 
  16 |   Object.defineProperty(exports, "__esModule", {
View compiled
__webpack_require__
/Users/dom/Desktop/bitopoly-client/webpack/bootstrap 9505ad37cf0f3551ccaa:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
/Users/dom/Desktop/bitopoly-client/webpack/bootstrap 9505ad37cf0f3551ccaa:87
  84 | 		console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 | 		hotCurrentParents = [];
  86 | 	}
> 87 | 	return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 | 	return {
View compiled
./src/App.js
http://localhost:3000/static/js/bundle.js:106290:91
__webpack_require__
/Users/dom/Desktop/bitopoly-client/webpack/bootstrap 9505ad37cf0f3551ccaa:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
/Users/dom/Desktop/bitopoly-client/webpack/bootstrap 9505ad37cf0f3551ccaa:87
  84 | 		console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 | 		hotCurrentParents = [];
  86 | 	}
> 87 | 	return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 | 	return {
View compiled
./src/index.js
http://localhost:3000/static/js/bundle.js:106507:82
__webpack_require__
/Users/dom/Desktop/bitopoly-client/webpack/bootstrap 9505ad37cf0f3551ccaa:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
/Users/dom/Desktop/bitopoly-client/webpack/bootstrap 9505ad37cf0f3551ccaa:87
  84 | 		console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 | 		hotCurrentParents = [];
  86 | 	}
> 87 | 	return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 | 	return {
View compiled
(anonymous function)
http://localhost:3000/static/js/bundle.js:106645:37
__webpack_require__
/Users/dom/Desktop/bitopoly-client/webpack/bootstrap 9505ad37cf0f3551ccaa:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
(anonymous function)
/Users/dom/Desktop/bitopoly-client/webpack/bootstrap 9505ad37cf0f3551ccaa:715
  712 | __webpack_require__.h = function() { return hotCurrentHash; };
  713 | 
  714 | // Load entry module and return exports
> 715 | return hotCreateRequire(0)(__webpack_require__.s = 0);
  716 | 
  717 | 
  718 | 
View compiled
global code
http://localhost:3000/static/js/bundle.js:717:12
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

TypeError: Cannot read property 'spacing' of undefined
    at Function.hexToPixel (webpack:///./~/react-hexgrid/lib/HexUtils.js?:117:23)
    at Hexagon.componentWillReceiveProps (webpack:///./~/react-hexgrid/lib/Hexagon/Hexagon.js?:127:40)
    at eval (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:611:23)
    at measureLifeCyclePerf (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:75:12)
    at ReactCompositeComponentWrapper.updateComponent (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:610:9)
    at ReactCompositeComponentWrapper.receiveComponent (webpack:///./~/react-dom/lib/ReactCompositeComponent.js?:547:10)
    at Object.receiveComponent (webpack:///./~/react-dom/lib/ReactReconciler.js?:125:22)
    at Object.updateChildren (webpack:///./~/react-dom/lib/ReactChildReconciler.js?:109:25)
    at ReactDOMComponent._reconcilerUpdateChildren (webpack:///./~/react-dom/lib/ReactMultiChild.js?:208:32)
    at ReactDOMComponent._updateChildren (webpack:///./~/react-dom/lib/ReactMultiChild.js?:312:31)

import React from 'react';
import { HexGrid, Layout, Hexagon, GridGenerator, HexUtils, Pattern } from 'react-hexgrid';
import './hexmap.component.scss';

const config = {
  width: 2300,
  height: 2000,
  layout: { width: 0.7, height: 0.7, flat: false, spacing: 1.03 },
  origin: { x: -45, y: -40 },
  map: 'rectangle',
  mapProps: [32, 32],
};

export default function HexMap() {
  const generator = GridGenerator.getGenerator(config.map);
  const hexagons = generator.apply(this, config.mapProps);
  const layout = config.layout;
  const size = { x: layout.width, y: layout.height };

  return (
    <HexGrid width={config.width} height={config.height} className="hexGrid">
      <Layout size={size} flat={layout.flat} spacing={layout.spacing} origin={config.origin}>
        {
          hexagons.map(hex => (
            <Hexagon
              key={HexUtils.getID(hex)}
              q={hex.q}
              r={hex.r}
              s={hex.s}
            />
          ))
        }
      </Layout>
    </HexGrid>
  );
}

svg path {
...
 transform: rotate(-30deg) scale(0.4);
 }