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",

Software	Name(s)	Version
Radix Package(s)	react-dismissable-layer
React	[email protected]
Browser	n/a	n/a
Assistive tech	n/a	n/a
Node	n/a	n/a
npm/yarn	n/a	n/a
Operating System	n/a	n/a

[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

[andrevenancio]

this is happening to me, and I'm not sure your comment helps. I have a ui library in turborepo and my nextjs app router app is importing that ui library. If page has an import to the package it fails. Yet the package works on a pages route app

[joaom00]

Are you export your components with use client?

[danieljohnmorris]

Are you export your components with use client?

THANK YOU! That solved it! 🖤

[lucasfelipedonascimento]

Você exporta seus componentes com use client?

Nossa, resolveu meu problema, valeu demais!!

[mhbdev]

Are you export your components with use client?

You are a life saver. but I have a question. I am sure I used "use client"; inside components with state (ones which have useContext or anything like that) but why should we use client again when we are trying to export that component?

[HanKienjd]

Are you export your components with use client?

Thank you, it work