Error: (0 , react__WEBPACK_IMPORTED_MODULE_3__.createContext) is not a function

Answered

English Angora posted this in #help-forum

English AngoraOP

2024-02-01T04:54:36.000Z

I'm trying to call a tRPC function. I am porting from Pages router to App router, and this has come up as an issue. I do not know if this is related to the conversion.

Call stack starts:

Server Error
Error: (0 , react__WEBPACK_IMPORTED_MODULE_3__.createContext) is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
eval
node_modules\@trpc\react-query\dist\createHooksInternal-bdff7171.mjs (86:48)
(rsc)/./node_modules/@trpc/react-query/dist/createHooksInternal-bdff7171.mjs
file:///C:/Users/rik/repos/project/.next/server/vendor-chunks/@trpc.js (310:1)
__webpack_require__
file:///C:/Users/rik/repos/project/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(rsc)/./node_modules/@trpc/react-query/dist/index.mjs (26:91)
(rsc)/./node_modules/@trpc/react-query/dist/index.mjs
file:///C:/Users/rik/repos/project/.next/server/vendor-chunks/@trpc.js (330:1)
__webpack_require__
file:///C:/Users/rik/repos/project/.next/server/webpack-runtime.js (33:42)

Is this a tRPC issue, or a Next issue? How do I tell?

Answered by Ray

commend out oldReceipt

View full answer

33 Replies

English AngoraOP

2024-02-01T18:15:28.000Z

This is not a tRPC issue. It's a "calling a component" issue, and I don't know why.

@English Angora This is not a tRPC issue. It's a "calling a component" issue, and I don't know why.

Ray

2024-02-01T18:30:27.000Z

look like the error is caused by using react context hook in server component

English AngoraOP

2024-02-01T18:39:24.000Z

thank you.

I am comically new to Javacsript, typesript and Next.

My src/app directory has a layout.tsx and page.tsx, as follows:
layout.tsx:

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

page.tsx:

import { unstable_noStore as noStore } from "next/cache";
import AnObject from "~/app/_components/objects";

export default function Home() {
    noStore();

    return (
    <main>
        <AnObject id={1} />
    </main>
    );
  }

the objects.tsx referred to is:

interface ObjectProps { id: number };
const AnObject = (props: ObjectProps) => {
    const data = {
        title: 'title',
        slug: 'slug',
        equipment: 'equipment',
        technique: 'technique'
    }
    return (
        <>
            <div>Title: {data.title}</div>
            <div>Slug: {data.slug}</div>
            {data.equipment && (<div>Equipment: {data.equipment}</div>)}
            <div>Technique: {data.technique}</div>
        </>
    );

}
export default AnObject;

It's the call to AnObject that seems to be causing it. I don't believe there's a contect hook there.

@English Angora My src/app directory has a layout.tsx and page.tsx, as follows: layout.tsx: typescript export const metadata = { title: 'Next.js', description: 'Generated by Next.js', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en"> <body>{children}</body> </html> ) } page.tsx: typescript import { unstable_noStore as noStore } from "next/cache"; import AnObject from "~/app/_components/objects"; export default function Home() { noStore(); return ( <main> <AnObject id={1} /> </main> ); } the objects.tsx referred to is: typescript interface ObjectProps { id: number }; const AnObject = (props: ObjectProps) => { const data = { title: 'title', slug: 'slug', equipment: 'equipment', technique: 'technique' } return ( <> <div>Title: {data.title}</div> <div>Slug: {data.slug}</div> {data.equipment && (<div>Equipment: {data.equipment}</div>)} <div>Technique: {data.technique}</div> </> ); } export default AnObject; It's the call to AnObject that seems to be causing it. I don't believe there's a contect hook there.

Ray

2024-02-01T18:47:22.000Z

yeah no problem with these code

is it all the code you have in the project?

English AngoraOP

2024-02-01T18:48:21.000Z

I have a pages/_app.tsx and a pages/_document.tsx that I got from the App Router examples.

I honestly don't understand what order these are processed in, and whether I've got some things out of order as a result.

@English Angora I have a pages/\_app.tsx and a pages/\_document.tsx that I got from the App Router examples.

Ray

2024-02-01T18:49:14.000Z

if you are using app router, you don't need these

could you show a screenshot of your folder structure

English AngoraOP

2024-02-01T18:50:07.000Z

Yep. to be clear, this was generated by Create-T3-App.

You'll note that I've been renaming things for a small amount of privacy. I think I've given up caring about that, now.

Ray

2024-02-01T18:53:01.000Z

so the code here is exactly same as the file right?

English AngoraOP

2024-02-01T18:53:52.000Z

Let's be certain by doing it again without the anonymizing.

Ray

2024-02-01T18:54:38.000Z

how does layout.tsx look like?

@English Angora Yep. to be clear, this was generated by Create-T3-App.

Ray

2024-02-01T18:54:57.000Z

did you choose to use app router when you init the project?

English AngoraOP

2024-02-01T18:55:00.000Z

Yes, I chose to use app router.

@English Angora Click to see attachment

Ray

2024-02-01T18:55:28.000Z

commend out oldReceipt

Answer

Ray

2024-02-01T18:55:51.000Z

the problem is caused by api.recipes.getById.useQuery

English AngoraOP

2024-02-01T18:56:00.000Z

you're right.

that fixed it.

Ray

2024-02-01T18:56:25.000Z

you should import api from trpc/server

and get the data with api.receipes.getById.query()

English AngoraOP

2024-02-01T18:57:23.000Z

why did commenting out code that wasn't used cause this issue?

Ray

2024-02-01T18:59:10.000Z

because you actually import the function and use it to define a oldReceipt

you didn't use the code but the compiler still bundle the code

English AngoraOP

2024-02-01T18:59:45.000Z

that makes sense.

Thank you. I am successfully pulling data from the database now.

@English Angora Thank you. I am successfully pulling data from the database now.

Ray

2024-02-01T19:01:53.000Z

nice, no prob

English AngoraOP

2024-02-01T19:02:27.000Z

Now I have to figure out how I actually want to store data, now that I've figured out how to retrieve from the database.

@English Angora Now I have to figure out how I *actually* want to store data, now that I've figured out how to retrieve from the database.

Ray

2024-02-01T19:03:17.000Z

use server action with api.receipes.[mutation-name].mutate()