Issue with next.js / expo

🐛 Bug Report

Environment

Expo CLI 3.19.2 environment info: System: OS: macOS 10.15.4 Shell: 5.7.1 - /bin/zsh Binaries: Node: 10.18.1 - ~/.nvm/versions/node/v10.18.1/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.13.4 - ~/.nvm/versions/node/v10.18.1/bin/npm IDEs: Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild npmPackages: react: ^16.13.1 => 16.13.1 react-native: ^0.62.2 => 0.62.2 npmGlobalPackages: expo-cli: 3.19.2

Steps to Reproduce

Steps to reproduce the behavior: My package.json has:

  "dependencies": {
    "@aws-amplify/ui-react": "^0.2.4",
    "@eva-design/eva": "^1.4.0",
    "@ui-kitten/components": "^4.4.1",
    "@ui-kitten/eva-icons": "^4.4.1",
    "aws-amplify": "^3.0.9",
    "expo-font": "^8.1.1",
    "next": "9.3.6",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-native": "^0.62.2",
    "react-native-svg": "~9.13.3",
    "react-native-web": "^0.12.2"
  },
  "devDependencies": {
    "@expo/next-adapter": "^2.1.2",
    "babel-preset-expo": "^8.1.0",
    "next-transpile-modules": "^3.2.0"
  }

My pages/_app.tsx has:

import App from 'next/app'
import * as eva from '@eva-design/eva';
import { ApplicationProvider } from '@ui-kitten/components';

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return <ApplicationProvider {...eva} theme={eva.light}><Component {...pageProps} /></ApplicationProvider>
  }
}

export default MyApp

Expected Behavior

Actual Behavior

I expect it to work, instead I get an error:

node_modules/react-native/index.js:13
import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
       ^^^^^^

SyntaxError: Unexpected token typeof
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)

Reproducible Demo

[byCedric]

Ok, I think I got it. To summarize, UI Kitten’s code that you use from the package is not fully transpiled. It imports some parts of react-native which contains flow-flavored-js. It’s probably because they expect the Metro bundler to transpile it for you, which makes a lot of sense. Unfortunately for us, NextJS doesn’t have this Metro bundler and therefore we need to do some babel/config magic 😄

I looked at the source code on how babel is constructed and how we can modify the included transpiled folders. Eventually I could make the basics happen, I haven’t tested it fully yet. You can try this out by copying this code in next.config.js:

const { withExpo } = require('@expo/next-adapter');
const { withUnimodules } = require('@expo/webpack-config/addons');
const withImages = require('next-images');

const customExpoConfig = {
  ...withExpo(),
  webpack(nextConfig, options) {
    const babel = {
      dangerouslyAddModulePathsToTranspile: [
        '@ui-kitten',
      ],
    };

    const expoConfig = withUnimodules(
      nextConfig,
      { projectRoot: __dirname, babel },
      { supportsFontLoading: false },
    );

    if (expoConfig.output && nextConfig.output) {
      expoConfig.output.publicPath = nextConfig.output.publicPath;
    }

    if (typeof nextConfig.webpack === 'function') {
      return nextConfig.webpack(expoConfig, options);
    }

    return expoConfig;
  }
};

module.exports = withImages(
  customExpoConfig,
);

This code is based on @expo/next-adapter, but babel.dangerouslyAddModulePathsToTranspile is added here. This array contains the names of all modules that should be transpiled by babel, which may cause other unexpected side effects.

I also had to remove the module:react-native preset from babel. Do you need this preset somewhere for your project? If so, I would definitely be interested in why 😄

Hope it helps!

[byCedric]

Thanks! I see you were referred to us from https://github.com/akveo/react-native-ui-kitten/issues/1058 😄 So, there is something going on with the transformer. I’ll try to dig a bit deeper, but I won’t promise anything. What happens is that React Native is imported from UI-kitten, but instead of plain JS the flow JS is imported which confuses NextJS. So this is basically a compatibility issue with NextJS and UI Kitten. I’ve seen your Stack Overflow and Reddit posts as well, so let’s try to figure something out 😄