Next Integration Docs: Components Load But Do Not Function

[vforvasquez]

Following the new Next Integration Steps will overcome the "document is not defined" issue that has been mentioned and the components will load but they will not function.

To Reproduce

1. Follow the steps in https://tailwind-elements.com/docs/standard/integrations/next-integration/
2. Create a component with dropdown example code and update to fix React-related errors (e.g. replace class with className
3. Save and Serve

Expected behavior A dropdown appears that works like the demo.

Actual behavior A dropdown appears that is not clickable. Show your code Code from demo with small, react-based edits:

<div className="relative" data-te-dropdown-ref>
    <button
        className="flex items-center whitespace-nowrap rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] motion-reduce:transition-none dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
        type="button"
        id="dropdownMenuButton1"
        data-te-dropdown-toggle-ref
        aria-expanded="false"
        data-te-ripple-init
        data-te-ripple-color="light">
        Dropdown button
        <span className="ml-2 w-2">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                className="h-5 w-5">
                <path
                    fillRule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clipRule="evenodd" />
            </svg>
        </span>
    </button>
    <ul
        className="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg dark:bg-neutral-700 [&[data-te-dropdown-show]]:block"
        aria-labelledby="dropdownMenuButton1"
        data-te-dropdown-menu-ref>
        <li>
            <a
                className="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-neutral-600"
                href="#"
                data-te-dropdown-item-ref
            >Action</a
            >
        </li>
        <li>
            <a
                className="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-neutral-600"
                href="#"
                data-te-dropdown-item-ref
            >Another action</a
            >
        </li>
        <li>
            <a
                className="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-neutral-600"
                href="#"
                data-te-dropdown-item-ref
            >Something else here</a
            >
        </li>
    </ul>
</div>

Desktop (please complete the following information):

• OS: Linux
• Browser Brave Additional context Add any other context about the problem here.

[Trochonovitz]

Hi, we encounter enormous more errors with SSR frameworks and in fact couple other components (like Carousel) are not displaying properly in comparison to CSR frameworks. We are investigating it.

All you got to do is import Tailwind Elements CSS file in global Next file (like _app.js/tsx) or in specific file, where you got the problematic components.

import "tw-elements/dist/css/tw-elements.min.css";

[w3bdesign]

@vforvasquez

Try the following in your _app.jsx:

import Script from "next/script";

Then inside the component: <Script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/tw-elements.umd.min.js" />

[Sufod]

Hi,

Following up on this, I encounter a problem using Dropdowns with Nextjs.

Everything seems to be fine except that when I click the dropdown, the menu appears and shortly after just disappears.

I'm already using import "tw-elements/dist/css/tw-elements.min.css";

I tried to add import Script from "next/script"; in _app.tsx

Then inside the component: <Script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/tw-elements.umd.min.js" /> without success...

I noticed a strange error message from tailwind config ->

---

I created a new project using this boilerplate -> https://github.com/ixartz/Next-js-Boilerplate

I followed the integration tutorial -> https://tailwind-elements.com/docs/standard/integrations/next-integration/

I run the server using 'npm run dev', Node version is v18.4.0

I'm using Google Chrome

I'm on Linux (Ubuntu 22.04.2 LTS)

Here is packae.json just in case -> { "name": "next-js-boilerplate", "version": "3.10.0", "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "build-stats": "cross-env ANALYZE=true npm run build", "export": "next export", "build-prod": "run-s clean build export", "clean": "rimraf .next .swc out coverage", "lint": "next lint", "format": "next lint --fix && prettier '**/*.{json,yaml}' --write --ignore-path .gitignore", "check-types": "tsc --noEmit --pretty && tsc --project cypress --noEmit --pretty", "test": "jest", "commit": "cz", "cypress": "cypress open", "cypress:headless": "cypress run", "e2e": "start-server-and-test dev http://localhost:3000 cypress", "e2e:headless": "start-server-and-test dev http://localhost:3000 cypress:headless", "storybook": "storybook dev -p 6006", "storybook:build": "storybook build", "storybook:serve": "http-server storybook-static --port 6006 --silent", "serve-storybook": "run-s storybook:*", "test-storybook:ci": "start-server-and-test serve-storybook http://localhost:6006 test-storybook", "prepare": "husky install", "postbuild": "next-sitemap" }, "dependencies": { "next": "^13.4.1", "next-seo": "^6.0.0", "next-sitemap": "^4.0.9", "react": "^18.2.0", "react-dom": "^18.2.0", "tw-elements": "^1.0.0-beta2" }, "devDependencies": { "@commitlint/cli": "^17.6.3", "@commitlint/config-conventional": "^17.6.3", "@commitlint/cz-commitlint": "^17.5.0", "@next/bundle-analyzer": "^13.4.1", "@percy/cli": "^1.24.0", "@percy/cypress": "^3.1.2", "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.1", "@storybook/addon-essentials": "^7.0.9", "@storybook/addon-interactions": "^7.0.9", "@storybook/addon-links": "^7.0.9", "@storybook/blocks": "^7.0.9", "@storybook/nextjs": "^7.0.9", "@storybook/react": "^7.0.9", "@storybook/test-runner": "^0.10.0", "@storybook/testing-library": "^0.1.0", "@testing-library/cypress": "^9.0.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", "@types/jest": "^29.5.1", "@types/node": "^20.0.0", "@types/react": "^18.2.5", "@typescript-eslint/eslint-plugin": "^5.59.2", "@typescript-eslint/parser": "^5.59.2", "autoprefixer": "^10.4.14", "commitizen": "^4.3.0", "cross-env": "^7.0.3", "cssnano": "^6.0.1", "cypress": "^12.11.0", "eslint": "^8.39.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.0.0", "eslint-config-next": "^13.4.1", "eslint-config-prettier": "^8.8.0", "eslint-plugin-cypress": "^2.13.3", "eslint-plugin-import": "^2.27.5", "eslint-plugin-jest": "^27.2.1", "eslint-plugin-jest-dom": "^4.0.3", "eslint-plugin-jest-formatting": "^3.1.0", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-simple-import-sort": "^10.0.0", "eslint-plugin-storybook": "^0.6.12", "eslint-plugin-tailwindcss": "^3.11.0", "eslint-plugin-testing-library": "^5.10.3", "eslint-plugin-unused-imports": "^2.0.0", "http-server": "^14.1.1", "husky": "^8.0.3", "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0", "lint-staged": "^13.2.2", "npm-run-all": "^4.1.5", "postcss": "^8.4.23", "prettier": "^2.8.8", "rimraf": "^5.0.0", "semantic-release": "^19.0.5", "start-server-and-test": "^2.0.0", "storybook": "^7.0.9", "tailwindcss": "^3.3.2", "typescript": "^4.9.5" }, "config": { "commitizen": { "path": "@commitlint/cz-commitlint" } }, "release": { "branches": [ "main" ], "plugins": [ "@semantic-release/commit-analyzer", "@semantic-release/release-notes-generator", "@semantic-release/changelog", [ "@semantic-release/npm", { "npmPublish": false } ], "@semantic-release/git", "@semantic-release/github" ] }, "author": "Ixartz (https://github.com/ixartz)" }

[juujisai]

If anyone is having issues with document is not defined (or imports from 'tw-elements' package)

Try changing the imports to dynamic imports inside the useEffect method.

  useEffect(() => {
    const init = async () => {
      const { Datepicker, Input, initTE } = await import("tw-elements");
      initTE({ Datepicker, Input });
    };
    init();
  }, []);

Let us know if that helps.