search

jakezatecky / react-dual-listbox

A feature-rich dual listbox for React.
https://jakezatecky.github.io/react-dual-listbox/
MIT License
109 stars 58 forks source link

Component does not play nicely with Server Side Rendering (SSR) #259

Closed MariamKhojashvili closed 8 months ago

MariamKhojashvili commented 9 months ago

Describe the bug After updating the package to v6.0.0 I am seeing error below in the terminal and the app is crashing because of it.

error:

⨯ node_modules/react-dual-listbox/lib/index.js (2541:0) @ Array.<anonymous> ⨯ ReferenceError: Element is not defined at Array.<anonymous> (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:1896:95) at __webpack_require__ (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:3852:51) at Array.hasOwn (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:957:90) at __webpack_require__ (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:3852:51) at Array.<anonymous> (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:859:86) at __webpack_require__ (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:3852:51) at Array.<anonymous> (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:30:104) at __webpack_require__ (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:3852:51) at /Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:3903:92 at /Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:3905:11 at /Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:3907:16 at webpackUniversalModuleDefinition (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:10:85) at Object.<anonymous> (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:14:3) at instantiateModule (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:452:23) at getOrInstantiateModuleFromParent (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:502:12) at esmImport (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:110:20) at /Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/src_15f6da._.js:1392:153 at [project]/src/components/dual-lisbox/dual-listbox.tsx [ssr] (ecmascript) (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/src_15f6da._.js:1508:3) at instantiateModule (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:452:23) at getOrInstantiateModuleFromParent (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:502:12) at esmImport (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:110:20) at /Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/src_15f6da._.js:1745:152 at [project]/src/app/admin/back-tester/components/common-fields.tsx [ssr] (ecmascript) (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/src_15f6da._.js:1989:3) at instantiateModule (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:452:23) at getOrInstantiateModuleFromParent (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:502:12) at esmImport (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:110:20) at /Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/src_15f6da._.js:2000:169 at [project]/src/app/admin/back-tester/components/form.tsx [ssr] (ecmascript) (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/src_15f6da._.js:2341:3) at instantiateModule (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:452:23) at getOrInstantiateModuleFromParent (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:502:12) at esmImport (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:110:20) at /Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/src_15f6da._.js:3188:157 at [project]/src/app/admin/back-tester/page.tsx [ssr] (ecmascript) (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/src_15f6da._.js:3284:3) at instantiateModule (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:452:23) at getOrInstantiateModuleFromParent (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:502:12) at commonJsRequire (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:124:20)

Reproduction steps update to version 6.0.0

Expected behavior update without errors

jakezatecky commented 9 months ago

I was unable to reproduce this when installing the component for a new project.

Can you provide some additional details? Are you using ESM? What Node version are you using? Lastly, can you try generating a new project and importing the library to see if the error still occurs?

It looks like you are using NextJS. I was not able to verify with that framework during my brief check. When I get back to my machine later today, I will check if Next's default configuration is causing any issues.

On Thu, Dec 28, 2023, 1:36 AM MariamKhojashvili @.***> wrote:

Describe the bug After updating the package to v6.0.0 I am seeing error below in the terminal and the app is crashing because of it.

error:

⨯ node_modules/react-dual-listbox/lib/index.js (2541:0) @ Array. ⨯ ReferenceError: Element is not defined at Array. (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:1896:95) at webpack_require (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:3852:51) at Array.hasOwn (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:957:90) at webpack_require (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:3852:51) at Array. (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:859:86) at webpack_require (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:3852:51) at Array. (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:30:104) at webpack_require (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:3852:51) at /Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:3903:92 at /Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:3905:11 at /Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:3907:16 at webpackUniversalModuleDefinition (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:10:85) at Object. (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/node_modules_react-dual-listbox_lib_index_77fd12.js:14:3) at instantiateModule (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:452:23) at getOrInstantiateModuleFromParent (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]runtime.js:502:12) at esmImport (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]runtime.js:110:20) at /Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/src_15f6da..js:1392:153 at [project]/src/components/dual-lisbox/dual-listbox.tsx [ssr] (ecmascript) (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/src_15f6da..js:1508:3) at instantiateModule (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:452:23) at getOrInstantiateModuleFromParent (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]runtime.js:502:12) at esmImport (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]runtime.js:110:20) at /Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/src_15f6da..js:1745:152 at [project]/src/app/admin/back-tester/components/common-fields.tsx [ssr] (ecmascript) (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/src_15f6da..js:1989:3) at instantiateModule (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:452:23) at getOrInstantiateModuleFromParent (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]runtime.js:502:12) at esmImport (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]runtime.js:110:20) at /Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/src_15f6da..js:2000:169 at [project]/src/app/admin/back-tester/components/form.tsx [ssr] (ecmascript) (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/src_15f6da..js:2341:3) at instantiateModule (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:452:23) at getOrInstantiateModuleFromParent (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]runtime.js:502:12) at esmImport (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]runtime.js:110:20) at /Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/src_15f6da..js:3188:157 at [project]/src/app/admin/back-tester/page.tsx [ssr] (ecmascript) (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/src_15f6da..js:3284:3) at instantiateModule (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:452:23) at getOrInstantiateModuleFromParent (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:502:12) at commonJsRequire (/Users/mariamk/Desktop/front-admin-modern/.next/server/chunks/[turbopack]_runtime.js:124:20)

