#StackBounty: #reactjs #static #constants #instance-methods How do you access React statics within instance methods?

Bounty: 50

I’m using React 16.13.0. I have defined this static block within my component …

class FormContainer extends Component {
  statics: {
    DEFAULT_COUNTRY: 484;
  }

  constructor(props) {
    super(props);

    ...

  componentDidMount() {
    let initialCountries = [];
    let initialProvinces = [];
    // Get initial countries
    fetch('/countries/')
        .then(response => {
            return response.json();
        }).then(data => {
        initialCountries = data.map((country) => {
            return country
        });
        console.log("output ...");
        console.log(initialCountries);
        this.setState({
            countries: initialCountries,
        });
    });
    // Get initial provinces (states)
    console.log("val:" + this.DEFAULT_COUNTRY); 

My question is, how do I reference that static block? The above

console.log("val:" + this.DEFAULT_COUNTRY);

produces

undefined 


Get this bounty!!!

#StackBounty: #reactjs #react-native #web-applications #react-router #progressive-web-apps Controlling Browser Back button in React

Bounty: 50

I want to make my webapp work like a mobile app. This means when a user presses back, they expect pops to close, not entire pages to change.

My end goal is to make it so when a modal opens the Back button will now close the modal and if they click it again it will go back.

I’ve tried several methods and although close they never respond consistently.
https://codesandbox.io/s/github/subwaymatch/react-disable-back-button-example-v2

Anyone with a PROVEN working version of what Im looking for?


Get this bounty!!!

#StackBounty: #reactjs #proxy #environment-variables #package.json How do I configure my package.json file to read from an env var set …

Bounty: 100

I’m using React 16.12.0. I have the following “proxy” configured in my package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "proxy": "http://localhost:9090",

This works great for development, but when I move my site to qa and production, I would like the ability to have my package.json file read from an environment variable of some kind. How do I write my package.json or configure my app to use a different URL based on the environment, or at least a variable set in my environment?


Get this bounty!!!

#StackBounty: #reactjs #docker #nginx #flask #spotify React, Flask, Nginx – Spotify Authorization Code

Bounty: 50

Based on this SO answer, I’m trying to implement Spotify Authorization Code, whereby, unlike Implicit Flow, the app musr provide client_secret and get a refresh token for unlimited access, and thus data exchange must happen server-to-server.


Nginx Proxy

My backend server runs with Flask at http://localhost:5000, and my Frontend runs with React at http://localhost:3000.

Both services are behind a nginx reverse proxy, configured like so:

location / {
        proxy_pass        http://client:3000;
        proxy_redirect    default;
        proxy_set_header  Upgrade $http_upgrade;
        proxy_set_header  Connection "upgrade";
        proxy_set_header  Host $host;
        proxy_set_header  X-Real-IP $remote_addr;
        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header  X-Forwarded-Host $server_name;
        proxy_read_timeout 86400s;
        proxy_send_timeout 86400s;
    }

location /callback {
        proxy_pass        http://web:5000;
        proxy_redirect    default;
        proxy_set_header  Upgrade $http_upgrade;
        proxy_set_header  Connection "upgrade";
        proxy_set_header  Host $host;
        proxy_set_header  X-Real-IP $remote_addr;
        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header  X-Forwarded-Host $server_name;
        proxy_read_timeout 86400s;
        proxy_send_timeout 86400s;
    }

According to the answer above, I’m doing the following:

  1. Supplying a button on my Frontend page that links to your
    https://accounts.spotify.com/authorize/{…} URL.
    (this must not be an AJAX request call, or it will raise CORS issues)
  2. The user will proceed to give my application the permissions specified in the scope parameter, and
    will be directed back to the URL you’ve specified in the REDIRECT_URI parameter.
  3. This is where you get the authorization code, which you can use in
    the https://accounts.spotify.com/api/token/{…} endpoint

React

Here I supply the button to the user:

render() {
    var state = generateRandomString(16);
    const Credentials = {
      stateKey: 'spotify_auth_state',
      client_id: 'my_id',
      client_secret: 'my_secret',
      redirect_uri: 'http://localhost:5000/callback',
      scope: 'playlist-modify-public playlist-modify-private'
    }
    let url = 'https://accounts.spotify.com/authorize';
    url += '?response_type=token';
    url += '&client_id=' + encodeURIComponent(Credentials.client_id);
    url += '&scope=' + encodeURIComponent(Credentials.scope);
    url += '&redirect_uri=' + encodeURIComponent(Credentials.redirect_uri);
    url += '&state=' + encodeURIComponent(state);


   return (
      <div className="button_container">
      <h1 className="title is-3"><font color="#C86428">{"Welcome to Brandio Coffee"}</font></h1>
          <div className="Line" /><br/>
            <a href={url} > Login to Spotify </a>
      </div>
    )
  }

Flask

Here is where I want the app be redirected to, in order to save tokens to database, and ideally having another redirection back to my frontend afterwards.

@spotify_auth_bp.route("/callback", methods=['GET', 'POST'])
def callback():
    # Auth Step 4: Requests refresh and access tokens
    CLIENT_ID =   'my_id'
    CLIENT_SECRET = 'my_secret'
    CLIENT_SIDE_URL = 'http://localhost'
    PORT = 5000
    REDIRECT_URI = "{}:{}/callback".format(CLIENT_SIDE_URL, PORT)

    SPOTIFY_TOKEN_URL = "https://accounts.spotify.com/api/token"

    auth_token = request.args['code']
    code_payload = {
        "grant_type": "authorization_code",
        "code": str(auth_token),
        "redirect_uri": REDIRECT_URI,
        'client_id': CLIENT_ID,
        'client_secret': CLIENT_SECRET,
    }
    post_request = requests.post(SPOTIFY_TOKEN_URL, data=code_payload)

    # Auth Step 5: Tokens are Returned to Application
    response_data = json.loads(post_request.text)

    access_token = response_data["access_token"]
    refresh_token = response_data["refresh_token"]
    token_type = response_data["token_type"]
    expires_in = response_data["expires_in"]

    # DO SOMETHING WITH TOKENS, UPLOAD TO DB etc

    response_object = {
                'status': 'success',
                'message': 'success',
                'data': [{'access_token': access_token,
                          'refresh_token': refresh_token,
                          'token_type': token_type}]
                }
    return jsonify(response_object), 200
    # return redirect(?) # <--------------------------

Redirects whitelisted with Spotify

http://localhost:5000 
http://localhost:5000/callback
http://localhost/callback 

When I click on the button with the first two redirects, however, I’m getting the error:

localhost refused to connect.

Why?

If I click the button having http://localhost/callback as redirect_uri I get:

KeyError: 'access_token'

What am I missing?

QUESTION

I would like to have a Flask endpoint like the one above where I could fetch the access token (renewed if it is expired).


NOTE 1

All of the services above run in a Docker network, with a container for each one.


NOTE 2

There is this Spotify wrapper: Spotipy, which abstracts the whole auth process for you:

    sp_oauth = spotipy.oauth2.SpotifyOAuth(
     client_id = 'client_id', 
     client_secret = 'client_secret', 
     redirect_uri = 'http://localhost/callback', 
     scope = SCOPE,
     cache_path= os.environ.get('SPOTIPY_CACHE_PATH'))

but unfortunately it is not working with my docker setup, because it prompts terminal to copy and paste commands:

Enter the URL you were redirected to: 

User authentication requires interaction with your
web browser. Once you enter your credentials and
give authorization, you will be redirected to
a url.  Paste that url you were directed to to
complete the authorization.

Opened https://accounts.spotify.com/authorize?client_id=my_id&response_type=code&redirect_uri=http%3A%2F%2Flocalhost&scope=playlist-modify-private%2Cplaylist-modify-public%2Cuser-top-read in your browser

That would dispense with Javascript code for auth and would be perfect.


Get this bounty!!!

#StackBounty: #javascript #reactjs Uncaught (in promise) TypeError: Cannot read property of undefined, when try to catch API data in Re…

Bounty: 50

I am developing Currency Converter application using ReactJS. The program is about convert from one currency to another. The application has one form consist of a field with submit button. Moreover it also has initial currency ‘USD 10’ as a default.

When user type the an abbreviation of currency (e.g.: KRW) in the field and click the submit button. There will be a result below the form that shows the result of the conversion from USD to KRW. If the user want to add more currency, another selection currency will be shown below “KRW” conversion result.

When I am trying to make function to show the result when user submit the abbreviation of currency in the field.

This is the error:

Uncaught (in promise) TypeError: Cannot read property 'rates' of undefined
    at Currency.render (App.js:402)
    at finishClassComponent (react-dom.development.js:15319)
    at updateClassComponent (react-dom.development.js:15274)
    at beginWork (react-dom.development.js:16262)
    at performUnitOfWork (react-dom.development.js:20279)
    at workLoop (react-dom.development.js:20320)
    at renderRoot (react-dom.development.js:20400)
    at performWorkOnRoot (react-dom.development.js:21357)
    at performWork (react-dom.development.js:21267)
    at performSyncWork (react-dom.development.js:21241)
    at requestWork (react-dom.development.js:21096)
    at scheduleWork (react-dom.development.js:20909)
    at Object.enqueueSetState (react-dom.development.js:11595)
    at App.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:336)
    at Object.App.addCurrency [as onSubmit] (App.js:34)
    at Form.handleSubmit (App.js:204)

And this is my code:

class Currency extends React.Component {
render() {
        const p = this.props;
        return (
            <div className="currency">
                {/*<span className="currencyText"><Currency/></span>*/}
                <div className="currencyInfo">
                    <div>{"1 "+p.base + " = " }</div>
                    <div>{p.data.rates}</div> {/*this is (App.js:402)*/}

                </div>
            </div>
        );
    }
}

Instead of that, If I code of Apps.js:402 like this:

<div>{p.data}</div>

and run the app, and check the console in chrome, the result for the line is empty.

The data that I mean is on the picture:

console result

And this is the result of console prop p:

result of prop p in console.log

Any solution for this, so that I can retrieve the data rates from the currency?


Get this bounty!!!

#StackBounty: #reactjs #npm #webpack #file-upload #babel CSS and Images files not coming after transpiling package with babel in new CRA

Bounty: 50

I am importing CSS as import ‘./style.css’; and images in CSS with background URL property. What I want is to make a package, publish it to npm without building and then install it into a new CRA and use it there. Using self made npm package in react. Failed to compile. From here I got to know that to use that installed package now I have to transpile it. But the issue is my js/jsx are getting transpiled from ES6 to ES5 but the images and CSS aren’t coming into the new transpiled folder.

DETAILS
I made a package in Reactjs and was not able to use it after publishing the source, not by making the build.
Then I posted a question on it: Using self made npm package in react. Failed to compile.

Now I am able to use it by following the steps in the accepted answer i.e. by transpiling ./src using babel.

The issue on which I am still stuck is that I don’t get my CSS and images in the new transpiled location i.e. ./lib/src. If I copy all the images and CSS folders in the respective places in ./lib/src. It works but I don’t want to do it manually.

Any suggestions on how to achieve this.

WEBPACK.CONFIG.JS

module.exports = {
  overrides: [
    {
      test: ["./node_modules/<component_name>"],
      presets: ["@babel/preset-env", "@babel/preset-react"],
      plugins: ["@babel/plugin-proposal-class-properties"]
    }
  ]
};

PACKAGE.json

{
  "name": "package-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.8.3",
    "@material-ui/core": "^1.5.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "active-event-stack": "^1.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-webpack-loaders": "^0.9.0",
    "classnames": "^2.2.3",
    "css-loader": "^3.4.2",
    "file-loader": "^5.0.2",
    "material-ui": "^0.20.0",
    "path": "^0.12.7",
    "prop-types": "^15.6.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-draggable": "^2.2.6",
    "react-onclickoutside": "^5.10.0",
    "react-redux": "^7.1.3",
    "react-resizable": "^1.7.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "redux": "^3.7.2",
    "style-loader": "^1.1.3",
    "styled-components": "^4.3.2",
    "url-loader": "^3.0.0",
    "wolfy87-eventemitter": "^5.2.9"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4"
  }
}


Get this bounty!!!

#StackBounty: #r #reactjs #web-scraping #leaflet #rselenium Extracting underlying data via RSelenium with embedded leaflet svg, and more

Bounty: 200

I would like to extract information about each ad in this link. Now, I got to the stage where I can automatically click See Ad Details, but there is much underlying data that is not straightforward to wrangle into a neat dataframe.

library(RSelenium)
rs <- rsDriver()
remote <- rs$client
remote$navigate(
  paste0(
    "https://www.facebook.com/ads/library/?", 
    "active_status=all&ad_type=political_and_issue_ads&country=US&", 
    "impression_search_field=has_impressions_lifetime&", 
    "q=actblue&view_all_page_id=38471053686"
  )
)

test <- remote$findElement(using = "xpath", "//*[@class="_7kfh"]")
test$clickElement()
## Manually figured out element
test <- remote$findElement(using = "xpath", "//*[@class="_7lq0"]")
test$getElementText()

The output text is messy itself but I believe with some time and effort, it can be wrangled into something useful. The problem is wrangling the underlying data in

