Uncaught TypeError: Cannot assign to read only property '__esModule' of object '#<Object>'

[patrickedqvist]

Hello Radix,

First of all thanks for this fantastic icon set.

I've set up a new Next.js 13 project along with the new app directory but whenever I try to import one Icon from the installed npm package I get the following error

error - TypeError: Cannot assign to read only property '__esModule' of object '#<Object>'
     at eval (webpack-internal:///(sc_server)/./node_modules/@radix-ui/react-icons/index.js:3:27)
     at Object.(sc_server)/./node_modules/@radix-ui/react-icons/index.js ([REDACTED])
     at __webpack_require__ ([REDACTED]/.next/server/webpack-runtime.js:33:42)
     at eval (webpack-internal:///(sc_server)/./components/ui/Icons/Icons.tsx:5:79)
     at Object.(sc_server)/./components/ui/Icons/Icons.tsx ([REDACTED]/.next/server/app/(auth)/login/page.js:708:1)
     at __webpack_require__ ([REDACTED]/.next/server/webpack-runtime.js:33:42)
     at eval (webpack-internal:///(sc_server)/./components/ui/Icons/index.tsx:5:64)
     at Object.(sc_server)/./components/ui/Icons/index.tsx ([REDACTED]/.next/server/app/(auth)/login/page.js:719:1)
     at __webpack_require__ ([REDACTED]/.next/server/webpack-runtime.js:33:42)
     at eval (webpack-internal:///(sc_server)/./app/(auth)/login/page.tsx:8:78) {
   type: 'TypeError',
   page: '/login'
}

Here is the small utility component that is referred to as thecomponents/ui/Icons/Icons.tsx

import {
    ExclamationTriangleIcon,
    Cross1Icon,
    UpdateIcon,
    ChevronLeftIcon,
    ChevronRightIcon,
    TrashIcon,
    FileIcon,
    FileTextIcon,
    ImageIcon,
    GearIcon,
    DotsVerticalIcon,
    PlusIcon,
    PersonIcon,
    ArrowRightIcon,
    QuestionMarkCircledIcon,
    GitHubLogoIcon,
    TwitterLogoIcon,
    CheckIcon
} from '@radix-ui/react-icons';
import type {IconProps} from '@radix-ui/react-icons/dist/types';

import Logo from '@/components/ui/Logo'

export type Icon = IconProps

const Icons = {
    logo: Logo,
    close: Cross1Icon,
    spinner: UpdateIcon,
    chevronLeft: ChevronLeftIcon,
    chevronRight: ChevronRightIcon,
    trash: TrashIcon,
    post: FileTextIcon,
    page: FileIcon,
    media: ImageIcon,
    settings: GearIcon,
    ellipsis: DotsVerticalIcon,
    add: PlusIcon,
    warning: ExclamationTriangleIcon,
    user: PersonIcon,
    arrowRight: ArrowRightIcon,
    help: QuestionMarkCircledIcon,
    gitHub: GitHubLogoIcon,
    twitter: TwitterLogoIcon,
    check: CheckIcon,
}

export default Icons;

[sannajammeh]

Getting the same error. This is due to line 2 in index.js of the package:

module.exports = require('./dist/index.js');
module.exports.__esModule = true;

145 will fix this.

[jamesvclements]

Is there a workaround to use in the meantime?

[meluiz]

Is there a workaround to use in the meantime?

"Well... I went into the @radix-ui/react-icons folder inside node_modules and commented out the line containing module.exports.__esModule = true;. It worked for me."

[t0rbik]

Is there a workaround to use in the meantime?

Just got the same error. Overcame it by 'use client' directive in the component which uses icon.

[vladmoroz]

Hey, sorry for the delay. Just released 1.2.0 with @shuding's fix, let me know if it works.

[t0rbik]

Confirm, this does work in 1.2.0