Fix vercel deployment error with serverless.

.gitignore

@@ -74,3 +74,5 @@ lib
 .next
 
 bundles
+
+.vercel

pages/asset-manager/slides/index.js → components/AllSlides/AssetManagers/index.js

@@ -4,7 +4,7 @@ import Who from './who';
 import HowIncentivised from './howIncentivised';
 import HowJob from './howJob';
 
-export const Slides = [{
+const Slides = [{
   Component: What,
   buttons: {
     hasNextButton: true,
@@ -40,3 +40,5 @@ export const Slides = [{
     nextButtonText: 'Get Started',
   }
 }];
+
+export default Slides;

pages/list-asset/slides/assetLocation.js → components/AllSlides/ListAsset/assetLocation.js

@@ -1,15 +1,17 @@
-import getConfig from 'next/config';
+import getConfig from "next/config";
 import {
   CarouselSlide,
   CarouselSlideMainTitle,
   CarouselSlideParagraph,
   CarouselSlideInput,
   CarouselSlideSelect,
-  CarouselNextButton,
-} from 'components/CarouselSlide/';
-import GoogleAutoComplete from 'ui/GoogleAutoComplete';
+  CarouselNextButton
+} from "components/CarouselSlide/";
+import GoogleAutoComplete from "ui/GoogleAutoComplete";
 const { publicRuntimeConfig } = getConfig();
 
+console.log(publicRuntimeConfig);
+
 export const AssetLocationSlide = ({
   maxWidthDesktop,
   handleInputChange,
@@ -18,7 +20,7 @@ export const AssetLocationSlide = ({
   handleSelectSuggest,
   desktopMode,
   onClick,
-  nextButtonDisabled,
+  nextButtonDisabled
 }) => {
   const {
     userCountry,
@@ -28,7 +30,7 @@ export const AssetLocationSlide = ({
     assetCity,
     assetProvince,
     assetPostalCode,
-    countryCode,
+    countryCode
   } = formData;
   return (
     <CarouselSlide
@@ -44,10 +46,7 @@ export const AssetLocationSlide = ({
       >
         Asset location?
       </CarouselSlideMainTitle>
-      <CarouselSlideParagraph
-        isCentered
-        maxWidthDesktop={maxWidthDesktop}
-      >
+      <CarouselSlideParagraph isCentered maxWidthDesktop={maxWidthDesktop}>
         This is where your asset is going to be once fully funded.
       </CarouselSlideParagraph>
       <GoogleAutoComplete
@@ -85,8 +84,7 @@ export const AssetLocationSlide = ({
         disabled={true}
         optionFilterProp="children"
         filterOption={(input, option) =>
-          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
-          0
+          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
         }
       >
         {countries.map(country => (
@@ -117,5 +115,5 @@ export const AssetLocationSlide = ({
         />
       )}
     </CarouselSlide>
-  )
+  );
 };

package.json

@@ -5,6 +5,9 @@
   "resolutions": {
     "terser": "3.14.1"
   },
+  "engines": {
+    "node": "10.x"
+  },
   "dependencies": {
     "3box": "^1.9.0",
     "@antv/data-set": "0.10.1",
@@ -36,7 +39,7 @@
     "less": "3.9.0",
     "lint": "1.1.2",
     "multer": "1.4.1",
-    "next": "8.1.1-canary.51",
+    "next": "^9.4.5-canary.31",
     "node-sass-chokidar": "1.3.4",
     "nodemon": "1.18.10",
     "preact": "^10.0.0-beta.2",

pages/asset-manager/index.js

@@ -1,24 +1,22 @@
-import Router from 'next/router';
-import {
-  Slides,
-} from './slides';
+import Router from "next/router";
+import Slides from "../../components/AllSlides/AssetManagers";
 
-import CarouselWithNavigation from 'ui/CarouselWithNavigation';
+import CarouselWithNavigation from "ui/CarouselWithNavigation";
 
 const SliderNavigationTooltips = [
   { slide: 0, tooltip: "KYC" },
   { slide: 1, tooltip: "Location" },
   { slide: 2, tooltip: "Select Asset" },
   { slide: 3, tooltip: "Asset Location" },
-  { slide: 4, tooltip: "Supporting Documents" },
-]
+  { slide: 4, tooltip: "Supporting Documents" }
+];
 
 const AssetManager = () => (
   <React.Fragment>
     <CarouselWithNavigation
       redirectOnClose={{
-        href: 'list-asset',
-        as: 'list-asset',
+        href: "list-asset",
+        as: "list-asset"
       }}
       navigationTooltips={SliderNavigationTooltips}
       slides={Slides}

pages/list-asset/listAssetDesktop.js

@@ -11,7 +11,7 @@ import {
   SuccessSlide,
   TermsOfServiceSlide,
   GeneralDescriptionSlide,
-} from "./slides";
+} from "../../components/AllSlides/ListAsset";
 import CustomTimeline from './customTimeline';
 
 const MAX_WIDTH_DESKTOP = "450px";

pages/list-asset/listAssetMobile.js

@@ -11,7 +11,7 @@ import {
   SuccessSlide,
   TermsOfServiceSlide,
   GeneralDescriptionSlide
-} from "./slides";
+} from "../../components/AllSlides/ListAsset";
 
 const MAX_WIDTH_DESKTOP = "500px";
 
@@ -84,7 +84,7 @@ const ListAssetMobile = ({
             hasNextButton: true,
             hasBackButton: false,
             nextButtonText: !dev,
-            nextButtonHandler: !dev ,
+            nextButtonHandler: !dev,
             onSuccessMoveToNextSlide: true
           }
         },

pages/onboarding/index.js

@@ -1,56 +1,55 @@
-import CarouselWithNavigation from 'ui/CarouselWithNavigation';
-import {
-  Slides,
-} from './slides';
-import Router from 'next/router';
-import BancorProvider from 'components/BancorContext';
+import CarouselWithNavigation from "ui/CarouselWithNavigation";
+import { Slides } from "../../components/AllSlides/Onboarding";
+import Router from "next/router";
+import BancorProvider from "components/BancorContext";
 
 const SliderNavigationTooltips = [
-  { slide: 0, tooltip: 'What is MyBit Go?' },
-  { slide: 1, tooltip: 'What can you use MyBit Go for?' },
-  { slide: 2, tooltip: 'What it isn\'t?' },
-  { slide: 3, tooltip: 'What is blockchain?' },
-  { slide: 4, tooltip: 'What are the benefits?' },
-  { slide: 5, tooltip: 'What is Ethereum?' },
-  { slide: 6, tooltip: 'Smart contracts' },
-  { slide: 7, tooltip: 'How do I invest?' },
-  { slide: 8, tooltip: 'How to secure my assets?' },
-  { slide: 9, tooltip: 'Required setup' },
+  { slide: 0, tooltip: "What is MyBit Go?" },
+  { slide: 1, tooltip: "What can you use MyBit Go for?" },
+  { slide: 2, tooltip: "What it isn't?" },
+  { slide: 3, tooltip: "What is blockchain?" },
+  { slide: 4, tooltip: "What are the benefits?" },
+  { slide: 5, tooltip: "What is Ethereum?" },
+  { slide: 6, tooltip: "Smart contracts" },
+  { slide: 7, tooltip: "How do I invest?" },
+  { slide: 8, tooltip: "How to secure my assets?" },
+  { slide: 9, tooltip: "Required setup" }
 ];
 
 class OnboardingPage extends React.Component {
-  static async getInitialProps (ctx) {
-    if(ctx.req){
-      return {redirectTo: ctx.query.redirectTo};
+  static async getInitialProps(ctx) {
+    if (ctx.req) {
+      return { redirectTo: ctx.query.redirectTo };
     } else {
       return {};
     }
   }
 
   componentDidMount = () => {
-    const {
-      redirectTo,
-    } = this.props;
+    const { redirectTo } = this.props;
     // When we redirect to this page on the server the
     // URL doesn't actually update. We already have
     // onboarding.js at this point so its inconsequent.
     // until a fix is found at least.
-    if(window && redirectTo) {
-      Router.push('/onboarding');
+    if (window && redirectTo) {
+      Router.push("/onboarding");
     }
     this.firstLocation = redirectTo;
     // The path / should redirect to /explore, user's first visit for example
-    if(!redirectTo || (redirectTo && redirectTo.href === '/' && redirectTo.as === '/')) {
+    if (
+      !redirectTo ||
+      (redirectTo && redirectTo.href === "/" && redirectTo.as === "/")
+    ) {
       this.firstLocation = {
-        href:'/explore',
-        as: '/explore',
+        href: "/explore",
+        as: "/explore"
       };
     }
-  }
+  };
 
   finishOnboarding = () => {
     Router.push(this.firstLocation.href, this.firstLocation.as);
-  }
+  };
 
   render() {
     return (
@@ -66,7 +65,7 @@ class OnboardingPage extends React.Component {
           />
         </BancorProvider>
       </React.Fragment>
-    )
+    );
   }
 }
 

server/index.js

@@ -8,7 +8,7 @@ const multer = require('multer');
 const multerStorage = multer.memoryStorage();
 const port = process.env.port || 8081;
 const dev = process.env.NODE_ENV !== 'production';
-import * as CivicController from './controllers/civicController';
+// import * as CivicController from './controllers/civicController';
 import * as AwsController from './controllers/awsController';
 import * as AirTableController from './controllers/airTableController';
 
@@ -83,16 +83,16 @@ app
     }
   });
 
-  server.get('/api/list-asset/auth', async (req, res) => {
-    try{
-      const jwt = req.header('Authorization').split('Bearer ')[1];
-      const userData = await CivicController.exchangeCode(jwt);
-      res.send(userData);
-    }catch(err){
-      res.statusCode = 500;
-      res.send(err);
-    }
-  });
+  // server.get('/api/list-asset/auth', async (req, res) => {
+  //   try{
+  //     const jwt = req.header('Authorization').split('Bearer ')[1];
+  //     const userData = await CivicController.exchangeCode(jwt);
+  //     res.send(userData);
+  //   }catch(err){
+  //     res.statusCode = 500;
+  //     res.send(err);
+  //   }
+  // });
 
   server.get('/api/assets/files', (req, res) => {
     res.json({

vercel.json

@@ -0,0 +1,7 @@
+{
+  "version": 2,
+  "builds": [
+    { "src": "next.config.js", "use": "@vercel/next" },
+    { "src": "apis/*.js", "use": "@vercel/node" }
+  ]
+}