GithubHelp home page GithubHelp logo

Comments (29)

Adonis0123 avatar Adonis0123 commented on May 7, 2024 48

This is how I solved it

/_app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    const use = async () => {
      (await import('tw-elements')).default;
    };
    use();
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

from tailwind-elements.

bllfoad avatar bllfoad commented on May 7, 2024 9

tried every thing the same problem

from tailwind-elements.

eafelix avatar eafelix commented on May 7, 2024 6

Hi Guys, for the nextjs users you only need to create the _document.js file with the next <Script/> component

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

// import 'tw-elements';

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <Script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"/>
      </body>
    </Html>
  )
}

from tailwind-elements.

rain84 avatar rain84 commented on May 7, 2024 3

Hey, guys!
This is my approach with a NextJS 13 and new AppRouter.

  1. Create component for the initialisation of TWElements
"use client";
import { useEffect } from 'react';

export const TWElementsInit = () => {
  useEffect(() => {
    ;(async () => (await import('tw-elements')))()
  }, []);
  return null
}
  1. Import into app/layout.tsx (which replaced the old one '_app.tsx')
import './globals.css'
import {TWElementsInit} from './tw'

export const metadata = {
  title: 'Title,
  description: 'description,
}

export default function RootLayout({
  children,
}: {   children: React.ReactNode
  }) {
  return (
    <html lang="en">
      <TWElementsInit/>
      <body>{children}</body>
    </html>
  )
}

Good luck! :)

from tailwind-elements.

Taarek avatar Taarek commented on May 7, 2024 2

What you can do in the meantime is drag the index.min.js (found in /node_modules/tw-elements/dist/js/) into your static folder, then use this inside a custom layout (https://nextjs.org/docs/basic-features/layouts).
I personally put it inside a parent div, before the <main>{children}</main>

<Script src="index.min.js"/>

Although, I do not know if this is bad practice or not. The only thing I can think of is that you'll need to update the index.min.js inside your static folder yourself whenever it gets updated upstream.

from tailwind-elements.

stevebrowndotco avatar stevebrowndotco commented on May 7, 2024 2

@Trochonovitz link is broken btw

from tailwind-elements.

carlosriveroib avatar carlosriveroib commented on May 7, 2024 2

Hey, guys! This is my approach with a NextJS 13 and new AppRouter.

  1. Create component for the initialisation of TWElements
"use client";
import { useEffect } from 'react';

export const TWElementsInit = () => {
  useEffect(() => {
    ;(async () => (await import('tw-elements')))()
  }, []);
  return null
}
  1. Import into app/layout.tsx (which replaced the old one '_app.tsx')
import './globals.css'
import {TWElementsInit} from './tw'

export const metadata = {
  title: 'Title,
  description: 'description,
}

export default function RootLayout({
  children,
}: {   children: React.ReactNode
  }) {
  return (
    <html lang="en">
      <TWElementsInit/>
      <body>{children}</body>
    </html>
  )
}

Good luck! :)

and how do you init Carousel for example?

from tailwind-elements.

Taarek avatar Taarek commented on May 7, 2024 1

@Taarek this way we can have SSR ?

I'm not sure how to see that. I'm pretty new to the whole nextjs/react world.

I haven't ran into any issues at least from what I can tell.

from tailwind-elements.

ensarince avatar ensarince commented on May 7, 2024 1

finally solved the issue.

I added

  import dynamic from "next/dynamic"
  const {} = dynamic(import("tw-elements"), { ssr: false });

to the index.tsx file
which caused another error when deploying the website.
I solved that also by adding index.d.ts file to root
inside that file, I added

declare module "tw-elements"

line and also added "index.d.ts" to the include in tsconfig.json file

from tailwind-elements.

Trochonovitz avatar Trochonovitz commented on May 7, 2024 1

Hi, we just have launched bunch of integration tutorials - both with CSR and SSR frameworks. If you have more questions about integration or you still got some problems with particular components, let us know by adding new issue / topic in discussions section (if there are some unclrear informations or just want let us know about something).

Next.js integration tutorial.

from tailwind-elements.

beeb avatar beeb commented on May 7, 2024

Same here, I am assuming it's because of server-side rendering?

EDIT: duplicate of #1038 which is still unsolved since January

from tailwind-elements.

busychild avatar busychild commented on May 7, 2024

+1

from tailwind-elements.

slamer59 avatar slamer59 commented on May 7, 2024

@Taarek this way we can have SSR ?

from tailwind-elements.

uricantasala avatar uricantasala commented on May 7, 2024

+1

+1

I'll try what is suggested

from tailwind-elements.

uricantasala avatar uricantasala commented on May 7, 2024

This is how I solved it

/_app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    const use = async () => {
      (await import('tw-elements')).default;
    };
    use();
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

It worked like a charm.

Many thanks!

Really appreciated!!

It saved me more time spending on this.

😊 ❤️

from tailwind-elements.

locohost avatar locohost commented on May 7, 2024

This is how I solved it

/_app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    const use = async () => {
      (await import('tw-elements')).default;
    };
    use();
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

Yeah this works. This needs to be in the official documentation somewhere.

from tailwind-elements.

devSahinur avatar devSahinur commented on May 7, 2024

This is how I solved it

/_app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    const use = async () => {
      (await import('tw-elements')).default;
    };
    use();
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

thanks you so much dude @Adonis0123

from tailwind-elements.

andrei-ivanov avatar andrei-ivanov commented on May 7, 2024

Duplicate of #1044
@filipkappa @marveluck Any chance for a fix pretty please?
People are have started to resort to some very ridiculous workarounds for this issue.

from tailwind-elements.

svandegar avatar svandegar commented on May 7, 2024

