在NextJS项目中使用tw元素

bis0qfac  于 2023-01-02  发布在  其他
关注(0)|答案(1)|浏览(189)

我尝试在nodejs项目中使用tw-element,如果我按照他们的documentation导入tw-element到my _app,我会得到这个错误:
ReferenceError: document is not defined
我发现了一个stackoverflow响应,它说把这个放在tw-element的index.min.js文件的开头:
if (typeof window == "undefined")return;
我试过了,错误消失了,但是库还是不能用。有什么办法吗?

ar7v8xwq

ar7v8xwq1#

首先,使用这些NPM步骤添加顺风元素。
下面是如何让它与Nextjs一起工作:
第一步是将此代码添加到_app.js文件中:

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

例如:

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

确保将import { useEffect } from "react";添加到_app.js的顶部。
_app.js文件外,不要将Tailwind元素导入其他任何位置,这一点也很重要。
顺风元素现在应该工作了!

相关问题