Incompatibility with next 13 and typescript

[VictorSS]

According to the Tailwind Elements documentation, the integration mode for Next.js involves adding import 'tw-elements' to your pages/_app.js file. However, in Next.js 13, instaled with the command "npx create-next-app@latest" there is no longer an _app.js file, and you cannot add this import statement to the layout component because it is a server-side only component.

Furthermore, if you use TypeScript in your Next.js project, you may receive the error "Could not find a declaration file for module 'tw-elements'. 'd:/Projetos/Web/ai-app/node_modules/tw-elements/dist/js/index.min.js' implicitly has an 'any' type."

It would be great if the documentation could be updated to reflect these changes, or if there is a new recommended way to integrate Tailwind Elements with Next.js 13 and TypeScript. Thank you!

[tatleung]

I manage to have NextJS 13 and Tailwind Elements working by using "dynamic import" like:

"use client";

import dynamic from "next/dynamic";
// @ts-ignore
const _ = typeof window !== "undefined" && dynamic(import("tw-elements"));

export default function Login() {
  const onSubmit = (event: any) => {
    event.preventDefault();
  };
  return (
    <section className="h-screen">
      <div className="container h-full px-6 py-24">
        <div className="g-6 flex h-full flex-wrap items-center justify-center lg:justify-between">
   ...
        </div>
   </div>
  );

Please take a look at the sample code at https://github.com/tatleung/nextjs-tw-elements. The above code fragment is from the src/components/Login.tsx React component. Since the "tw-element" script seems to be intended to run on the client, I had to add the "use client" annotation. This appears to be working as expected. Since I am calling the dynamic import in a component, it is not ideal. But I like to keep the page where this component is embedded as a server component. It also works when the first 5 lines are in the Page component if we don't need to keep it as a server component.

BTW: // @ts-ignore is needed to suppress a typescript check error due to no @types/tw-elements file is currently not available. typeof window !== "undefined" && is added before the import to prevent an exception when Next tries to render the component on the server.

[Trochonovitz]

Hi, I am always testing latest version - _app.js/tsx is present in Next 13. About missing types: these are coming in beta2 but for now you can simply add declare module 'tw-elements' in next-env.d.ts file in root directory.

Furthermore we have updated a tutorial with dynamic import way.

[Sufod]

You may link this issue, containing additional information -> #1613

[ogheneovo12]

[juujisai]

I've just updated the next integration tutorials.

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.

[ogheneovo12]

I've just updated the next integration tutorials.

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.

nice, had exact same issue before, already switched to flowbite, will check it out again on my next project.