GeekyAnts / GeekyAnts/NativeBase
Support for Nextjs 12.2 and React 18.2
- Dominant language
- TypeScript
- Stars
- 20.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
Not really a bug, having issues adding Native base to an existing nextjs 12.2 app, the cli, examples and documentation seem to only refer to next 12.0 and react 17
### CodeSandbox/Snack link
NA
### Steps to reproduce
1. install new create-next-app with typescript using yarn
2. follow instructions in documentation on adding to existing project
3. run yarn dev
4. See error below
### NativeBase Version
latest
### Platform
- [ ] Android
- [ ] CRA
- [ ] Expo
- [ ] iOS
- [X] Next
### Other Platform
_No response_
### Additional Information
Wondering if React18 is supported in nativebase as yet,
error:
```
warn - Invalid next.config.js options detected:
[
{
"instancePath": "",
"schemaPath": "#/additionalProperties",
"keyword": "additionalProperties",
"params": {
"additionalProperty": "webpackDevMiddleware"
},
"message": "must NOT have additional properties"
},
{
"instancePath": "",
"schemaPath": "#/additionalProperties",
"keyword": "additionalProperties",
"params": {
"additionalProperty": "configOrigin"
},
"message": "must NOT have additional properties"
},
{
"instancePath": "",
"schemaPath": "#/additionalProperties",
"keyword": "additionalProperties",
"params": {
"additionalProperty": "target"
},
"message": "must NOT have additional properties"
},
{
"instancePath": "",
"schemaPath": "#/additionalProperties",
"keyword": "additionalProperties",
"params": {
"additionalProperty": "analyticsId"
},
"message": "must NOT have additional properties"
},
{
"instancePath": "",
"schemaPath": "#/additionalProperties",
"keyword": "additionalProperties",
"params": {
"additionalProperty": "webpack5"
},
"message": "must NOT have additional properties"
},
{
"instancePath": "",
"schemaPath": "#/additionalProperties",
"keyword": "additionalProperties",
"params": {
"additionalProperty": "projectRoot"
},
"message": "must NOT have additional properties"
},
{
"instancePath": "/amp/canonicalBase",
"schemaPath": "#/properties/amp/properties/canonicalBase/minLength",
"keyword": "minLength",
"params": {
"limit": 1
},
"message": "must NOT have fewer than 1 characters"
},
{
"instancePath": "/assetPrefix",
"schemaPath": "#/properties/assetPrefix/minLength",
"keyword": "minLength",
"params": {
"limit": 1
},
"message": "must NOT have fewer than 1 characters"
},
{
"instancePath": "/basePath",
"schemaPath": "#/properties/basePath/minLength",
"keyword": "minLength",
"params": {
"limit": 1
},
"message": "must NOT have fewer than 1 characters"
},
{
"instancePath": "/experimental/outputFileTracingRoot",
"schemaPath": "#/properties/experimental/properties/outputFileTracingRoot/minLength",
"keyword": "minLength",
"params": {
"limit": 1
},
"message": "must NOT have fewer than 1 characters"
},
{
"instancePath": "/generateEtags",
"schemaPath": "#/properties/generateEtags/isFunction",
"keyword": "isFunction",
"params": {},
"message": "must pass \"isFunction\" keyword validation"
},
{
"instancePath": "/i18n",
"schemaPath": "#/properties/i18n/type",
"keyword": "type",
"params": {
"type": "object"
},
"message": "must be object"
}
]
See more info here: https://nextjs.org/docs/messages/invalid-next-config
```
next.config.js
```
/** @type {import('next').NextConfig} */
const { withExpo } = require("@expo/next-adapter");
const withFonts = require("next-fonts");
const withPlugins = require("next-compose-plugins");
const withTM = require("next-transpile-modules")([
"react-native-web",
"react-native-svg",
"native-base",
]);
const nextConfig = {
reactStrictMode: true,
images: {
domains: [
"s3-eu-west-1.amazonaws.com",
"7834446d6472debd8aae-e02563a4b5a029234d332b60ea74b60c.ssl.cf3.rackcdn.com",
"picsum.photos",
],
},
};
module.exports = withPlugins(
[withTM, [withFonts, { projectRoot: __dirname }], [withExpo, { projectRoot: __dirname }]],
nextConfig
);
```
Contributor guide
Assessment
This issue has not been assessed yet.