[Bug] Polygon layer doesn't show

[pmicelium]

Describe the bug
I need to display a polygon layer but it doesn't show on my app, the layer is created. The issue isn't the data because it came directly from kepler.gl demo site (export -> Export Map -> JSON) and when I tried it on the same demo-app, everything works fine! So the issue must come from my app but I can't figure it out (I'm pretty new with react) !

Here's my app:

Here's kerpler demo with the same data:

Here's my code:

import React, { Component, useContext} from 'react';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import { addDataToMap, wrapTo } from '@kepler.gl/actions';
import KeplerGl from '@kepler.gl/components';
import { processKeplerglJSON } from '@kepler.gl/processors';
import styled from 'styled-components';

import cadastreData from './data/kepler.gl.json'

const StyledWrapper = styled.div`
  position: absolute;
  width: 100vw;
  height: 100vh;
`;

export default class FreshMap extends Component {

  static contextType = SelectedNamesContext;

  componentDidMount() {

    this.props.dispatch(addDataToMap(processKeplerglJSON(cadastreData)));
  }

  render() {
    const { id } = this.props;

    return (
      <StyledWrapper>
        <AutoSizer>
          {({ height, width }) => (
            <KeplerGl
              mapboxApiAccessToken={TOKEN}
              id={id}
              width={width}
              height={height}
            />
          )}
        </AutoSizer>
      </StyledWrapper>
    );
  }
}

And here's how I call it in my app.js,

class App extends Component {
  render() {

    return (
      <div style={{ position: 'absolute', width: '100%', height: '100%' }}>
        <SelectedNamesProvider>
          <TabView> // tab from primereact
            <TabPanel header="dashboard">
              // ...
            </TabPanel>
            <TabPanel header="map">
              <div height='500px'>
                <FreshMap
                  dispatch={this.props.dispatch}
                  id="foo">
                </FreshMap>
              </div>
            </TabPanel>
          </TabView >
        </SelectedNamesProvider>
      </div >
    );
  }
}

const mapStateToProps = state => state;
const dispatchToProps = dispatch => ({ dispatch });

export default connect(mapStateToProps, dispatchToProps)(App);

Here's my store.js:

import keplerGlReducer from '@kepler.gl/reducers';
import {legacy_createStore, combineReducers, applyMiddleware} from 'redux';
import {taskMiddleware} from 'react-palm/tasks';

import appReducer from './app-reducer';

const reducer = combineReducers({
  // <-- mount kepler.gl reducer in your app
  keplerGl: keplerGlReducer,

  // Your other reducers here
  app: appReducer
});

// create store
export default legacy_createStore(reducer, {}, applyMiddleware(taskMiddleware));

appReducer:

import { createAction, handleActions } from 'redux-actions';

// CONSTANTS
export const INIT = 'INIT';

// ACTIONS
export const appInit = createAction(INIT);

// INITIAL_STATE
const initialState = {
  appName: 'highqmap',
  loaded: false,
  modal: null,
  selectedNames: []
};

// REDUCER
const appReducer = handleActions(
  {
    [INIT]: (state, action) => ({
      ...state,
      loaded: true
    }),
  },
  initialState
);

export default appReducer;

And here's my package.json:

{
  "name": "highqmap",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "assert": "^2.1.0",
    "chart.js": "^4.4.3",
    "chartjs-plugin-zoom": "^2.0.1",
    "kepler.gl": "^3.0.0",
    "primeflex": "^3.3.1",
    "primeicons": "^7.0.0",
    "primereact": "^10.7.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "webpack": "^5.93.0"
  },
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Edit :
I also remarked that i don't have the same layers option in my app than in the demo-app :

Desktop (please complete the following information):

• OS: Win 10
• Browser: Chrome & Ms Edge

I opened the same ticket on stack overflow : https://stackoverflow.com/questions/78922858/kepler-gl-polygon-layer-not-showing

If you need any more informations or have any questions, please let me know !

Thanks

[Ritesh9876]

Hey @pmicelium,
I faced a similar issue before.
I was using create-react-app for an old project, it was not able to transpile node_modules properly

You can check that in the debugger
Try using vite or your own webpack configurations for the project