Open vforvasquez opened 1 year ago
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";
@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" />
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)" }
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.
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
class
withclassName
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:
Desktop (please complete the following information):