Nativebase + Expo 48 + Solito + NextJS 13 - failing to load in web

[sunnychaganty]

Description

Nativebase components dont work with Next 13

CodeSandbox/Snack link

NA

Steps to reproduce

1. Create a sample Solito App (npx create-solito-app)
2. Install Nativebase
3. Components work for Expo 48
4. Components fail for Next 13
5. Tried to use npx create-next-app with the same Nativebase + Next 13 & getting this compilation error:

import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)

NativeBase Version

3.4.28

Platform

• [ ] Android
• [ ] CRA
• [ ] Expo
• [ ] iOS
• [X] Next

Other Platform

No response

Additional Information

No response

[sunnychaganty]

Anyone else facing this issue?

[ghost]

Already tried to configure the native base pckage in the root file

[bpouzet]

Here a solution for NextJS 13

package.json (partial)

{
  ...
  "dependencies": {
    "@expo/vector-icons": "^12.0.5",
    "@native-base/next-adapter": "^2.3.0",
    "app": "*",
    "next": "^13.2.4",
    "raf": "^3.4.1",
    "react-native-vector-icons": "^9.1.0",
    "vercel": "latest"
  },
  "devDependencies": {
    "@expo/next-adapter": "^5.0.2",
    "@types/node": "^18.0.0",
    "@types/react-native-vector-icons": "^6.4.13",
    "eslint": "^8.28.0",
    "eslint-config-next": "13.1.6",
    "typescript": "^4.9.5"
  }
}

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["@expo/next-adapter/babel"],
  };
};

next.config.js

/** @type {import('next').NextConfig} */

const { withExpo } = require("@expo/next-adapter");

const moduleExports = withExpo({
  reactStrictMode   : true ,
  swcMinify         : true ,
  transpilePackages: [
    'solito' ,
    "react-native",
    "expo",
    '@expo/vector-icons',
    'react-native-vector-icons',
    "@react-native-aria",
    "react-native-safe-area-context",
    "react-native-web",
    "react-native-svg",
    "native-base",
    "@native-base/next-adapter",
    //
    'app'
  ],
  experimental: {
    forceSwcTransforms: true,
    scrollRestoration : true ,
    legacyBrowsers    : false ,
  },
  // We already do linting on GH actions
  eslint     : {
    ignoreDuringBuilds : !!process.env.CI ,
  } ,
  typescript : {
    ignoreBuildErrors : true ,
  } ,
  images     : {
    disableStaticImages : true ,
  }
});

module.exports = moduleExports

and _document.tsx

export { default } from '@native-base/next-adapter/document'

[sunnychaganty]

@bpouzet solution worked for me, without having to add the _document.tsx as it was already generated by the create-solito-app Thanks much for all the help!

[sunnychaganty]

@bpouzet - another update that while the components work fine with your solution, seems like the Icons are not loading & throw the following error in Next, they work fine for Expo:

Note: I has the similar set up as you have shown (next.config / package.json / babel) & all the packages have been installed

error - ../../node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/AntDesign.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See 
https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Import trace for requested module:
../../node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/AntDesign.ttf
../../node_modules/@expo/vector-icons/build/AntDesign.js
../../node_modules/@expo/vector-icons/build/Icons.js
../../packages/app/features/home/screen.tsx
wait  - compiling...
error - ../../node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Feather.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See 
https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Import trace for requested module:
../../node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Feather.ttf
../../node_modules/@expo/vector-icons/build/Feather.js
../../node_modules/@expo/vector-icons/Feather.js
../../packages/app/features/home/screen.tsx
wait  - compiling /_error (client and server)...
error - ../../node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Feather.ttf

[studigen]

i have a same problem.

[studigen]

@sunnychaganty Did you solve the problem?