  1. the graph, which seems to be just an image, and
  2. leaflet svg, which displays data when a cursor hovers over it.

I am at a loss to how to systematically extract this image and especially the leaflet svg. How would I take each ad and then extract the full data available in the details in this case?


Get this bounty!!!

#StackBounty: #java #reactjs #spring #spring-mvc Problems running react js in java spring mvc

Bounty: 100

I’m learning to use React and wanted to use it in a SpringBoot application, but I just can’t seem to get this working.
I can create a website using Spring-MVC and also execute JavaScript code on it (without React, JSX). But I just can’t figure out how to use JavaScript code that uses React.

What I got working so far is…

  • A website with a Spring-MVC backend
  • Executing javascript code on this website
  • Building a jar of the application using maven
  • Creating a React project inside my spring project using the create-react-app tool
  • Compiling the React code using a maven plugin (following this tutorial) (or at least I think it’s working, because maven says that the build is successfull)
  • Loading the React js script in the browser

What is not working is…

  • Executing the React js script in the browser or debugging the script

The simple React code I want to execute looks like this: test.js

import React from "react";
import ReactDOM from "react-dom";

export default function TestComponent() {
    return <div>
        <p>Hello There!</p>
    </div>;
}

debugger;

ReactDOM.render(<TestComponent />, document.getElementById('hello_there'));
alert("Hello There!");

It should just add some text into the html file to show it’s working, but it doesn’t. The html (thymeleaf) file looks like this: home.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Go Server - JFabricationGames</title>
</head>
<body>
    <h1>JFG - Go Server (WIP)</h1>
    <img th:src="@{images/welcome.png}" width=500 />
    <br>
    <a th:href="@{/login}">Login</a>

