mtt87

function fetchPages(resultsArray, page, end) {
  return new Promise((resolve, reject) => {
    fetch(`https://my-api.com/?page=${page}`)
      .then((res) => {
        // res.json
        // {
        //   data: [1,2,3],
        //   nextPage: 1,
        //   previousPage: 0,
        // }

mtt87

import React from 'react';
import BigCalendar from 'react-big-calendar';
import SingleEvent from './SingleEvent';

// THIS WORKS
const Calendar = ({ refreshData }) =>
  ...
    <BigCalendar
      components={{
        eventWrapper: SingleEvent,

mtt87

// This DOES NOT work (require is undefined)
import React from 'react';
import { View, Text } from 'react-native';

const Component = () => (
  <View>
    <Text>Hello world</Text>
  </View>
);

mtt87

Running now dev works fine for the Gatsby website and I can see it correctly at http://localhost:3000. But as soon as I browse to /api/locations it doesn't work anymore:

> GET /api/locations
> Building @now/node:api/locations/index.js
downloading user files...
installing dependencies for user's code...
installing to /var/folders/4y/mlqsnhbx4yx7kwfcg8s3b9880000gn/T/co.zeit.now/dev/workPaths/7fvnfnob/api/locations
running user script...
running "npm run now-build"

mtt87

import styled from '@emotion/native';
import {useTheme} from 'emotion-theming';
import theme from '../theme';
import {space, layout, typography, color, variant} from 'styled-system';

type Variants = keyof typeof theme.buttons;

const BtnWrapper = styled.View`
  ${space}
  ${layout}

mtt87

/* eslint react/jsx-props-no-spreading:0 */
import React, { ReactNode } from 'react';
import { ViewProps } from 'react-native';
import {
  SpaceProps,
  ColorProps,
  LayoutProps,
  FlexProps,
  FlexDirectionProps,
  AlignItemsProps,

mtt87

Understanding next.js bundling and 3rd party libraries

Simple next.js app with no styles, no images, just a simple <h1>hello world</h1>

Page                             Size     First Load JS
┌ ○ /                            268 B          63.2 kB
├   /_app                        0 B            62.9 kB
└ ○ /404                         3.06 kB          66 kB
+ First Load JS shared by all    62.9 kB
  ├ chunks/framework.56721e.js   42 kB

mtt87

We use social login (Google, GitHub and Microsoft as Identity Providers) and we wanna understand users that signup where they came from. The flow looks like this

1. User lands on the website for example from a campaign (utm params in the url)
2. User accepts the hubspot tracking banner
3. User clicks on the signup button
4. User is redirected to our "developer portal" where we trigger a social login with their selected provider. We have the hubspot tracking code running also on our developer portal.
5. User finishes the signup and lands on our internal console dashboard

Problem

We are pushing a new contact to Hubspot on step 5 but at that point we lose all the information about how the user landed in first place on our website, if it was direct traffic or ads campaign etc because we are creating the contact from our backend calling the Hubspot API.

mtt87

import 'navigator.locks'

export async function getSession(ctx) {
  if (typeof window === 'undefined') {
    const session = await _fetchData("session", ctx)
    return session
  }
  return navigator.locks.request('NEXT_AUTH:GET_SESSION', async () => {
    const session = await _fetchData("session", ctx)
    if (ctx?.triggerEvent ?? true) {

mtt87

import Box from '@components/ui/Box'
import Flex from '@components/ui/Flex'
import Spinner from '@components/ui/Spinner'
import { styled, theme } from '@src/stitches.config'
import * as React from 'react'

const StyledButton = styled('button', {
  fontFamily: '$inter',
  fontWeight: '$700',
  borderRadius: '$4',