1.13 - 1.14 : @remix-run/server-runtime EntryContext is not assignable to type @remix-run/react EntryContext 🔴

[raskyer]

What version of Remix are you using?

1.13.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

Install remix server template.

Typescript version : 4.9.5

Expected Behavior

RemixServer doesn't complain with remixContext

Actual Behavior

Type error with remix context.

[alexhoo]

Same happened to me after upgrading to 1.14

[hjonasson]

Same does not repro for me with 1.14 when I write

import { RemixServer } from "@remix-run/react";
import type { EntryContext } from "@remix-run/node";

let context: EntryContext;
export const SomeServer = () => <RemixServer url='some-url' context={context} />;

What is the error you are getting @raskyer ?

[alexhoo]

I should add that this happend to me since I upgraded from 1.11

[raskyer]

Same does not repro for me with 1.14 when I write

import { RemixServer } from "@remix-run/react";

import type { EntryContext } from "@remix-run/node";



let context: EntryContext;

export const SomeServer = () => <RemixServer url='some-url' context={context} />;

What is the error you are getting @raskyer ?

What do you mean ? You repro or not ?

I have the exact type error in screenshot I have posted.

Upgrading to 1.14 does not solve the issue.

I have remove my node_modules / package-lock but it doesn't solve the issue.

It's a typescript error, not node or runtime.

[alexhoo]

i have created a thread here: https://discord.com/channels/770287896669978684/1082941041306505217
My react version is: React 17.0.2 if this helps

[raskyer]

Type 'import("/node_modules/@remix-run/server-runtime/dist/entry").EntryContext' is not assignable to type 'import("/node_modules/@remix-run/react/dist/entry").EntryContext'.
  Types of property 'routeModules' are incompatible.
    Type 'RouteModules<EntryRouteModule>' is not assignable to type 'RouteModules'.
      'string' index signatures are incompatible.
        Type 'EntryRouteModule' is not assignable to type 'RouteModule'.
          Types of property 'CatchBoundary' are incompatible.
            Type 'import("/node_modules/@remix-run/server-runtime/dist/routeModules").CatchBoundaryComponent | undefined' is not assignable to type 'import("/node_modules/@remix-run/react/dist/routeModules").CatchBoundaryComponent | undefined'.
              Type 'ComponentClass<{}, any>' is not assignable to type 'CatchBoundaryComponent | undefined'.
                Type 'import("/node_modules/@remix-run/server-runtime/node_modules/@types/react/index").ComponentClass<{}, any>' is not assignable to type 'React.ComponentClass<{}, any>'.
                  Types of property 'contextType' are incompatible.
                    Type 'import("/node_modules/@remix-run/server-runtime/node_modules/@types/react/index").Context<any> | undefined' is not assignable to type 'React.Context<any> | undefined'.
                      Type 'import("/node_modules/@remix-run/server-runtime/node_modules/@types/react/index").Context<any>' is not assignable to type 'React.Context<any>'.
                        Types of property 'Provider' are incompatible.
                          Type 'import("/node_modules/@remix-run/server-runtime/node_modules/@types/react/index").Provider<any>' is not assignable to type 'React.Provider<any>'.
                            Types of parameters 'props' and 'props' are incompatible.
                              Type 'React.ProviderProps<any>' is not assignable to type 'import("/node_modules/@remix-run/server-runtime/node_modules/@types/react/index").ProviderProps<any>'.
                                Types of property 'children' are incompatible.
                                  Type 'React.ReactNode' is not assignable to type 'import("/node_modules/@remix-run/server-runtime/node_modules/@types/react/index").ReactNode'.
                                    Type '{}' is not assignable to type 'ReactNode'.ts(2322)

[alexhoo]

@raskyer it is the very same error as I have

[raskyer]

@alexhoo Yes Alex :) I think every one with new typescript / remix project will have it.
It was more for future reader / reviewer, to be able to quickly jump in.

[alexhoo]

what version of React are you using @raskyer ?

[raskyer]

17.0.2

[raskyer]

Ok, I think I found out why. @remix-run/server-runtime use @types/react version 18.0.15 but locally I have version 17.0.53.
It seems that when both version exists within the same project it generates some weird typescript error. Probably because it interfere with the global scope.

One fix is to update @types/react to stick to the version used by @remix-run/server-runtime.

[alexhoo]

have you tried?

[raskyer]

Now the question we should ask is :

Is it normal that @types/react from @remix-run/server-runtime is set to 18.0.15 and why it interfer with the @types/react a project could have. Especially because if we come from remix 1.11 the package @types/react is on 17.

Maybe @machour or @brophdawg11 have an idea ?

[MichaelDeBoey]

This was caused by my changes in #4801 & will be fixed once #5713 (or another solution) is merged

[brophdawg11]

This is fixed by #5713 and should be available in the next Remix release.

We ended up removing @types/react from @remix-run/server-runtime completely since the server is React-agnostic. This meant loosening the React-specific types exported from there (i.e., ErrorBoundaryComponent) to any and deprecating them in favor of their counterparts in @remix-run/react.

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-eb06147-20230614 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 1.17.1-pre.1 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[brophdawg11]

Hm, we must have a bug in our bot logic - this is not included in 1.17.1-pre.1 and should land in 1.18.0

https://github.com/remix-run/remix/compare/remix@1.17.0...remix@1.17.1-pre.1

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-ad9adee-20230615 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-12440f3-20230616 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 1.18.0-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 1.18.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[MakhouT]

How exactly should this be fixed?
I am still having the issue currently.
This is what I have in my package.json:

"@remix-run/css-bundle": "^2.6.0",
"@remix-run/node": "^2.6.0",
"@remix-run/react": "^2.6.0",
"@remix-run/serve": "^2.6.0",
...
"@remix-run/dev": "^2.6.0",
"@remix-run/testing": "^2.8.1",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",

[127]

Same error in 2.*

[brophdawg11]

Please open a new issue with a minimal reproduction and we can take a look

[127]

I've found the error by the way. It was not a remix issue in my exact case mixed with i18next usage.
The problem was at "remix-auth-apple": "^0.1.1",
Somehow it creates conflict at i18next.getRouteNamespaces(remixContext)
Removing this library fixed the issue

async function handleBrowserRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const instance = createInstance();
  const lng = await i18next.getLocale(request);
  const ns = i18next.getRouteNamespaces(remixContext);