    <div id="hello_there"></div>
    <div id="hello_there_2"></div>
    http://test.js
    <!-- http://test_no_react.js -->
</body>
</html>

And my Spring project looks like this:

Spring project structure

and is build using this pom.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.4.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>
    <groupId>net.jfabricationgames</groupId>
    <artifactId>go_server_spring</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>go_server_spring</name>
    <description>A Go Server</description>

    <properties>
        <java.version>1.8</java.version>

        <frontend-src-dir>${project.basedir}/src/main/app</frontend-src-dir>
        <node.version>v12.3.1</node.version>
        <yarn.version>v1.16.0</yarn.version>
        <frontend-maven-plugin.version>1.7.6</frontend-maven-plugin.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>

            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>${frontend-maven-plugin.version}</version>

                <configuration>
                    <nodeVersion>${node.version}</nodeVersion>
                    <yarnVersion>${yarn.version}</yarnVersion>
                    <workingDirectory>${frontend-src-dir}</workingDirectory>
                    <installDirectory>${project.build.directory}</installDirectory>
                </configuration>

                <executions>
                    <execution>
                        <id>install-frontend-tools</id>
                        <goals>
                            <goal>install-node-and-yarn</goal>
                        </goals>
                    </execution>

                    <execution>
                        <id>yarn-install</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>

