[Bug] How can I used the version v3.0.0-alpha.0

ferchomuri commented 1 year ago

Describe the bug I tried to use the version v3.0.0-alpha.0 with imports like

import { addDataToMap } from "@kepler.gl/actions"; import keplerGlReducer from "@kepler.gl/reducers";

But I got a error the error

Any thought about this?

Thank very much for your support and help :D

igorDykhta commented 12 months ago

@ferchomuri Just including the two mentioned lines work for me. How do you try to run Kepler?

ibgreen commented 12 months ago

Since process is a node.js thing, it might be worth checking if typeof process !== 'undefined' before accessing it in code, in case some bundlers don't handle it. I am not quite sure how we get it injected in the code in browser builds.

Atif-Rafique commented 12 months ago

💡 Don't know if it helps but one can use it like this in the index.tsx file in React App: 👉 window.process = {} as any for bypassing the above mentioned error

igorDykhta commented 11 months ago

@Atif910 How do you use kepler.gl to get the error?

Atif-Rafique commented 11 months ago

@Atif910 How do you use kepler.gl to get the error?

Well I'm using the v3.0.0 with React 16.8.4 like this 👇

Note: Wrapped App with redux as well Please correct me if I'm doing things in a wrong way. Thank you

Dependencies

    "@kepler.gl/actions": "^3.0.0-alpha.0",
    "@kepler.gl/components": "^3.0.0-alpha.0",
    "@kepler.gl/constants": "^3.0.0-alpha.0",
    "@kepler.gl/processors": "^3.0.0-alpha.0",
    "@kepler.gl/reducers": "^3.0.0-alpha.0",
    "@kepler.gl/styles": "^3.0.0-alpha.0",

Component code

import { injectComponents } from '@kepler.gl/components';
import { replaceMapControl } from './factories/map-control';
import { replacePanelHeader } from './factories/panel-header';
import { replaceLoadDataModal } from './factories/load-data-modal';

const KeplerGl = injectComponents([
    replaceLoadDataModal(),
    replaceMapControl(),
    replacePanelHeader(),
]);

<AutoSizer>
  {({ height, width }) => (
    <KeplerGl
      mapboxApiAccessToken={MAPBOX_TOKEN}
      id="kepler_map"
      getState={(state) => state.demo.keplerGl}
      width={width - 248}
      height={height}
      theme={theme}
    />
  )}
</AutoSizer>

When I don't write window.process = {} as any in the index.tsx, it shows the below error:

