如何在nextjs中安装顺风元件?

6yoyoihd  于 2023-01-02  发布在  其他
关注(0)|答案(2)|浏览(130)

我正在为NextJS中的滑块安装顺风元素,但它在NextJS中不起作用有任何解决方案可以以简单的方式安装它。
[我遵循此方法][1] [1]:https://tailwind-elements.com/quick-start/当我添加这个导入'tw-element';然后显示错误

q3qa4bjr

q3qa4bjr1#

一个用户在Github的问题中解决了这个问题。它对我很有效,所以希望它对你也有效,这里是这个问题的链接。
_app.js文件中更新为:

function MyApp({ Component, pageProps }: AppProps) {

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

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

export default MyApp;
wmomyfyw

wmomyfyw2#

我也遇到过同样的问题,解决方法很简单,在你的项目中编辑node_modules/tw-elements/dist/js/index.min.js
一开始就改变

function(n){

为此

function(n){if (typeof window == "undefined")return;

哇!
注意:如果您使用VErcel或任何其他Nextjs托管您的项目,您会注意到它会自动下载所有模块,因此您在本地项目中所做的更改不会反映在部署中。
幸运的是,您可以在Vercel中运行预构建命令:
1.转到项目设置_〉常规
1.覆盖"生成"命令
1.把这个放到现场:
sed-i的/函数(n){变量r ={};函数o(t)/函数(n){if(窗口类型=="未定义")返回;变量r ={};函数o(t)/g '节点_模块/两元素/分布/js/索引.最小. js;下一次构建
嗯......这是蹩脚和丑陋的,但它的工作

相关问题