                    <execution>
                        <id>build-frontend</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <arguments>build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>position-react-build</id>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>${frontend-src-dir}/build</directory>
                                    <filtering>false</filtering>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

If you want to have a look at the full project code you can find it on GitHub: https://github.com/tfassbender/go_server_spring/tree/react_test_2


Now when opening the website in the browser (firefox 72.0.2 (64-Bit)) and using the developer tools I can see that the script was loaded and I can even see the script code:

Firefox developer tools - network

But what is strange is that I can’t seem to debugg the file or even find the file in the debugger…

Firefox developer tools - debugger

… although it is loaded and even seems to be executed, because the developer tools show an error in the first line of the script (in the image above).
And what is also kind of strange to me is that the script (test.js) that I can see in the browser (when opening it from the network tab of the developer tools) shows exactly the react code from the test.js file. I would expect it to be compiled to ES5, but I’m very new to React so I don’t realy know if this is a problem or an expected behaviour.

So basically the problem is that I can’t debugg my javascript/React code and I’m not shure whether I load the correct file or even compiled it correctly (because I’m realy new to React). In fact I have no idea what’s going on here and what the problem might be.
So any help would be great.


Get this bounty!!!

#StackBounty: #reactjs #redux #react-redux #jslint JSLint: Disallow state.<something> in Redux connect functon

Bounty: 50

Need to write a JSLInt rule for this:

Good:

connect((state, props) => {
  return {
     organizations: Organization.getActive(state, props.user),
    ...
    <prop>: Model.scope(state, prop...),  

  };
})(MyComponent);

Bad: All the stuff in there

connect((state, props) => {
  return {
     organizations: state.organizations, //archived? suspended? or really all?
  };
})(MyComponent);

Bad: Filtering in place.

connect((state, props) => {
  return {
     organizations: filter(state.organizations, {
       status: Organization.ACTIVE
     }),
  };
})(MyComponent);

All that should be needed is to disallow state.<something> within the connect function as a starting point and make tweaks as needed.


Get this bounty!!!

#StackBounty: #reactjs #performance #webgl #webgl2 #deck.gl Display: none on Deck.gl React component causes huge performance issue

Bounty: 150

EDIT: This issue is specific to this setup. Please use the code from here if you wish to help. Thanks!

I am using Deck.gl with react to display a map. When I try to hide the map with display: none it starts to freeze up my whole computer. I have worked around this by using visibility: collapse instead, but I would like to know why display: none causes this problem.

The console starts perpetually filling up with warnings:

luma: Device pixel ratio clamped context.js:202:84
Error: WebGL warning: clear: Requested size 21535x8218 was too large, but resize to 10767x4109 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawElements: Drawing to a destination rect smaller than the viewport rect. (This warning will only be given once) bundle.min.js line 15214 > eval:32:191695
Error: WebGL warning: drawingBufferWidth: Requested size 21535x8218 was too large, but resize to 10767x4109 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 20020x7637 was too large, but resize to 10010x3818 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 20020x7637 was too large, but resize to 10010x3818 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 18609x7099 was too large, but resize to 9304x3549 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 18609x7099 was too large, but resize to 9304x3549 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 17297x6598 was too large, but resize to 8648x3299 succeeded. bundle.min.js line 15214 > eval:32:60490
Source map error: Error: NetworkError when attempting to fetch resource.
Resource URL: webpack:///./node_modules/@luma.gl/webgl/dist/esm/context/context.js?
Source Map URL: context.js.map
Error: WebGL warning: drawingBufferWidth: Requested size 17297x6598 was too large, but resize to 8648x3299 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 21925x8361 was too large, but resize to 10962x4180 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 21925x8361 was too large, but resize to 10962x4180 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 20379x7772 was too large, but resize to 10189x3886 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 20379x7772 was too large, but resize to 10189x3886 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 18943x7225 was too large, but resize to 9471x3612 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 18943x7225 was too large, but resize to 9471x3612 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 17607x6715 was too large, but resize to 8803x3357 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 17607x6715 was too large, but resize to 8803x3357 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 22314x8510 was too large, but resize to 11157x4255 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 22314x8510 was too large, but resize to 11157x4255 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 20743x7911 was too large, but resize to 10371x3955 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 20743x7911 was too large, but resize to 10371x3955 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 19280x7354 was too large, but resize to 9640x3677 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 19280x7354 was too large, but resize to 9640x3677 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 17925x6834 was too large, but resize to 8962x3417 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 17925x6834 was too large, but resize to 8962x3417 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 16662x6351 was too large, but resize to 8331x3175 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 16662x6351 was too large, but resize to 8331x3175 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 21115x8049 was too large, but resize to 10557x4024 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 21115x8049 was too large, but resize to 10557x4024 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 19626x7482 was too large, but resize to 9813x3741 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 19626x7482 was too large, but resize to 9813x3741 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 18246x6954 was too large, but resize to 9123x3477 succeeded. bundle.min.js line 15214 > eval:32:60490

I took a look at performance with the React profiler:
React Profiler output

In every commit that takes longer to process than normal, it shows AutoSizer taking a long time to render.

Reproducing the problem:

Node version: v10.16.3