process is not defined
ReferenceError: process is not defined
    at isTest (http://localhost:3000/static/js/bundle.js:89258:3)
    at ./node_modules/@kepler.gl/components/dist/map/lazy-tippy.js (http://localhost:3000/static/js/vendors-node_modules_kepler_gl_components_dist_index_js-node_modules_react-virtualized_dist_c-df55e2.chunk.js:24922:35)
    at options.factory (http://localhost:3000/static/js/bundle.js:319731:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:319109:33)
    at fn (http://localhost:3000/static/js/bundle.js:319388:21)
    at ./node_modules/@kepler.gl/components/dist/map/map-legend-panel.js (http://localhost:3000/static/js/vendors-node_modules_kepler_gl_components_dist_index_js-node_modules_react-virtualized_dist_c-df55e2.chunk.js:25550:41)
    at options.factory (http://localhost:3000/static/js/bundle.js:319731:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:319109:33)
    at fn (http://localhost:3000/static/js/bundle.js:319388:21)
    at ./node_modules/@kepler.gl/components/dist/map/map-control.js (http://localhost:3000/static/js/vendors-node_modules_kepler_gl_components_dist_index_js-node_modules_react-virtualized_dist_c-df55e2.chunk.js:25327:46)

ferchomuri commented 11 months ago

💡 Don't know if it helps but one can use it like this in the index.tsx file in React App: 👉 window.process = {} as any for bypassing the above mentioned error

💡 Don't know if it helps but one can use it like this in the index.tsx file in React App: 👉 window.process = {} as any for bypassing the above mentioned error

Thats work for me. But now i have another problem.

This is my app.js file

import React from 'react';
import Axios from 'axios';
import { MyContextProvider } from './myContext';
import store from './store';
import { Provider } from 'react-redux';

window.process = {};

// const store = store();

export default function App(props) {

  const user = JSON.parse(localStorage.getItem('user'));
  Axios.defaults.baseURL = Settings[process.env.NODE_ENV].server_url;
  console.log(Axios.defaults.baseURL)

  if (user?.token) {

    // add auth token to api header calls
    Axios.defaults.headers.common['Authorization'] = 'Bearer ' + user.token;

  }

  return (
    <AuthProvider>
      <MyContextProvider>
        <Provider store={store}>
          <BrowserRouter>
            <Routes>
              {routes.map(route => {

                return (
                  <Route
                    key={route.path}
                    path={route.path}
                    element={

                      route.permission ?
                        <PrivateRoute permission={route.permission}>
                          <View display={route.view} layout={route.layout} title={route.title} />
                        </PrivateRoute> :
                        <View display={route.view} layout={route.layout} title={route.title} />

                    }
                  />
                )
              })}

              { /* 404 */}
              <Route path='*' element={<View display={NotFound} layout='home' title='404 Not Found' />} />

            </Routes>
          </BrowserRouter>
        </Provider>
      </MyContextProvider>
    </AuthProvider>
  );
}

store.js

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

function appReducer() {
  return {}
}

const initialState = {};

const reducers = combineReducers({
  keplerGl: keplerGlReducer,
  app: appReducer
});

const store = createStore(
  reducers,
  initialState,
  applyMiddleware(
    taskMiddleware
  )
);

export default store; // Exporta la instancia del store en lugar de la función createStore

This is the error:

Invalid hook call. Hooks can only be called inside of the body of a function component.

This is the code for my Kepler componenet

                <KeplerGl
                  id="foo"
                  mapboxApiAccessToken="1234"
                  width={window.innerWidth}
                  height={window.innerHeight / 1.5}
                />

RandomFractals commented 11 months ago

Noticed there is new release tag: https://github.com/keplergl/kepler.gl/releases/tag/v3.0.0-alpha.1

@igorDykhta does that mean you will be publishing new kepler.gl releases again?

Also, looks like all the 3rd party kepler.gl plugins listed on your home page before are now gone. Was that intentional and you no longer cater to the kepler.gl dev community and tools ecosystem?

https://kepler.gl/

igorDykhta commented 11 months ago

@RandomFractals Yes, we plan to release Kepler.gl 3.0.

Also, looks like all the 3rd party kepler.gl plugins listed on your home page before are now gone. Was that intentional and you no longer cater to the kepler.gl dev community and tools ecosystem?

@macrigiuseppe

RandomFractals commented 11 months ago

@igorDykhta your follow up above doesn't address the questions we posed. not sure why you quoted our inquiry if you don't plan to address them 🙂

ibgreen commented 11 months ago

@RandomFractals If you read the reply more carefully you will see that Igor tagged another collaborator on that question.

RandomFractals commented 11 months ago

np. happy to see you finally ship new v3.0 alpha v. been awhile since you guys did that and many of your and our geo data viewer users been asking about it 🙂

RandomFractals commented 11 months ago

It's ok if you don't plan to advertise 3rd party keplergl plugins on your home page or some ecosystem page on your site.

Also, @igorDykhta & @ibgreen appreciate you updating keplergl code base and so many commits you pushed this year for that 3.0 alpha v.

We do plan to update our geo data viewer to use your latest and greatest, possibly will even switch to using your loaders library for loading large datasets in various formats for our vs code extension users.

ibgreen commented 11 months ago

I doubt there has been any active decision against including these. A possible reason is that a couple of new people have been involved in some design refreshes and maybe this bit was unclear to someone and got lost somewhere. It will probably take a little while to sort it as we are mostly prioritizing the neg work of trying to get 3.0 code release ready, but once we do we will look at the packaging etc.

ferchomuri commented 11 months ago

I believe that the problem is fixed with the new release. I will close the issue today. Thank you guys

mosi14 commented 5 months ago

I got an error when i tried to use keplergl in a TypeScript React project the same code is work in the javascript but i did not understand what is happend with typescript Here is the error :

index.js:130 Uncaught Error: Trying to insert a new style tag, but the given Node is unmounted!

Are you using a custom target that isn't mounted?
Does your document not have a valid head element?
Have you accidentally removed a style tag manually? at new StyledComponentsError (index.js:130:1) at makeStyleTag (StyleTags.js:44:1) at makeTag (StyleTags.js:123:1) at StyleSheet.makeTag$$1 [as makeTag] (StyleTags.js:419:1) at StyleSheet.getTagForId (StyleTags.js:419:1) at StyleSheet.deferredInject (StyleTags.js:419:1) at new ComponentStyle (StyleTags.js:419:1) at createStyledComponent (StyledComponent.js:167:1) at Function.templateFunction [as div] (StyleTags.js:419:1) at ./node_modules/@kepler.gl/components/dist/side-panel/layer-panel/column-selector.js (column-selector.tsx:48:1)

keplergl / kepler.gl

[Bug] How can I used the version v3.0.0-alpha.0 #2363

Dependencies

Component code