Error with React Context Creation in @radix-ui/react-dismissable-layer

[thewbuk]

I'm encountering a runtime error in my Next.js application involving the @radix-ui/react-dismissable-layer package. The application fails with the following error message:

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

Code :

                        <Dialog>
                          <DialogTrigger asChild>
                            <Button size="sm" className="relative" disabled>
                              Add channel
                            </Button>
                          </DialogTrigger>
                          <DialogContent>
                            <DialogHeader>
                              <DialogTitle>Add Podcast</DialogTitle>
                              <DialogDescription>
                                Copy and paste the podcast feed URL to import.
                              </DialogDescription>
                            </DialogHeader>
                            <div className="grid gap-4 py-4">
                              <div className="grid gap-2">
                                <Label>Podcast URL</Label>
                                <Input
                                  id="url"
                                  placeholder="https://example.com/feed.xml"
                                />
                              </div>
                            </div>
                            <DialogFooter>
                              <Button>Import Podcast</Button>
                            </DialogFooter>
                          </DialogContent>
                        </Dialog>

Full error message:

Server Error

Error: (0 , react__WEBPACK_IMPORTED_MODULE_1__.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\@radix-ui\react-dismissable-layer\dist\index.mjs (23:89)
(rsc)/./node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs

"@radix-ui/react-dismissable-layer": "^1.0.5",

[thewbuk]

After some investigating i discovered that this is due to inconsistent imports and some packages auto imported from @radix-ui/react-dialog instead of @/components/ui/...

Not working:

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from '@radix-ui/react-dialog';
import { DialogFooter, DialogHeader } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from 'recharts';

Working:

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

Ideally, it should not matter, so I'll leave the issue open to have a discussion if this is feasible to implement. But I'll agree more of a user error on this one

[pratik2e]

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

getting same error but for @/components/ui/accordion"

[rajput-hemant]

@thewbuk

The reason for the error is that the Radix primitives for the dialog component utilize hooks but lack the necessary use-client directives at the top of the file. Consequently, when using the dialog in server components, this results in the mentioned error.

However, if you are implementing the dialog in a client component, it should work seamlessly. It's worth noting that for consistent styling, it is advisable to opt for shadcn/ui components instead of Radix primitives.

[F-PTS]

Try adding "use client" to the top of each shadcn component file.

[indigoscipio]

Try adding "use client" to the top of each shadcn component file.

thanks mate it work

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.