如何在 nextjs 中安装顺风元素？答案

【问题标题】：How to install the tailwind elements in nextjs?如何在 nextjs 中安装顺风元素？
【发布时间】：2022-08-05 05:23:18
【问题描述】：

我正在为 nextjs 中的滑块安装顺风元素，但它在 nextjs 中不起作用，有任何解决方案可以轻松安装它。

[我按照这个方法][1] [1]：https://tailwind-elements.com/quick-start/ 当我添加这个 import \'tw-elements\'; 然后它告诉我一个错误

标签： next.js

【解决方案1】：

我遇到了同样的问题，修复很简单。在你的项目中去编辑 node_modules/tw-elements/dist/js/index.min.js

一开始的改变

function(n){

为了这

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

瞧！！

注意：如果您在项目中使用 Vercel 或任何其他 Nextjs 托管，您会注意到它会自动下载所有模块，因此您在本地项目中所做的更改不会反映在部署中。

幸运的是，您可以在 Vercel 中运行预构建命令：

转到项目设置_>常规
覆盖构建命令
把这个放在字段中：

sed -i 's/function(n){var r={};function o(t)/function(n){if(typeof window == "undefined")return;var r={};function o(t )/g' node_modules/tw-elements/dist/js/index.min.js;下一个构建

嗯......它又脏又丑，但它有效

【讨论】：

让它工作的方式真的很丑陋，为什么没有人通知 tw-element 作者？或者其他方式是在本地存储 JS 文件。
我似乎无法让它工作。我已将 if 放入文件中，但组件不起作用
注意 !function 之前的感叹号。
在 MacOS 上 - sed -i '' 's/!function(n){var r={};function o(t)/!function(n){if(typeof window == "undefined")return;var r ={};function o(t)/g' node_modules/tw-elements/dist/js/index.min.js; node_modules/tw-elements/dist/js/index.min.js;下一个构建

【解决方案2】：

一位用户在 git hub 的问题中解决了这个问题。它对我有用，所以希望它对你有用 https://github.com/mdbootstrap/Tailwind-Elements/issues/1058#issuecomment-1176988692

【讨论】：