Next + Native-Base error

[gern132]

Hello there! We are trying to use this monorepo to have a project with RN for mobile part and Next.js + NativeBase for the web. The issue that after we installed NativeBase in monorepo we got an errors and we think that the problem is lying somewhere in monorepo setup. BTW RN + NativeBase in monorepo works fine. To understand the issue we also tryed to run a new project (outside monorepo) with Next+NativeBase setup and thats works fine! Could you please give us a hint how to solve that issue, will be really appreciate for this

Error looks like:

This is our next config, with integrated config from NativeBase docs (https://docs.nativebase.io/install-next)

const withImages = require("next-images");

const withFonts = require("next-fonts");
const withTM = require("next-transpile-modules")([
  "react-native-web",
  "native-base",
]);
const { withExpo } = require("@expo/next-adapter");

module.exports = withTM(
  withExpo(
    withImages(
      withFonts({
        typescript: {
          ignoreBuildErrors: true,
        },
        experimental: {
          externalDir: true,
        },

        images: {
          disableStaticImages: true,
        },
        webpack: (config, options) => {
          config.module.rules.push({
            test: /\.mobile.(ts|tsx)$/,
            loader: "ignore-loader",
          });

          if (options.isServer) {
            config.externals = [
              "react",
              "react-native-web",
              ...config.externals,
            ];
          }
          config.resolve.alias["react"] = path.resolve(
            __dirname,
            ".",
            "node_modules",
            "react"
          );
          config.resolve.alias["react-dom"] = path.resolve(
            __dirname,
            ".",
            "node_modules",
            "react-dom"
          );
          config.resolve.alias["react-native-web"] = path.resolve(
            __dirname,
            ".",
            "node_modules",
            "react-native-web"
          );

          return config;
        },
      })
    )
  )
);

### INFORMATION

1. We try to use 11.x.x and 12.0.4 next versions (Because of expo webpack5 support we tryed a different next versions)
2. To integrate NativeBase we create a new directory(inside monorepo) and install NextJS with NativeBase (https://docs.nativebase.io/install-next) from scratch - not work
3. Also tryed to install NativeBase into existing NextJS project - got the same errors as for step 2

[flexbox]

Hey @gern132

I have in the same situation as you: trying to add Native Base to the stack

My error is

Failed to compile
../app/node_modules/@react-aria/live-announcer/dist/main.js:2:0
Module not found: Can't resolve 'react-dom'

Import trace for requested module:
./../app/node_modules/@react-aria/combobox/dist/main.js

Apparently, it was fixed on the version 3.2.2
GeekyAnts/NativeBase#4011

I have a feeling your error is not related to this repo
Can you confirm your native-base version?

Or it's related to your next.config.js config? I successfully integrated react-native-paper on another project. I will keep you updated if I make progress 🚀

[flexbox]

I ran

yarn upgrade-interactive --latest

to bump nextjs
if you want to have a look here is the diff flexbox/react-native-universal-monorepo@5af0162

I have an another error

./node_modules/react-native-web/dist/cjs/modules/useResponderEvents/ResponderTouchHistoryStore.js
TypeError: Property id of VariableDeclarator expected node to be of a type ["LVal"] but instead got "StringLiteral"

[flexbox]

I made some progress

Nextjs builds! flexbox/react-native-universal-monorepo@d6f161f

But I still have an issue with react-dom when I try to use a Native Base component like a <Button>

error - ../app/node_modules/@react-aria/live-announcer/dist/module.js:2:0
Module not found: Can't resolve 'react-dom'

Import trace for requested module:
../app/node_modules/@react-aria/combobox/dist/module.js
../app/node_modules/@react-native-aria/combobox/lib/module/useComboBox.web.js
../app/node_modules/@react-native-aria/combobox/lib/module/index.web.js

[flexbox]

I added @native-base/next-adapter

But now I have another error

./node_modules/react-native-web/dist/modules/useResponderEvents/ResponderTouchHistoryStore.js
TypeError: Property id of VariableDeclarator expected node to be of a type ["LVal"] but instead got "StringLiteral"

[flexbox]

I tried to use @expo/next-adapter

but I have more or less the same build issues

[flexbox]

After a month of exploring this configuration:

• Native Base for the UI
  • React Native
  • Next.js

I am migrating to Nx https://github.com/flexbox/react-native-nx-monorepo because It will cover my needs in terms of CI.

The NativeBase problem is related to the webpack config of Next.js and NativeBase.
It's not related to this repo.

@gern132
Can you please close the issue?
It sparks joy for maintainers ✨