Reproduction steps update to version 6.0.0

Expected behavior update without errors

— Reply to this email directly, view it on GitHub https://github.com/jakezatecky/react-dual-listbox/issues/259, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAYP3T6NMSNR7GVESUK2HSLYLUOO3AVCNFSM6AAAAABBFGBJTKVHI2DSMVQWIX3LMV43ASLTON2WKOZSGA2TQMJQGAYDCNA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

jakezatecky commented 9 months ago

I spent a couple of hours troubleshooting your issue. I confirmed it is a Next.js issue (and not a Node/ESM/Webpack issue).

The issue results from Next.js defaulting to using Server Side Rendering (SSR). That is problematic for a number of reasons, but in this case the DualListBox component uses Element (a DOM class) in the transpiled code, which is inaccessible when using SSR.

When using Next.js, you can overcome this limitation by using so-called dynamic imports:

import dynamic from 'next/dynamic';

const DualListBox = dynamic(() => import('react-dual-listbox'), { ssr: false });
MariamKhojashvili commented 9 months ago

I have tried using dynamic import, and the error that I see changed (attaching logs below). Here is my package json: 

{
    "name": "admin",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev --turbo",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "format": "prettier --check --ignore-path .gitignore .",
        "format:fix": "prettier --write --ignore-path .gitignore ."
    },
    "dependencies": {
        "@faker-js/faker": "^8.2.0",
        "@hookform/resolvers": "^3.3.2",
        "@radix-ui/react-avatar": "^1.0.4",
        "@radix-ui/react-checkbox": "^1.0.4",
        "@radix-ui/react-dialog": "^1.0.5",
        "@radix-ui/react-dropdown-menu": "^2.0.6",
        "@radix-ui/react-icons": "^1.3.0",
        "@radix-ui/react-label": "^2.0.2",
        "@radix-ui/react-popover": "^1.0.7",
        "@radix-ui/react-radio-group": "^1.1.3",
        "@radix-ui/react-scroll-area": "^1.0.5",
        "@radix-ui/react-select": "^2.0.0",
        "@radix-ui/react-separator": "^1.0.3",
        "@radix-ui/react-slider": "^1.1.2",
        "@radix-ui/react-slot": "^1.0.2",
        "@radix-ui/react-switch": "^1.0.3",
        "@radix-ui/react-tabs": "^1.0.4",
        "@radix-ui/react-toast": "^1.1.5",
        "@radix-ui/react-tooltip": "^1.0.7",
        "@t3-oss/env-nextjs": "^0.7.1",
        "@tanstack/react-table": "^8.10.7",
        "@typescript-eslint/eslint-plugin": "^6.9.1",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.0.0",
        "cmdk": "^0.2.0",
        "date-fns": "^2.30.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-prettier": "^9.0.0",
        "eslint-plugin-prettier": "^5.0.1",
        "eslint-plugin-sonarjs": "^0.21.0",
        "lucide-react": "^0.291.0",
        "next": "^14.0.3",
        "next-auth": "^4.24.5",
        "next-themes": "^0.2.1",
        "prettier": "^3.0.3",
        "react": "^18.2.0",
        "react-day-picker": "^8.9.1",
        "react-dom": "^18.2.0",
        "react-dual-listbox": "^6.0.0",
        "react-hook-form": "^7.48.2",
        "react-wrap-balancer": "^1.1.0",
        "sass": "^1.69.4",
        "tailwind-merge": "^2.0.0",
        "tailwindcss-animate": "^1.0.7",
        "vaul": "^0.7.7",
        "zod": "^3.22.4"
    },
    "devDependencies": {
        "@trivago/prettier-plugin-sort-imports": "^4.3.0",
        "@types/node": "^20.8.10",
        "@types/react": "^18",
        "@types/react-dom": "^18",
        "@types/react-dual-listbox": "^2.2.5",
        "autoprefixer": "^10",
        "eslint": "^8",
        "eslint-config-next": "^14.0.1",
        "postcss": "^8",
        "tailwindcss": "^3",
        "typescript": "^5"
    }
}

localhost-1703833780464.log localhost-1703833797619.log localhost-1703833805819.log localhost-1703833810909.log localhost-1703833817700.log localhost-1703833821847.log localhost-1703833826532.log localhost-1703833832431.log localhost-1703833840733.log localhost-1703833846336.log localhost-1703833850133.log localhost-1703833854969.log

jakezatecky commented 8 months ago

I went ahead and made a type check that should ensure compatibility with server side rendering. This should resolve issues with the default configuration of NextJS and any other similar framework.