How to port data from BigQuery into a ReactJS webpack app already deployed on Google App Engine

问题

I have successfully managed to deploy an app based on kepler.gl on Google App Engine with some sample data (based on the vis academy tutorial). What I would like is to be able to get data from Big Query and pass that as the source data.

I've tried to implement the example in nodejs-bigquery sample, but cannot figure out how to pass the results into the main app.js file. I'm an absolute beginner in app development and javascript so any help would be highly appreciated.

Here's how my main app.js file looks like

import React, {Component} from 'react';
import {connect} from 'react-redux';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import KeplerGl from 'kepler.gl';

// Kepler.gl actions
import {addDataToMap} from 'kepler.gl/actions';
// Kepler.gl Data processing APIs
import Processors from 'kepler.gl/processors';

// Sample data
//import data from './data/bq.js'

....

Here's the error output:

ERROR in ./~/https-proxy-agent/index.js
Module not found: Error: Can't resolve 'net' in '/Users/saroosh/code/GAE/node_modules/https-proxy-agent'
 @ ./~/https-proxy-agent/index.js 5:10-24
 @ ./~/teeny-request/build/src/index.js
 @ ./~/@google-cloud/common/build/src/util.js
 @ ./~/@google-cloud/common/build/src/index.js
 @ ./~/@google-cloud/bigquery/build/src/index.js
 @ ./src/data/bq.js
 @ ./src/app.js
 @ ./src/main.js

ERROR in ./~/https-proxy-agent/index.js
Module not found: Error: Can't resolve 'tls' in '/Users/saroosh/code/GAE/node_modules/https-proxy-agent'
 @ ./~/https-proxy-agent/index.js 6:10-24
 @ ./~/teeny-request/build/src/index.js
 @ ./~/@google-cloud/common/build/src/util.js
 @ ./~/@google-cloud/common/build/src/index.js
 @ ./~/@google-cloud/bigquery/build/src/index.js
 @ ./src/data/bq.js
 @ ./src/app.js
 @ ./src/main.js

回答1:

This seems to be an issue with webpack. I found some issues related with webpack integrations. I got some workarounds from here and you can find more information here.

As for the workarounds, if you are using the webpack.config.js provided in the vis academy tutorial, try this:

Replace this part in webpack.config.js:

node: {
    fs: 'empty'
  },

With this:

node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
  },

Solution provided by @tanohzana

来源：https://stackoverflow.com/questions/56689507/how-to-port-data-from-bigquery-into-a-reactjs-webpack-app-already-deployed-on-go

标签

node.js

google-app-engine

google-bigquery

kepler.gl