[WIP] Support Server Side Components / Next.js appDir.

At runtime check if React exports the createContext otherwise fallback to to the createServerContext.

Important Notes

The ThemeProvider will only provide context to other Server components - the values do not transfer boundaries

There is no check to see if the version of react supports the createServerContext.

The ThemeConsumer was removed as the serverContext do not support them.

In use the typeof React.createContext will result in a warning when run on a server side component - this warning can be ignored, but a better check should probably be made.

what is createServerContext this is the first i've heard of that API

Ps. the createServerContext should have a type in this react/next types, but I cannot get any of the methods described here to work to import the type: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/next.d.ts#L1

what is createServerContext this is the first i've heard of that API

Exactly the same as createContext, but for Server Side Components so it does exactly the same. It is a rather underutilized api, and poorly documented. It takes a name and default values as the parameters, and there is no consumer. Looking at the source code in react it looks like it is based on the same underlying api's

Hmm, need to stop for today but I am stuck here:

The above changes work when the tsx files from react-bootstrap are referenced directly (ie. import Container from "../../projectlocation/src/Container" however when using the built files from the esm folder import Container from ''../../projectlocation/lib/esm/Container" it fails with the following:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useContext')
    at useContext (...\react\cjs\react.development.js:1749:21)

Which is very similar to the original error

Progress, very important NOT to have the setting:

    serverComponentsExternalPackages : ["react-bootstrap"],

in the next.config.js as that would allow both createServerContext and createContext to be present at the same time, and it it not possible to determine whether the components are running as Server Components or Client components (this is not determined by whether the browser is available as Next.js will create client components server side and hydrate them client side.

If anyone is interested in testing the above, please do the following:

Change your version of react-bootstrap in package.json to :

"react-bootstrap": "github:zealofzebras/react-bootstrap.git#feature/appdir",

Then change the components import to this

import Row from "react-bootstrap/lib/cjs/Row";

Also, I have not been able to get this to work with npm install and npm run build, only pnpm install and pnpm run build (which is my preferred tooling) I have not spent a lot of time trying to figure out why it does not work. (I am assuming it is a github direct install issue)

Any progress on this afaik we still cannot officially use next 13, ssr and react bootstrap right?

Some elements worked, "Col", "Row", "Container", for instance. Others, "ListGroup" and "Navbar" still fail.

I will look more into this over the next few weeks as I will need this project on a SSR project.

@petero-dk any update on this?

To be clear folks all react bootstrap components are SSR compatible, but they are not the new react server components. Normal SSR still and continues to work