  1. Run create-react-app my-app.
  2. Copy code below.
  3. Apply display: none on any element containing the map, including the elements rendered by Deck.gl.

WARNING: Reproducing this issue takes up a lot of resources and might crash your computer!

The code

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import 'mapbox-gl/dist/mapbox-gl.css';
import {GeoMapChart} from './GeoMapChart'

ReactDOM.render(<GeoMapChart />, document.getElementById('root'));

serviceWorker.unregister();

GeoMapChart.tsx

import * as React from 'react';
import DeckGL from '@deck.gl/react';
import {StaticMap} from 'react-map-gl';


export function GeoMapChart() {

    const [viewState, setViewState] = React.useState(INITIAL_VIEW_STATE);

    return (
            <DeckGL viewState={viewState} controller={true} width={'100%'} height={'100%'} layers={[]}  onViewStateChange={
                ({viewState, oldViewState, interactionState}) => {
                    const newViewState = {...viewState};
                    setViewState(newViewState);
                }}>

                <StaticMap width={'100%'} height={'100%'} mapStyle={MAPBOX_BASE_LAYER}/>
            </DeckGL>
    )
}

const MAX_ZOOM = 19;
const MIN_ZOOM = 2;
const INITIAL_VIEW_STATE = {
    latitude: 37.77,
    longitude: -122.42,
    zoom: 5,
    bearing: 0,
    pitch: 0,
    maxZoom: MAX_ZOOM,
    minZoom: MIN_ZOOM
};


const BASEMAP_TILE_SOURCE_NAME = 'simple-tiles';
const BASEMAP_TILE_SERVERS = [
    'http://a.tile.osm.org/{z}/{x}/{y}.png',
    'http://b.tile.osm.org/{z}/{x}/{y}.png',
    'http://c.tile.osm.org/{z}/{x}/{y}.png',
    //'//stamen-tiles-a.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg',
    //'//stamen-tiles-b.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg',
    //'//stamen-tiles-c.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg',
];
const BASEMAP_ATTRIBUTION = `Map tiles by <a href="http://stamen.com">Stamen Design</a>, under
<a href="http://creativecommons.org/licenses/by/3.0"> CC BY 3.0</a>. Data by
<a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">
ODbL</a>.`.replace(/n/gm, '');
const COMMON_LAYER_CONFIG = {
    minZoom: 2,
    maxZoom: 17, // New data will be requested until this level
    pixelScaleFactor: 8,
    tileSize: 256,
    isTms: true,
    topoLayerClusteringSwithLevel: 13,
    maxVisibleRasterLayers: 3,
    maxConfigurableLayers: 26,
};
const MAP_CONFIG = {
    MIN_ZOOM: 1,
    MAX_ZOOM: 18,
    INITIAL_ZOOM: 9,
    SHOW_TILE_BOUNDARIES: false,
    DRAG_ROTATE: false,
    ZOOM_NO_DATA: 2,
    SEARCH_DEFAULT_ZOOM: 14,
};

const MAPBOX_BASE_LAYER = {
    version: 8,
    sources: {
        [BASEMAP_TILE_SOURCE_NAME]: {
            type: 'raster',
            tiles: BASEMAP_TILE_SERVERS,
            tileSize: COMMON_LAYER_CONFIG.tileSize,
            attribution: BASEMAP_ATTRIBUTION,
        }
    },
    layers: [
        {
            id: BASEMAP_TILE_SOURCE_NAME,
            type: 'raster',
            source: BASEMAP_TILE_SOURCE_NAME,
            minzoom: MAP_CONFIG.MIN_ZOOM,
            maxzoom: MAP_CONFIG.MAX_ZOOM,
        }
    ],
};

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <title>Deck.gl performance issue</title>
</head>

<body>
  <div id="root"></div>

</body>

</html>

package.json

{
    "name": "portal_x_dashboard_ui_boot",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@types/lodash": "^4.14.149",
        "@types/node": "13.1.8",
        "@types/react": "16.8.3",
        "@types/react-dom": "16.0.11",
        "@types/react-router-dom": "5.1.3",
        "axios": "0.19.0",
        "deck.gl": "7.3.7",
        "jss": "10.0.0-alpha.3",
        "lodash": "4.17.15",
        "react": "16.8.5",
        "react-dom": "16.8.5",
        "react-map-gl": "5.1.3",
        "react-router-dom": "5.1.2"
    },
    "scripts": {
        "start": "webpack-dev-server --mode development --hot",
        "build": "webpack --mode production",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ],
    "devDependencies": {
        "@danmarshall/deckgl-typings": "^3.4.3",
        "@types/react-map-gl": "^5.0.3",
        "@types/uuid": "^3.4.6",
        "awesome-typescript-loader": "^5.2.1",
        "babel-jest": "^23.6.0",
        "css-loader": "^2.1.0",
        "enzyme": "^3.8.0",
        "enzyme-adapter-react-16": "^1.7.1",
        "enzyme-to-json": "^3.3.5",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "jest": "^23.6.0",
        "node-sass": "^4.11.0",
        "react-scripts": "2.1.2",
        "react-test-renderer": "^16.7.0",
        "sass-loader": "^7.1.0",
        "source-map-loader": "^0.2.4",
        "style-loader": "^0.23.1",
        "typescript": "3.7.4",
        "webpack": "^4.28.1",
        "webpack-cli": "^3.2.1",
        "webpack-dev-server": "^3.1.14"
    },
    "jest": {
        "snapshotSerializers": [
            "enzyme-to-json/serializer"
        ]
    }
}

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.tsx',
  devServer: {
    port: 9012,
    historyApiFallback: true,
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.min.js'
  },
  module: {
    rules: [
      {
        test: /.tsx?$/,
        loader: 'awesome-typescript-loader'
      },
      {
        test:/.css$/,
        use:['style-loader','css-loader', 'sass-loader']
      },
      {
        test: /.scss$/, 
        use:["css-loader",'sass-loader']
      },
      {
        test: /.(?:png|jpg|svg)$/,
        loader: 'url-loader'

    },
    {
      test: /.(ico|jpeg|gif|eot|otf|webp|ttf|woff|woff2)(?.*)?$/,
      loader: 'file-loader'

  },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: '!!html-loader!./src/index.html'
    }),

  ]
}

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": false,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react",
        // "suppressImplicitAnyIndexErrors": true,
    },
    "include": [
        "./src/**/*"
    ]
}


Get this bounty!!!