useEffect(() => {
const use = async () => {
(await import('tw-elements')).default;
};
use();
}, []);

Worked perfectly! Thank you!

from tailwind-elements.

juvenalBOBENZE avatar juvenalBOBENZE commented on May 7, 2024

moi j'ai essayé toutes ces methodes mais ça ne marche toujours pas, je fais du nextt js

function MyApp({ Component, pageProps }: AppProps) {
useEffect (() => {
const use = async () => {
(await import('tw-elements')).default;
};
use();
}, []);

return <Component {...pageProps} />;
}

export default MyApp;

le code est souligné

from tailwind-elements.

izzie91 avatar izzie91 commented on May 7, 2024

Please, about this issue, i can not get my component to see the script js file, so it's not working properly any tw-elements component I am trying to use.
I did: in tailwind.config.js
content: [
"./pages//*.{js,ts,jsx,tsx}",
"./components//.{js,ts,jsx,tsx}",
"./src/**/.{html,js}",
"./node_modules/tw-elements/dist/js/**/*.js",
"./node_modules/react-tailwindcss-datepicker/dist/index.esm.js",
],
plugins: [require("tw-elements/dist/plugin"), require("@tailwindcss/forms")],

////

in _app.js i did:

useEffect(() => {
const use = async () => {
;(await import("tw-elements")).default
}
use()
}, [])

////
and finally i try to use some of the codein tw-elemts but they are not working

what am i doing wrong?

from tailwind-elements.

VictorSS avatar VictorSS commented on May 7, 2024

Tried everthing above, still no success, considering i'm using Next 13. Pls if someone find a better solution pls help.

from tailwind-elements.

vforvasquez avatar vforvasquez commented on May 7, 2024

Hi, we just have launched bunch of integration tutorials - both with CSR and SSR frameworks. If you have more questions about integration or you still got some problems with particular components, let us know by adding new issue / topic in discussions section (if there are some unclrear informations or just want let us know about something).

Next.js integration tutorial.

@Trochonovitz
The tutorial steps do not work. The components load but do not function. Also using import with dynamic gave a type error.

  Type '() => Promise<typeof import("/.../pages/component.ts")>' is not assignable to type '() => LoaderComponent<{}>'.
    Type 'Promise<typeof import("/.../pages/component.ts")>' is not assignable to type 'LoaderComponent<{}>'.
      Type 'typeof import("/.../pages/component.ts")' is not assignable to type 'ComponentType<{}> | ComponentModule<{}>'.ts(2345)
      ```

from tailwind-elements.

Trochonovitz avatar Trochonovitz commented on May 7, 2024

@vforvasquez change your file extension to .tsx instead of .ts.

from tailwind-elements.

JustARatherRidiculouslyLongUsername avatar JustARatherRidiculouslyLongUsername commented on May 7, 2024

Hey, guys! This is my approach with a NextJS 13 and new AppRouter.

  1. Create component for the initialisation of TWElements
"use client";
import { useEffect } from 'react';

export const TWElementsInit = () => {
  useEffect(() => {
    ;(async () => (await import('tw-elements')))()
  }, []);
  return null
}
  1. Import into app/layout.tsx (which replaced the old one '_app.tsx')
import './globals.css'
import {TWElementsInit} from './tw'

export const metadata = {
  title: 'Title,
  description: 'description,
}

export default function RootLayout({
  children,
}: {   children: React.ReactNode
  }) {
  return (
    <html lang="en">
      <TWElementsInit/>
      <body>{children}</body>
    </html>
  )
}

Good luck! :)

and how do you init Carousel for example?

Like so

export const TWElementsInit = () => {
  useEffect(() => {
    (async () => {
      const { initTE, Carousel } = await import('tw-elements');
      initTE({ Carousel });
    })();
  }, []);
  return null;
};

from tailwind-elements.

AliAbdllah avatar AliAbdllah commented on May 7, 2024

Tried everything and nothing worked except for adding this code for every component I'm creating:

"use client";
import { useEffect } from "react";
const AppSelect = () => {
    useEffect(() => {
        const init = async () => {
            const { Select, initTE } = await import("tw-elements");
            initTE({ Select });
        };
        init();
    }, []);
    return (
        <>
            <select data-te-select-init multiple>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
                <option value="4">Four</option>
                <option value="5">Five</option>
                <option value="6">Six</option>
                <option value="7">Seven</option>
                <option value="8">Eight</option>
            </select>
            <label data-te-select-label-ref>Example label</label>

        </>
    );
};

export default AppSelect;

from tailwind-elements.

ignitehub-dev avatar ignitehub-dev commented on May 7, 2024

Does anyone have a solution to this using SvelteKit??

from tailwind-elements.

IliaNikonorov avatar IliaNikonorov commented on May 7, 2024

@ignitehub-dev I've just run into this issue today in my SvelteKit project. Kudos to the guys above, a SvelteKit alternative to their NextJS code seems to work:

<script context="module">
  import { onMount } from 'svelte'; // import onMount either here or in the next script
  export function initTWE() {
    onMount(async () => {
      const { initTE, Select } = await import('tw-elements');
      initTE({ Select });
    });
  }
</script>

and then

<script>
initTWE()
</script>

Not sure if it's stable but at least it stopped raising VITE SSR error.

Disclaimer: I'm not even a dev, just a PM learning some JS with Svelte :)

from tailwind-elements.

ignitehub-dev avatar ignitehub-dev commented on May 7, 2024

@IliaNikonorov i gave up on using TW-Elements as a js package. I found it not to interact nicely when trying to link actions between components with svelteKit. I migrated my project to use Skeleton.

from tailwind-elements.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.