Next js 13 Integration Modals ReferenceError

[ziming-yuan]

I went through the nextjs integration as instructed:

My tailwind.config.js file is:

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./node_modules/tw-elements/dist/js/**/*.js",
],
theme: {
    extend: {},
},
darkMode: "class",
plugins: [require("tw-elements/dist/plugin.cjs")]
}

Global.css in the app directory is

@tailwind base;
@tailwind components;
@tailwind utilities;

In layout.jsx, I imported import "tw-elements/dist/css/tw-elements.min.css";
I created a standalone element Modal.jsx:

'use client';
import React, { useState, useEffect } from "react";

const VerticalyCentered = () => {
  useEffect(() => {
    const init = async () => {
      const {
        TERipple,
        TEModal,
        TEModalDialog,
        TEModalContent,
        TEModalHeader,
        TEModalBody,
        TEModalFooter,
        initTE } = await import("tw-elements");
      initTE({
        TERipple,
        TEModal,
        TEModalDialog,
        TEModalContent,
        TEModalHeader,
        TEModalBody,
        TEModalFooter });
    };
    init();
  }, []);

  const [
    showVerticalyCenteredScrollModal,
    setShowVerticalyCenteredScrollModal,
  ] = useState(false);

  return (
    <div>
      <div className="space-x-2">
        {/* <!--Button trigger vertically centered scrollable modal--> */}
        <TERipple rippleColor="white">
          <button
            type="button"
            className="inline-block 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
            onClick={() => setShowVerticalyCenteredScrollModal(true)}
          >
            Vertically centered scrollable modal
          </button>
        </TERipple>
      </div>
      ...
export default VerticalyCentered;

I then dynamically imported it into app/test/page.jsx:

import dynamic from "next/dynamic";

const Modal = dynamic(() => import("../components/Modal"), {
  ssr: false,
});

const Home = () => {
  return (
    <>
      <Modal />
    </>
  );
};

export default Home;

I got the following error:

Unhandled Runtime Error
ReferenceError: TERipple is not defined

Source
app/components/Modal.jsx (37:9) @ TERipple

  35 | <div className="space-x-2">
  36 |   {/* <!--Button trigger vertically centered scrollable modal--> */}
> 37 |   <TERipple rippleColor="white">
     |   ^
  38 |     <button
  39 |       type="button"
  40 |       className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs

Would greatly appreciate help with this!

[juujisai]

Hi! Seems like you are trying to import tw-elements-react components from the tw-elements package.

If you want to use the Modal from tw-elements-react you can find the docs here:
https://tailwind-elements.com/docs/react/components/modal/

And for the standard version, tw-elements you can go here:
https://tailwind-elements.com/docs/standard/components/modal/

[ziming-yuan]

That makes sense. Thank you so much!