next config

next.config.js

const withPlugins = require('next-compose-plugins') 

const getTranspiledPackages = () => {
  const path = require('path')
  const fs = require('fs')

  const node_modules = path.resolve(__dirname, '../..', 'node_modules')

  const monorepoScope = '@beatgig'

  const scopes = [monorepoScope, '@nandorojo', '@dripsy', '@tamagui']

  const blacklist = new Set([
    '@beatgig/test-types',
    '@nandorojo/react-native-safe-area-context',
  ])

  const scopedPackages = []

  fs.readdirSync(node_modules)
    .forEach((scope) => {
      if (scope.startsWith('expo-') || scope.startsWith('react-native')) {
        scopedPackages.push(scope)
      }
      
      if (!scopes.includes(scope)) return

      fs.readdirSync(path.resolve(node_modules, scope))
        .filter((name) => !name.startsWith('.'))
        .forEach((folderName) => {
          const { name, ignoreTranspileModules } = require(path.resolve(
            node_modules,
            scope,
            folderName,
            'package.json'
          ))
          if (!ignoreTranspileModules && !blacklist.has(name)) {
            scopedPackages.push(name)
          }
        })
    })
  Array.from(
    new Set([
      'dripsy',
      ...scopedPackages,
      'tamagui',
      'moti',
      'react-doorman',
      'react-native-doorman',
      'react-adaptive-hooks',
      'react-native-autolink',
      'autolinker',
      '@popperjs/core',
      'react-native-popper',
      'dom-helpers',
      'solito',
      'zeego',
      '@miblanchard/react-native-slider',
      'expo-auth-session',
      'expo-constants',
      'expo-font',
      'expo-linking',
      'expo-web-browser',
      'react-native-gesture-handler',
      'expo-modules-core',
      'expo-blur',
      'react-native-keyboard-aware-scroll-view',
      'expo',
      'react-native-picker-select',
      'react-native-reanimated',
      '@expo/vector-icons',
      '@react-native/assets',
      '@react-navigation/native',
      'expo-next-react-navigation',
      '@expo/html-elements',
      // 'react-native-web',
      'react-native',
      '@sentry/react-native',
      'expo-navigation-core',
      'react-native',
      'expo-notifications',
      'expo-application',
      '@expo/react-native-action-sheet',
      'expo-updates',
      'react-native-web-hooks',
    ])
  )
}

const transpilePackages = getTranspiledPackages()

const APP_ENV = process.env.APP_ENV || 'release'

require('dotenv').config({
  path: `../../.env.${APP_ENV}`,
})

const env = {
  TAMAGUI_TARGET: 'web',
}

Object.keys(process.env).forEach((key) => {
  if (key.startsWith('NEXT_PUBLIC_') || key == 'EXPO_APP_SCHEME') {
    env[key] = process.env[key]
  }
}) 

/**
 * @type {import ('next').NextConfig}
 */
const nextConfig = {
  images: {
    disableStaticImages: true,
    deviceSizes: [300, 576, 768, 992, 1200, 1920, 2048, 3000],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    domains: ['res.cloudinary.com/dn29xlaeh/upload/'],
  },

  experimental: {
    optimizeCss: false,
    legacyBrowsers: false,
    scrollRestoration: true,
    forceSwcTransforms: true,
    swcPlugins: [
      ['@nissy-dev/swc-plugin-react-native-web', { commonjs: true }],
      // [require.resolve('./swc.wasm')], // reanimated not working...
    ],
    swcMinify: false,

    esmExternals: true,
    plugins: true,
  },
  webpack5: true,
  reactStrictMode: false,
  typescript: {
    ignoreBuildErrors:
      process.env.IGNORE_TYPES == '1' ||
      process.env.VERCEL_GIT_COMMIT_REF?.startsWith('gql'),
  },
  webpack(config) {
    config.resolve = config.resolve || {}
    config.resolve.alias = config.resolve.alias || {}
    // fix expo/html-elements?
    config.resolve.alias['react-native-web/dist/exports$'] =
      'react-native-web/dist/cjs/exports'

    config.resolve.alias['react-native-web/dist/modules$'] =
      'react-native-web/dist/cjs/modules'

    return config
  },
  sentry: {
    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#extend-nextjs-configuration
    // See the 'Configure Source Maps' and 'Configure Legacy Browser Support'
    // sections below for information on the following options:
    //   - disableServerWebpackPlugin
    //   - disableClientWebpackPlugin
    //   - autoInstrumentServerFunctions
    // hideSourceMaps: true maybe set this in the future to hide them?
    //   - widenClientFileUpload

    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#configure-legacy-browser-support
    transpileClientSDK: true,
    hideSourceMaps: false,
  },
  env,
}

/**
 *
 * @param {string} dirname
 * @returns {object} next config
 */
module.exports = withPlugins(
  [
    require('@next/bundle-analyzer')({
      enabled: process.env.ANALYZE === 'true',
    }),
    require('next-fonts'),
    require('next-images'),
    require('next-transpile-modules')(transpilePackages, {
      resolveSymlinks: true,
    }),
    require('@tamagui/next-plugin').withTamagui({
      components: ['tamagui'],
      config: '../../tickets/ds/tamagui/tamagui.config.ts',
      useReactNativeWebLite: true,
    }),
  ],
  nextConfig
)