[Codelift] #Amplify #Nextjs #CodeLift

_app.tsx

import React, { FunctionComponent, useEffect } from 'react'
import ReactDOM from 'react-dom'

import { register } from 'codelift'
register({ React, ReactDOM })

import LogRocket from 'logrocket'
import setupLogRocketReact from 'logrocket-react'
if (typeof window !== 'undefined') {
  LogRocket.init('crmfpp/cashstudio', {
    release: '0.1.0',
    console: {
      shouldAggregateConsoleErrors: false,
    },
    dom: {
      baseHref: 'https://dev-sls.cash.studio/',
    },
  })
  setupLogRocketReact(LogRocket)
}
import '../styles/tailwind.css'

import Amplify from 'aws-amplify'
import config from '../src/aws-exports'
Amplify.configure({
  ...config,
  ssr: true,
})
import { Auth, CognitoUser } from '@aws-amplify/auth'

import { Header } from 'components/Header/Header'

/* eslint-disable @typescript-eslint/no-explicit-any */
type Props = {
  Component: any
  pageProps: any
}
/* eslint-enable camelcase */

/*
 * Custom attributes type defined according to the attributes used in this app
 */
type UserAttributes = {
  sub: string
  email: string
  email_verified: string
  name: string
  updated_at: string
  'custom:bytesQuota': string
  'custom:bytesUsed': string
}
/*
 * The following interface extends the CognitoUser type because it has issues
 * (see github.com/aws-amplify/amplify-js/issues/4927). Eventually (when you
 * no longer get an error accessing a CognitoUser's 'attribute' property) you
 * will be able to use the CognitoUser type instead of CognitoUserExt.
 */
type CognitoUserExt = CognitoUser & { username: string; attributes: UserAttributes }

const MyApp: FunctionComponent<Props> = ({ Component, pageProps }) => {
  useEffect(() => {
    Auth.currentAuthenticatedUser().then((user: CognitoUserExt) => {
      LogRocket.identify(user.username, {
        name: user.attributes.name,
        email: user.attributes.email,
      })
    })
  }, [])

  return (
    // <div className="md:flex bg-white rounded-lg p-24 justify-center">
    <div>
      <Header user={{ name: 'test' }} />
      <Component {...pageProps} />
    </div>
  )
}

export default MyApp

error.md

cashstudio on  main [!] via ⬢ v14.12.0 using·☁️ ·personaleast1 
➜ yarn codelift dev
yarn run v1.22.4
$ /Users/dhagen/Projects/cashstudio/node_modules/.bin/codelift dev
internal/modules/cjs/loader.js:896
  throw err;
  ^

Error: Cannot find module '/Users/dhagen/Projects/cashstudio/node_modules/codelift/.next/serverless/pages-manifest.json'
Require stack:
- /Users/dhagen/Projects/cashstudio/node_modules/codelift/node_modules/next/dist/next-server/server/next-server.js
- /Users/dhagen/Projects/cashstudio/node_modules/codelift/node_modules/next/dist/server/next.js
- /Users/dhagen/Projects/cashstudio/node_modules/codelift/server.js
- /Users/dhagen/Projects/cashstudio/node_modules/codelift/bin/codelift.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:893:15)
    at Function.Module._load (internal/modules/cjs/loader.js:743:27)
    at Module.require (internal/modules/cjs/loader.js:965:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at new Server (/Users/dhagen/Projects/cashstudio/node_modules/codelift/node_modules/next/dist/next-server/server/next-server.js:6:310)
    at createServer (/Users/dhagen/Projects/cashstudio/node_modules/codelift/node_modules/next/dist/server/next.js:2:638)
    at Object.<anonymous> (/Users/dhagen/Projects/cashstudio/node_modules/codelift/server.js:18:13)
    at Module._compile (internal/modules/cjs/loader.js:1076:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:941:32) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/dhagen/Projects/cashstudio/node_modules/codelift/node_modules/next/dist/next-server/server/next-server.js',
    '/Users/dhagen/Projects/cashstudio/node_modules/codelift/node_modules/next/dist/server/next.js',
    '/Users/dhagen/Projects/cashstudio/node_modules/codelift/server.js',
    '/Users/dhagen/Projects/cashstudio/node_modules/codelift/bin/codelift.js'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

next.config.js

module.exports = { target: 'serverless' }

package.json

{
  "name": "cashstudio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "yarn next:dev",
    "next:dev": "next dev",
    "build": "next build",
    "build:tailwind": "postcss src/scss/base.scss -o src/scss/tailwind.scss",
    "start": "next start",
    "deploy": "npx serverless",
    "storybook": "start-storybook -s ./public -p 6006 --ci",
    "build-storybook": "build-storybook"
  },
  "gitHooks": {
    "post-merge": "yarn && amplify pull"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^0.2.23",
    "@storybook/preset-typescript": "^3.0.0",
    "@types/logrocket-react": "^3.0.0",
    "aws-amplify": "^3.3.3",
    "emotion": "^10.0.27",
    "fork-ts-checker-webpack-plugin": "^5.2.0",
    "logrocket": "^1.0.13",
    "logrocket-react": "^4.0.1",
    "next": "9.5.4",
    "next-pwa": "^3.1.5",
    "prop-types": "^15.7.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "ts-bus": "^2.3.1",
    "ts-loader": "^8.0.4"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/helper-compilation-targets": "^7.10.4",
    "@babel/plugin-syntax-async-generators": "^7.8.4",
    "@babel/plugin-syntax-json-strings": "^7.8.3",
    "@storybook/addon-a11y": "^6.0.26",
    "@storybook/addon-actions": "^6.0.26",
    "@storybook/addon-essentials": "^6.0.26",
    "@storybook/addon-links": "^6.0.26",
    "@storybook/preset-create-react-app": "^3.1.4",
    "@storybook/react": "^6.0.26",
    "@types/node": "^14.11.3",
    "@types/prop-types": "^15.7.3",
    "@types/react": "^16.9.51",
    "@typescript-eslint/eslint-plugin": "^4.4.0",
    "@typescript-eslint/parser": "^4.4.0",
    "autoprefixer": "^9.8.6",
    "babel-loader": "^8.1.0",
    "babel-preset-react-app": "^9.1.2",
    "codelift": "^1.0.13",
    "eslint": "^7.10.0",
    "eslint-config-prettier": "^6.12.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.3",
    "eslint-plugin-react-hooks": "^4.1.2",
    "postcss-cli": "^8.0.0",
    "postcss-preset-env": "^6.7.0",
    "prettier": "^2.1.2",
    "react-is": "^16.13.1",
    "serverless": "^2.4.0",
    "storybook-addon-next-router": "^2.0.0",
    "tailwindcss": "^1.8.11",
    "tsconfig-paths-webpack-plugin": "^3.3.0",
    "typescript": "^4.0.3",
    "yorkie": "^2.0.0"
  }
}