Parameter on `AppType` is used incorrectly #42846

zenflow · 2022-11-13T03:43:06Z

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

environment information

sandbox@sse-sandbox-xhvisb:/sandbox$ yarn next info
yarn run v1.22.19
$ /sandbox/node_modules/.bin/next info

    Operating System:
      Platform: linux
      Arch: x64
      Version: #58~20.04.1-Ubuntu SMP Tue Jun 14 11:29:12 UTC 2022
    Binaries:
      Node: 14.19.3
      npm: 6.14.17
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.0.3-canary.4
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "13.0.3-canary.4", newest: "13.0.3".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue
Done in 0.84s.

Note: warning at the end seems to be because I'm using next@canary (as instructed) but canary version is older than latest official release. My issue is present in either version.

Describe the Bug

Prop types defined by the parameter on AppType are incorrectly applied to MyApp's props.pageProps instead of MyApp's props.

Expected Behavior

Expected TS types to correctly reflect runtime types.

Link to reproduction

https://codesandbox.io/s/polished-tree-xhvisb?file=/pages/_app.tsx

To Reproduce

Open the link to reproduction
Observe code on left (with TS errors) and the produced page on right.

There's a TS error on line 13, complaining Property 'foo' does not exist on type 'AppPropsType<any, MyInitialProps>', even though props.foo does exist at runtime.

Also, there's no TS error on line 14, even though props.pageProps.foo does not exist at runtime.

The text was updated successfully, but these errors were encountered:

mrkldshv · 2022-11-14T08:51:24Z

Hey! I'd like to take this one.

balazsorban44 · 2022-11-14T08:51:41Z

There is a slight runtime difference between App.getInitialProps and any page's getStaticProps, getServerSideProps and getInitialProps behavior. The latter 3 will populate pageProps, while App.getInitialProps will not.

mrkldshv · 2022-11-14T21:16:37Z

Should we extend the type and allow to pass two generics - for props and pageProps? @balazsorban44

balazsorban44 · 2022-11-15T18:52:30Z

I don't don't think that's needed. pageProps should be a property of props.

DarkShadow20 · 2023-02-23T07:31:13Z

Hi Guys, is this issue fixed?
I want to get started with open source contributions so wanted to pick this task.

mkayander · 2023-03-01T23:13:18Z

@DarkShadow20 Hi. There's one draft PR and one open & ready, which is mine, but they don't get much attention/priority.

ghost · 2023-03-02T08:31:48Z

Hello everyone, it's my first contribution hope this will solve the issue.

Sandbox Link: https://codesandbox.io/p/sandbox/gifted-wilson-xwk17e?selection=%5B%7B%22endColumn%22%3A5%2C%22endLineNumber%22%3A15%2C%22startColumn%22%3A5%2C%22startLineNumber%22%3A15%7D%5D&file=%2Fpages%2F_app.tsx

I think the problem is in the AppType<MyInitialProps> typescript is misinterpreting it and assigning MyInitialProps as pageProps type that's why it's not giving an error at pageProps.foo.
And according to official docs I used AppProps instead of AppType.

hassan028 · 2023-06-19T07:24:21Z

I tried to solve the issue. Here is the output.

props.foo: bar
props.pageProps.foo: [object Object]

Here is the code link: https://codesandbox.io/s/upbeat-shtern-zzdhqm?file=/pages/_app.tsx

Ghastly2001 · 2024-01-12T09:23:24Z

Parameter on AppType is used incorrectly #42846

In the provided sandbox, you worked on addressing an issue related to the use of AppType. The issue was causing unexpected behavior in the props received by the MyApp component.

After my modifications, I observed the following output:

props.foo: undefined
props.pageProps.foo: bar

Here's the link of the sandbox: https://codesandbox.io/p/devbox/bitter-water-p25rr5?embed=1&file=%2Fpages%2F_app.tsx

RonakShishangia · 2024-02-11T12:18:52Z

For: #42846
Hi,
to fix this issue we need to add any type in function parameter, it will fix the issue.

const MyApp: AppType<MyInitialProps> = (props: any) => {
  return (
    <div>
      <props.Component {...props.pageProps} />
      <hr />
      <p>{`props.foo: ${props.foo}`}</p>
      <p>{`props.pageProps.foo: ${props.pageProps.foo}`}</p>
    </div>
  );
};

MyApp.getInitialProps = async (ctx: any) => {
  const props = await App.getInitialProps(ctx); // <--another separate issue
  return {
    ...props,
    foo: "bar" // TS complains MyApp type is wrong if this line is excluded
  };
};

zenflow · 2024-02-11T21:34:00Z

For: #42846 Hi, to fix this issue we need to add any type in function parameter, it will fix the issue.

@RonakShishangia Using any is not a solution. I want to use types. Using any just works around the problem by not using types.

james-han · 2024-07-02T09:29:16Z

