Next.js is not supported !

[boussaidev]

Description

Next.js is not supported getting a lot of errors when using ui with latest nextjs project

CodeSandbox/Snack link

https://codesandbox.com/

Steps to reproduce

next js is not supported !
Next.js is not supported
getting a lot of errors when using ui with latest nextjs project

gluestack-ui Version

latest

Platform

• Expo
• React Native CLI
• Next
• Web
• Android
• iOS

Other Platform

No response

Additional Information

No response

[Under-Warz]

@boussaidev add this to your next.config.ts

You have to configure react-native-web to alias all react-native import with react-native-web

import { withGluestackUI } from "@gluestack/ui-next-adapter";
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
	transpilePackages: [
		"react-native-reanimated",
		"nativewind",
		"react-native-css-interop",
		"@gluestack-ui/nativewind-utils",
		"@gluestack-ui/icon",
		"@gluestack-ui/button",
		"@gluestack-ui/utils",
		"@gluestack-ui/toast",
		"@gluestack-ui/overlay",
	],
	experimental: {
		turbo: {
			resolveAlias: {
				"react-native": "react-native-web",
			},
			resolveExtensions: [
				".web.js",
				".web.jsx",
				".web.ts",
				".web.tsx",
				".mdx",
				".tsx",
				".ts",
				".jsx",
				".js",
				".mjs",
				".json",
			],
		},
	},
	webpack: (config) => {
		config.resolve.alias = {
			...(config.resolve.alias || {}),
			// Transform all direct `react-native` imports to `react-native-web`
			"react-native$": "react-native-web",
		};
		config.resolve.extensions = [
			".web.js",
			".web.jsx",
			".web.ts",
			".web.tsx",
			...config.resolve.extensions,
		];
		return config;
	},
};

export default withGluestackUI(nextConfig);

[Jao8]

@Under-Warz It almost solved things for me, still getting

 ⨯ ./node_modules/react-native-safe-area-context/lib/module/specs/NativeSafeAreaProvider.js:1:1
Module not found: Can't resolve 'react-native/Libraries/Utilities/codegenNativeComponent'
> 1 | import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  2 | export default codegenNativeComponent('RNCSafeAreaProvider');
  3 | //# sourceMappingURL=NativeSafeAreaProvider.js.map



https://nextjs.org/docs/messages/module-not-found



./node_modules/react-native-safe-area-context/lib/module/specs/NativeSafeAreaView.js:1:1
Module not found: Can't resolve 'react-native/Libraries/Utilities/codegenNativeComponent'
> 1 | import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  2 | export default codegenNativeComponent('RNCSafeAreaView', {
  3 |   interfaceOnly: true
  4 | });

any tips about that?

[alex-reusables]

@Under-Warz where is this documented? how did you arrive at this next-config? I cloned a Gluestack starter project (dashboard) and I have a similar but different next.config included in the project, but similarly there are an incredible amount of components that break the dev server as soon as I import them... This is the config from the dashboard starter project:

/** @type {import('next').NextConfig} */
const { DefinePlugin } = require("webpack");

module.exports = {
  reactStrictMode: true,
  transpilePackages: [
    "@gluestack-ui/nativewind-utils",
    "nativewind",
    "react-native-css-interop",
  ],
  webpack: (config) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      "react-native$": "react-native-web",
    };
    config.resolve.alias["@unitools/router"] = "@unitools/router-next";
    config.resolve.alias["@unitools/image"] = "@unitools/image-next";
    config.resolve.alias["@unitools/link"] = "@unitools/link-next";
    config.resolve.extensions = [
      ".web.js",
      ".web.jsx",
      ".web.ts",
      ".web.tsx",
      ...config.resolve.extensions,
    ];

    config.plugins.push(
      new DefinePlugin({
        __DEV__: JSON.stringify(process.env.NODE_ENV !== "production"),
      })
    );

    return config;
  },
  typescript: { ignoreBuildErrors: true }
};

[akash3gtm]

can you let us know, which components break the app?

[akash3gtm]

Issue found, this is being worked on currently.
This will be fixed soon and updated here.

[alex-reusables]

@akash3gtm drawer, select, tooltip are 3 I have tried that I quickly stopped using. Tooltip I eventually got to compile but the behaviour on screen is very odd, either it doesn't render or it flickers, I left a little video in Discord. It sounds like you have some leads on what's broken, I will watch this issue and if you want me to specifically recreate some errors and provide logs let me know.