将flowbite与nextJS和typescript一起使用时出错

mi7gmzs6  于 2023-01-13  发布在  TypeScript
关注(0)|答案(3)|浏览(158)

我在一个NextJS项目中安装了tailwind和flowbite,当我在_app.tsx中安装import "flowbite"时,我得到了下面的错误。

ReferenceError: document is not defined
    at Object.366 (D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:35:1)
    at __webpack_require__ (D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:496:41)
    at D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:509:17
    at D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:2631:3
    at Object.<anonymous> (D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:2633:12)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
error - ReferenceError: document is not defined
ReferenceError: document is not defined
    at Object.366 (D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:35:1)
    at __webpack_require__ (D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:496:41)
    at D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:509:17
    at D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:2631:3
    at Object.<anonymous> (D:\shopflo\next-tailwind-typescript-starter\node_modules\flowbite\dist\flowbite.js:2633:12)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)

document is not defined给出了javascript正在产生问题的线索。请帮助解决这个问题。在我的tsconfig.json中设置了allowJS:true,那么为什么这会产生问题呢?

bkhjykvo

bkhjykvo1#

从文档中可以看出,Flowbite目前正在开发一个独立的库,以便与诸如NextJS之类的React框架兼容。

mrfwxfqh

mrfwxfqh2#

这对我来说很好,每个flowbite组件都有一个init函数来使其交互。

import { initAccordions } from "flowbite";

  useEffect(() => {
    initAccordions();
  });
jbose2ul

jbose2ul3#

如果你正在使用混音js,只需在entry.client.tsx文件中添加import 'flowbite'

相关问题