#42846
Hi ,
to fix this issue we need to know about below image and code :

export type AppType<P = {}> = NextComponentType<AppContextType, P, AppPropsType<any, P>>;
export type AppInitialProps<PageProps = any> = { pageProps: PageProps; }; export type AppPropsType<Router extends NextRouter = NextRouter, PageProps = {}> = AppInitialProps<PageProps> & { Component: NextComponentType<NextPageContext, any, any>; router: Router; __N_SSG?: boolean; __N_SSP?: boolean; };

Therefore, MyInitialProps is the type of props.pageProps. If you want to use props.foo, the type of props needs to be extended. I hope this is helpful to you. Thank you.

james-han · 2024-07-02T14:31:26Z

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information
environment information
sandbox@sse-sandbox-xhvisb:/sandbox$ yarn next info
yarn run v1.22.19
$ /sandbox/node_modules/.bin/next info

    Operating System:
      Platform: linux
      Arch: x64
      Version: #58~20.04.1-Ubuntu SMP Tue Jun 14 11:29:12 UTC 2022
    Binaries:
      Node: 14.19.3
      npm: 6.14.17
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.0.3-canary.4
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "13.0.3-canary.4", newest: "13.0.3".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue
Done in 0.84s.
Note: warning at the end seems to be because I'm using next@canary (as instructed) but canary version is older than latest official release. My issue is present in either version.
Describe the Bug

Prop types defined by the parameter on AppType are incorrectly applied to MyApp's props.pageProps instead of MyApp's props.

Expected Behavior

Expected TS types to correctly reflect runtime types.

Link to reproduction

https://codesandbox.io/s/polished-tree-xhvisb?file=/pages/_app.tsx

To Reproduce

Open the link to reproduction

Observe code on left (with TS errors) and the produced page on right.

There's a TS error on line 13, complaining Property 'foo' does not exist on type 'AppPropsType<any, MyInitialProps>', even though props.foo does exist at runtime.

Also, there's no TS error on line 14, even though props.pageProps.foo does not exist at runtime.

you can see what I comment，thank you

zenflow added the bug Issue was opened via the bug report template. label Nov 13, 2022

balazsorban44 added good first issue Easy to fix issues, good for newcomers TypeScript Related to types with Next.js. and removed bug Issue was opened via the bug report template. labels Nov 14, 2022

mrkldshv mentioned this issue Nov 16, 2022

Fix AppType to include parameters correctly #42981

Closed

11 tasks

mkayander linked a pull request Dec 29, 2022 that will close this issue

fix(ts): Make App props type include 'pageProps' explicitly #44434

Open

3 tasks

syedddanishalinaqvi pushed a commit to syedddanishalinaqvi/next.js that referenced this issue May 7, 2023

Issue vercel#42846: Updated _app.tsx

c372690

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Parameter on `AppType` is used incorrectly #42846

Parameter on `AppType` is used incorrectly #42846

zenflow commented Nov 13, 2022 •

edited

Loading

mrkldshv commented Nov 14, 2022

balazsorban44 commented Nov 14, 2022

mrkldshv commented Nov 14, 2022

balazsorban44 commented Nov 15, 2022

DarkShadow20 commented Feb 23, 2023

mkayander commented Mar 1, 2023

ghost commented Mar 2, 2023

hassan028 commented Jun 19, 2023

Ghastly2001 commented Jan 12, 2024

RonakShishangia commented Feb 11, 2024 •

edited

Loading

zenflow commented Feb 11, 2024

james-han commented Jul 2, 2024

james-han commented Jul 2, 2024

Verify canary release

Provide environment information

Describe the Bug

Expected Behavior

Link to reproduction

To Reproduce

Parameter on AppType is used incorrectly #42846

Parameter on AppType is used incorrectly #42846

Comments

zenflow commented Nov 13, 2022 • edited Loading

Verify canary release

Provide environment information

Describe the Bug

Expected Behavior

Link to reproduction

To Reproduce

mrkldshv commented Nov 14, 2022

balazsorban44 commented Nov 14, 2022

mrkldshv commented Nov 14, 2022

balazsorban44 commented Nov 15, 2022

DarkShadow20 commented Feb 23, 2023

mkayander commented Mar 1, 2023

ghost commented Mar 2, 2023

hassan028 commented Jun 19, 2023

Ghastly2001 commented Jan 12, 2024

RonakShishangia commented Feb 11, 2024 • edited Loading

zenflow commented Feb 11, 2024

james-han commented Jul 2, 2024

james-han commented Jul 2, 2024

Verify canary release

Provide environment information

Describe the Bug

Expected Behavior

Link to reproduction

To Reproduce

Parameter on `AppType` is used incorrectly #42846

Parameter on `AppType` is used incorrectly #42846

zenflow commented Nov 13, 2022 •

edited

Loading

RonakShishangia commented Feb 11, 2024 •

edited

Loading